Tema 8 · ES2020

8. str.matchAll(): Extracción Exhaustiva e Iteración Moderna (ES2020)

El reemplazo moderno y seguro de regex.exec(). Obtén todas las coincidencias con índices y grupos en un solo iterador con [...matchAll()].

7. Métodos de String: str.search(), str.match() y str.split() 9. str.replace() y replaceAll(): Sustituciones con Tokens y Callbacks

La Revolución de str.matchAll() en ECMAScript 2020

Históricamente, si un desarrollador de JavaScript quería extraer múltiples coincidencias y al mismo tiempo conservar sus grupos de captura e índices, estaba obligado a escribir un bucle while con regex.exec() gestionando el peligroso puntero lastIndex.

A partir de ES2020, el método estándar str.matchAll(regex) resuelve este problema devolviendo un iterador de todas las coincidencias detalladas.

⚠️ Requisito Obligatorio: La expresión regular pasada a matchAll() debe tener siempre la bandera /g. Si omites la bandera /g, JavaScript lanzará inmediatamente un TypeError: String.prototype.matchAll called with a non-global RegExp argument.

Cómo Consumir el Iterador de matchAll()

  • Bucle for...of: Ideal para procesar coincidencias de forma incremental con bajo consumo de memoria.
  • Operador Spread ([...str.matchAll(regex)]): Convierte el iterador en un array estándar para aplicar .map(), .filter() o .reduce().
  • Array.from(str.matchAll(regex)): Equivalente a la desestructuración con soporte para mapeo en el segundo argumento.

⚡ Extracción de Enlaces Markdown con str.matchAll()

Extrae títulos y URLs de una lista en markdown utilizando matchAll(), accediendo tanto a grupos posicionales como nombrados sin bucles manuales.

matchall-extractor.js
Solo lectura 
const documentoMarkdown = `
# Recursos de Aprendizaje Kilopolis
- Visita nuestra [Academia Oficial](https://academia.kilopolis.com) para tutoriales.
- Revisa el [Manual de JavaScript](https://academia.kilopolis.com/manuales/javascript).
- Consulta el [Repositorio GitHub](https://github.com/solucionaticos/kilopolis-core).
`;

// Patrón con grupos nombrados (?<texto>...) y (?<url>...) con bandera /g obligatoria
const patronMarkdown = /\[(?<texto>[^\]]+)\]\((?<url>https?:\/\/[^\s)]+)\)/g;

console.log("--- 1. Iteración con for...of y matchAll() ---");
for (const match of documentoMarkdown.matchAll(patronMarkdown)) {
  const { texto, url } = match.groups;
  console.log(`Encontrado: "${texto}" => ${url} (en posición ${match.index})`);
}

console.log("\n--- 2. Conversión a Array de Objetos con Array.from() ---");
const enlacesEstructurados = Array.from(
  documentoMarkdown.matchAll(patronMarkdown),
  match => ({
    titulo: match.groups.texto,
    href: match.groups.url,
    posicion: match.index
  })
);

console.log(enlacesEstructurados);
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
¿Qué sucede si ejecutas "texto".matchAll(/\w+/) sin la bandera /g en JavaScript?
🦉
¿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.