5. Cuantificadores: Codiciosos (Greedy) vs Perezosos (Lazy)
Controla repeticiones con *, +, ?, {n,m}. Domina el comportamiento codicioso por defecto y cómo volverlo perezoso con ?.
¿Qué son los Cuantificadores?
Los cuantificadores especifican cuántas veces consecutivas debe repetirse el carácter, clase o grupo inmediatamente anterior para que se considere una coincidencia válida.
| Cuantificador | Rango de Repeticiones | Ejemplo | Coincide con |
|---|---|---|---|
* (Asterisco) |
0 o más veces (opcional e ilimitado) | /ab*c/ |
"ac", "abc", "abbc", "abbbbc" |
+ (Más) |
1 o más veces (obligatorio al menos una) | /ab+c/ |
"abc", "abbc" (no coincide con "ac") |
? (Interrogación) |
0 o 1 vez (opcional estricto) | /https?/ |
"http" y "https" |
{n} |
Exactamente n veces |
/\d{4}/ |
Años como "2026" |
{min,max} |
Entre min y max veces |
/[a-z]{3,8}/ |
Palabras de 3 a 8 letras |
Comportamiento Codicioso (Greedy) vs Perezoso (Lazy)
Por defecto, los cuantificadores en JavaScript son codiciosos (greedy): devoran la mayor cantidad posible de texto hasta el último carácter de la cadena antes de retroceder (backtracking).
Para transformar un cuantificador codicioso en perezoso o reacio (lazy), añade un signo de interrogación ? inmediatamente después del cuantificador (*?, +?, {min,max}?). Esto instruye al motor a detenerse en la primera oportunidad posible.
⚡ Diferencias entre Cuantificadores Codiciosos y Perezosos
Extracción de etiquetas HTML y atributos entre comillas demostrando por qué el cuantificador codicioso falla y cómo el perezoso resuelve el problema.
const fragmentoHtml = '<button class="btn btn-primary">Guardar</button> <span class="badge">Nuevo</span>';
// 1. Enfoque Codicioso (Greedy): Devora desde el primer '<' hasta el ÚLTIMO '>'
const regexCodiciosa = /<.*>/g;
const resultadoCodicioso = fragmentoHtml.match(regexCodiciosa);
console.log("--- 1. Cuantificador Codicioso: /<.*>/g ---");
console.log("Coincidencias devoradas (1 solo elemento gigante):");
console.log(resultadoCodicioso);
// 2. Enfoque Perezoso (Lazy): Se detiene en cuanto encuentra el primer '>'
const regexPerezosa = /<.*?>/g;
const resultadoPerezoso = fragmentoHtml.match(regexPerezosa);
console.log("\n--- 2. Cuantificador Perezoso: /<.*?>/g ---");
console.log("Coincidencias individuales extraídas con éxito:");
console.log(resultadoPerezoso);
// 3. Extracción de textos entre comillas dobles
const lineaConfig = 'servidor="ovh-cloud-01" puerto="8080" entorno="produccion"';
const valoresLazy = lineaConfig.match(/"(.*?)"/g);
console.log("\n--- 3. Valores entre comillas con \".*?\" ---");
console.log(valoresLazy);Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lecciónDada la cadena "123456789", ¿qué coincidencia devolverá "123456789".match(/\d{2,5}?/)?
¿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.