13. Bandera /d: Índices Exactos de Coincidencias y Grupos (ES2022)
Aprende a usar la bandera /d (hasIndices) para obtener coordenadas [inicio, fin] de cada grupo para editores y resaltado de código.
La Bandera /d (hasIndices) en ECMAScript 2022
Hasta ES2022, el resultado de una expresión regular solo indicaba dónde empezaba la coincidencia general (mediante match.index), pero era imposible saber con precisión las posiciones exactas de inicio y fin de cada grupo de captura individual sin realizar cálculos manuales propensos a errores.
La bandera /d activa el cálculo de índices exactos y añade la propiedad match.indices al resultado de exec(), match() o matchAll().
Estructura del Objeto match.indices
indices[0]: Tupla[inicio, fin]de la coincidencia completa.indices[1],indices[2]: Tuplas[inicio, fin]de cada grupo posicional.indices.groups[nombre]: Tupla[inicio, fin]del grupo con nombre correspondiente.
⚡ Uso de la Bandera /d para Localizar Coordenadas de Grupos
Aprende a capturar las coordenadas exactas de inicio y fin de grupos nombrados para recortar o resaltar subcadenas con precisión matemática.
// Expresión regular con bandera /d (hasIndices) y grupos con nombre
const regexConIndices = /(?<protocolo>https?):\/\/(?<host>[\w.-]+)/d;
const texto = "Visita https://academia.kilopolis.com para comenzar.";
const match = regexConIndices.exec(texto);
console.log("--- 1. Inspección de match.indices (ES2022) ---");
console.log("Texto completo analizado:", texto);
console.log("Coincidencia general:", match[0]);
// Coordenadas generales [inicio, fin]
const [inicioTotal, finTotal] = match.indices[0];
console.log(`Rango total: [${inicioTotal}, ${finTotal}] => "${texto.slice(inicioTotal, finTotal)}"`);
// 2. Coordenadas de grupos nombrados
console.log("\n--- 2. Coordenadas de Grupos Nombrados ---");
const { protocolo, host } = match.indices.groups;
console.log(`Protocolo indices: [${protocolo[0]}, ${protocolo[1]}] => "${texto.slice(protocolo[0], protocolo[1])}"`);
console.log(`Host indices: [${host[0]}, ${host[1]}] => "${texto.slice(host[0], host[1])}"`);
// 3. Verificación de soporte de bandera en el objeto RegExp
console.log("\n--- 3. Propiedad hasIndices ---");
console.log("¿RegExp tiene activa bandera /d?:", regexConIndices.hasIndices); // trueMini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección¿Qué estructura de datos contiene match.indices[1] cuando se ejecuta un RegExp con la bandera /d?
¿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.
🏛️ 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.