W3docs

Grupos de captura

Aprende los grupos de captura en expresiones regulares de JavaScript: grupos numerados, grupos con nombre (?<name>), grupos sin captura (?:), y cómo usarlos con match, matchAll y replace ($1, $<name>).

Un grupo de captura es una parte de una expresión regular encerrada entre paréntesis (...). Cumple dos funciones: agrupa una parte del patrón para que los cuantificadores y la alternancia se apliquen al bloque completo, y recuerda el texto que coincidió para que puedas recuperarlo más adelante.

Esto es lo que convierte una expresión regular de una prueba de sí/no en una herramienta de extracción de datos. En lugar de saber solo que una fecha coincidió, puedes extraer el año, el mes y el día como piezas separadas. Esta página cubre los grupos numerados, los grupos con nombre, los grupos sin captura, y cómo se comportan los grupos con match, matchAll y replace.

Entendiendo los grupos de captura

Cuando se encuentra una coincidencia, la coincidencia completa se almacena en el índice 0 del array de resultados, y cada grupo de captura se almacena en los índices siguientes (1, 2, 3, …) en el orden en que aparecen los paréntesis de apertura de los grupos, de izquierda a derecha.

Sintaxis y uso básico

Aquí tienes un ejemplo sencillo:

javascript— editable

match[0] es siempre la cadena completa que coincidió. match[1] y match[2] contienen el texto capturado por el primer y segundo par de paréntesis. Los grupos se numeran por su ( de apertura, por lo que incluso los grupos anidados tienen un orden predecible (ver más abajo).

Uso avanzado y técnicas

Grupos de captura anidados

Los grupos pueden anidarse, lo que permite patrones más complejos. La numeración sigue cada paréntesis de apertura de izquierda a derecha:

javascript— editable

El grupo externo (grupo 1) captura foobar, mientras que los grupos internos (2 y 3) capturan foo y bar por separado. Si un grupo es opcional y no participa en la coincidencia, su posición es undefined.

Grupos sin captura

A veces quieres agrupar partes de un patrón —para aplicar un cuantificador o alternancia— sin gastar un slot numerado. Los grupos sin captura usan (?:...):

javascript— editable

Aquí foo está agrupado pero no capturado, por lo que bar se convierte en el grupo 1 en lugar del grupo 2. Los grupos sin captura mantienen tu array de resultados limpio y son ligeramente más rápidos cuando no necesitas el texto coincidente.

Un uso común es repetir un bloque sin capturar cada repetición:

javascript— editable

Ejemplos prácticos

Análisis de fechas

Los grupos de captura pueden analizar y reformatear fechas de cadenas:

javascript— editable

Este código extrae el año, el mes y el día, luego formatea la fecha en un estilo diferente.

Extracción de información de URLs

Otro caso de uso común es extraer partes de una URL:

javascript— editable

Esta expresión regular captura el protocolo, el dominio, la ruta y la cadena de consulta por separado.

Consejos para usar grupos de captura de manera efectiva

  1. Planifica tus grupos: Piensa de antemano qué partes del patrón necesitas capturar.
  2. Usa grupos sin captura cuando sea necesario: Usa (?:...) para agrupar sin capturar y simplificar tu array de resultados.
  3. Grupos de captura con nombre: En JavaScript moderno (ES2018+), puedes usar grupos de captura con nombre para mayor legibilidad.
  4. Comportamiento con la bandera global: Al usar la bandera g con String.prototype.match(), se devuelve un array de todas las cadenas coincidentes en lugar de los grupos de captura. Usa String.prototype.matchAll() para la extracción detallada de grupos con la bandera global.

Grupos de captura con nombre

Los grupos numerados son frágiles: añade un grupo en el medio y cada índice posterior se desplaza. Los grupos de captura con nombre (ES2018+) evitan esto etiquetando cada grupo con (?<name>...). Las capturas aparecen en un object groups en lugar de (o además de) los índices numerados:

javascript— editable
Información

Prefiere los grupos de captura con nombre para cualquier patrón que no sea trivial — hacen que tanto la expresión regular como el código que la lee se documenten por sí solos.

Uso de grupos con match, matchAll y replace

La forma en que lees los grupos capturados depende del método que utilices.

Sin la bandera gmatch devuelve los grupos

Un String.prototype.match() no global devuelve un único array de coincidencias con todos los grupos, exactamente como los ejemplos anteriores. Esta es la forma más común de extraer un único registro.

Con la bandera g — usa matchAll para los grupos

Cuando añades la bandera global g, match() devuelve un array plano con solo las cadenas de coincidencia completa — los grupos se pierden. Para obtener los grupos de cada coincidencia, usa String.prototype.matchAll(), que devuelve un iterador de arrays de coincidencias (cada uno con su propio object groups):

javascript— editable

Referencia a grupos en replace

En una cadena de reemplazo de String.prototype.replace() puedes referenciar capturas por número con $1, $2, … o por nombre con $<name>:

javascript— editable

Para mayor control, pasa una función a replace. Sus argumentos son la coincidencia completa, luego cada grupo capturado y (si usaste nombres) un object groups final:

javascript— editable

Referencias inversas

Una vez que un grupo ha capturado texto, puedes hacer coincidir ese mismo texto nuevamente más adelante en el mismo patrón usando una referencia inversa\\1 para grupos numerados o \\k<name> para los nombrados. Esto es útil para encontrar palabras repetidas o hacer coincidir comillas emparejadas:

javascript— editable

Las referencias inversas son un tema propio — consulta Referencias inversas en patrones para todos los detalles.

Temas relacionados

Conclusión

Los grupos de captura en las expresiones regulares de JavaScript ofrecen una manera robusta de trabajar con patrones de cadenas complejos. Al dominar su uso, puedes realizar manipulaciones de texto sofisticadas, extraer datos significativos y manejar reemplazos con facilidad. Ya sea que estés analizando fechas, procesando URLs o reformateando cadenas, los grupos de captura proporcionan la flexibilidad y el poder necesarios para tareas avanzadas de procesamiento de texto. Explora estos ejemplos, practica con tus propios patrones y mejora tus habilidades en JavaScript para manejar cualquier desafío de manipulación de cadenas.

Práctica

Práctica
¿Cuáles de las siguientes afirmaciones sobre los grupos de captura en las expresiones regulares de JavaScript son verdaderas?
¿Cuáles de las siguientes afirmaciones sobre los grupos de captura en las expresiones regulares de JavaScript son verdaderas?
Was this page helpful?