Tema 11 · Grupos

11. Grupos de Captura, No-Captura (?:) y Grupos con Nombre (?<id>)

Organiza expresiones complejas, optimiza memoria con (?:...) y desestructura grupos directamente con match.groups en ES2018+.

10. Banderas (Flags): g, i, m, s (dotAll), u (Unicode) y v (ES2024) 12. Aserciones Lookaround: Lookahead y Lookbehind Positivos y Negativos

Grupos de Captura: Agrupamiento y Extracción

Los paréntesis (...) cumplen dos propósitos simultáneos: aplican cuantificadores o alternadores a un bloque entero de texto y capturan la porción coincidente para su posterior extracción o reutilización.

  • Grupo de Captura Estándar (patrón): Asigna la coincidencia a un índice numérico secuencial (match[1], match[2]...).
  • Grupo de No-Captura (?:patrón): Agrupa lógica para aplicar operadores (como (?:https|ftp)) sin gastar memoria ni crear un slot en el array de resultados.
  • Grupo con Nombre (?<nombre>patrón) (ES2018+): Asigna un identificador semántico accesible a través de la propiedad match.groups.nombre.
Diagrama Técnico: Grupos Posicionales vs Nombrados en JavaScript

Diagrama 11.1: Comparativa de legibilidad y mantenimiento: Índices numéricos vs Grupos con Nombre en ES2018+.

Referencias Retrospectivas (Backreferences)

Puedes exigir que un grupo capturado previamente vuelva a repetirse de forma idéntica más adelante en el mismo patrón:

  • En grupos posicionales: con barra invertida y número (ej. /(["'])(.*?)\1/ para comillas emparejadas).
  • En grupos con nombre: con la sintaxis \k<nombre> (ej. /(?<comilla>["'])(.*?)\k<comilla>/).

⚡ Parseo de URLs y Detección de Etiquetas Emparejadas con Grupos

Desestructura los componentes de una URL mediante grupos nombrados y utiliza referencias retrospectivas para asegurar el cierre correcto de etiquetas HTML.

grupos-captura.js
Solo lectura 
// 1. Parseo de URLs con Grupos Nombrados y Grupos de No-Captura
const urlPatron = /^(?<protocolo>https?):\/\/(?<host>[\w.-]+)(?::(?<puerto>\d+))?(?<ruta>\/[^\s?]*)?(?:\?(?<query>[^\s#]+))?$/;

const muestraUrl = "https://academia.kilopolis.com:443/cursos/javascript?filtro=avanzado";
const resultadoUrl = muestraUrl.match(urlPatron);

console.log("--- 1. Desestructuración de Grupos Nombrados ---");
if (resultadoUrl && resultadoUrl.groups) {
  const { protocolo, host, puerto, ruta, query } = resultadoUrl.groups;
  console.log("Protocolo:", protocolo);
  console.log("Host:     ", host);
  console.log("Puerto:   ", puerto || "80 / 443 (por defecto)");
  console.log("Ruta:     ", ruta);
  console.log("Query:    ", query);
}

// 2. Referencias Retrospectivas con \k<nombre> para etiquetas HTML
console.log("\n--- 2. Validación de Etiquetas Emparejadas ---");
const patronTag = /<(?<tag>[a-z1-6]+)>(.*?)<\/\k<tag>>/i;

const pruebaCorrecta = "<h1>Título Principal</h1>";
const pruebaErronea  = "<h2>Título Descuadrado</h3>";

console.log("<h1>...</h1> es válido?  ", patronTag.test(pruebaCorrecta)); // true
console.log("<h2>...</h3> es válido?  ", patronTag.test(pruebaErronea));  // false
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
En JavaScript moderno, ¿cómo se referencia retrospectivamente dentro del mismo patrón un grupo nombrado con (?<seccion>...)?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Regex en JavaScript: Expresiones Regulares & RegExp y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.