Dev Tools

Sintaxis de Regex: Guía Completa de Expresiones Regulares en JavaScript

Introducción: Por Qué Merece la Pena Aprender Regex

Las expresiones regulares parecen intimidantes — una densa sucesión de barras, corchetes y barras invertidas — pero son una de las habilidades de mayor rendimiento que un desarrollador puede construir. Un único patrón bien formado puede reemplazar docenas de líneas de código que recorren cadenas, validar entradas de usuario, extraer campos de una línea de log o reescribir texto en una sola pasada. Esta guía construye regex de JavaScript desde los principios básicos, con patrones que puedes pegar directamente en nuestro Probador de Regex para verlos funcionar.

Todo aquí usa la variante de JavaScript (ECMAScript), el motor de todos los navegadores y de Node.js. Si solo has copiado regex de foros, este artículo convertirá esa adivinanza en comprensión.

Los Bloques Básicos: Literales y Metacaracteres

En su forma más simple, una regex coincide con texto literal. El patrón cat coincide con la subcadena "cat" donde aparezca. Lo que hace potente a regex son los metacaracteres — símbolos con significado especial. El punto . coincide con cualquier carácter salvo un salto de línea. Los caracteres ^ y $ anclan al inicio y fin de la entrada. Para coincidir con un metacarácter literal, escápalo con una barra invertida: \. coincide con un punto real, \$ con un dólar real.

Olvidar escapar es el error de principiante más común. El patrón 3.14 no solo coincide con "3.14" — el punto sin escapar también coincide con "3x14" o "3914". Escribe 3\.14 cuando quieras decir un punto literal.

Clases de Caracteres

Los corchetes definen un conjunto de caracteres, cualquiera de los cuales puede coincidir. [aeiou] coincide con una vocal. Los rangos lo acortan: [a-z] coincide con cualquier minúscula, [0-9] con cualquier dígito, [A-Za-z0-9_] con un carácter de identificador típico. Un acento circunflejo al inicio niega el conjunto: [^0-9] coincide con cualquier carácter que no sea un dígito.

Las clases comunes tienen escapes abreviados: \d para un dígito, \w para un carácter de palabra (letras, dígitos, guion bajo) y \s para espacio en blanco. Sus formas en mayúscula los niegan, así que \D es cualquier no-dígito. Estos atajos mantienen legibles los patrones: \d{4}-\d{2}-\d{2} describe una fecha ISO mucho más claramente que detallar cada rango.

Cuantificadores: Cuántas Veces

Los cuantificadores controlan la repetición. * significa cero o más, + uno o más y ? cero o uno (opcional). Las llaves dan recuentos exactos: {3} exactamente tres, {2,5} entre dos y cinco, y {2,} dos o más.

Por defecto los cuantificadores son codiciosos: consumen todo lo posible y luego retroceden si el resto del patrón falla. Añadir ? los hace perezosos, coincidiendo con lo mínimo posible. La diferencia es drástica. Contra el texto <a><b>, el codicioso <.*> coincide con toda la cadena en una coincidencia, mientras que el perezoso <.*?> coincide con cada etiqueta por separado. Pega ambos en el Probador de Regex y observa cómo cambia el resaltado — es la forma más rápida de interiorizar el concepto.

Grupos y Capturas

Los paréntesis agrupan parte de un patrón y, por defecto, capturan lo que coinciden. En (\d{4})-(\d{2}), el grupo 1 captura el año y el grupo 2 el mes. Referencias las capturas en los reemplazos como $1 y $2. Los grupos con nombre lo hacen autodocumentado: (?<year>\d{4})-(?<month>\d{2}) te permite referirte a $<year> en lugar de a un número.

Cuando solo necesitas agrupar — para un cuantificador o alternancia — pero no quieres un número de captura, usa un grupo sin captura (?:…). Por ejemplo, (?:ab)+ coincide con una o más secuencias "ab" sin crear un grupo numerado. Esto mantiene limpia tu numeración de capturas en patrones complejos.

Alternancia

La barra vertical | significa "o". El patrón cat|dog|bird coincide con cualquiera de las tres palabras. Combínala con grupos para acotar la alternancia: gr(a|e)y coincide con "gray" y "grey". Cuidado con la precedencia — la alternancia tiene prioridad muy baja, así que ^cat|dog$ significa "empieza con cat" o "termina con dog", no "cat o dog en su propia línea". Envuelve con un grupo ante la duda: ^(cat|dog)$.

Anclas y Límites

Las anclas coinciden con posiciones, no con caracteres. ^ es el inicio de la cadena (o línea, con el flag m), $ el final. El límite de palabra \b coincide con la posición entre un carácter de palabra y uno que no lo es, lo que es valiosísimo para coincidir con palabras completas. \bcat\b coincide con "cat" en "the cat sat" pero no en "category". Su negación \B coincide con posiciones que no son límites de palabra.

Lookaround: Coincidir Sin Consumir

El lookahead y el lookbehind afirman que algo aparece o no, sin incluirlo en la coincidencia. Un lookahead positivo (?=…) exige lo que sigue; uno negativo (?!…) lo prohíbe. Por ejemplo, \d+(?= dollars) coincide con el número en "50 dollars" pero no con la palabra. El lookbehind funciona igual a la inversa: (?<=\$)\d+ coincide con los dígitos de "$50" sin capturar el dólar. Los motores modernos de JavaScript admiten ambos, lo que puedes confirmar en vivo en el Probador de Regex.

Los Flags Que Lo Cambian Todo

Los flags modifican cómo se comporta todo el patrón. El flag global g encuentra todas las coincidencias en lugar de la primera. El flag de ignorar mayúsculas i hace la coincidencia insensible a mayúsculas. El flag multilínea m hace que las anclas coincidan por línea. El flag dotall s permite que el punto coincida con saltos de línea. El flag unicode u habilita el manejo completo de puntos de código y escapes de propiedad como \p{L}. El flag sticky y ancla cada coincidencia al final de la anterior, en lo que se apoyan los tokenizadores. Alternarlos uno a uno en el probador es la forma más clara de sentir su efecto.

Sustitución: Buscar y Reemplazar con Potencia

Regex brilla en buscar y reemplazar. En JavaScript, str.replace(/(\w+)@(\w+)/g, '$2 en $1') intercambia las dos mitades de una dirección simple. Las cadenas de reemplazo entienden $1 para grupos numerados, $<nombre> para grupos con nombre, $& para toda la coincidencia y $$ para un dólar literal. El panel de Sustitución del Probador de Regex previsualiza exactamente cómo se expanden estos tokens, para que afines una transformación antes de llevarla al código.

Errores Comunes y Cómo Evitarlos

  • Retroceso catastrófico. Los cuantificadores anidados como (a+)+$ pueden tardar un tiempo exponencial en ciertas entradas, congelando tu programa. Prefiere patrones específicos y evita la repetición solapada.
  • Reutilizar un regex global. Un objeto /g arrastra su lastIndex entre llamadas. Reutilizar el mismo objeto en iteraciones puede saltar coincidencias. Crea un regex nuevo o reinicia lastIndex.
  • Validar formatos complejos con un patrón. El correo y el HTML son famosamente difíciles de validar por completo con regex. Usa un patrón para una comprobación rápida de forma y luego verifica semánticamente.
  • Asumir que el punto coincide con saltos de línea. No lo hace sin el flag s, lo que complica el análisis multilínea.
  • Caracteres especiales sin escapar. Puntos, signos más y paréntesis en tu texto literal deben escaparse o cambian el significado del patrón.

Cuándo No Usar Regex

Las expresiones regulares coinciden con patrones planos y léxicos de forma brillante, pero no pueden analizar estructuras anidadas arbitrariamente. Los paréntesis equilibrados, los documentos HTML completos y JSON no son lenguajes regulares — necesitan un analizador real. Si te encuentras escribiendo un patrón monstruoso para manejar anidamiento, detente y usa la herramienta adecuada: un analizador JSON, un analizador HTML o una gramática propia. Conocer este límite es en sí una marca de fluidez en regex.

Ejemplos Prácticos Que Puedes Probar Ahora

La teoría se fija cuando la aplicas. Aquí tienes cinco pequeños problemas con patrones para pegar en el Probador de Regex, cada uno demostrando un concepto de los anteriores.

1. Extraer cada hashtag de una publicación. Patrón: #\w+ con el flag g. Contra "Me encanta #regex y #javascript hoy" resalta "#regex" y "#javascript". Añade el flag i si quieres etiquetas insensibles a mayúsculas.

2. Sacar el año, mes y día de fechas ISO. Patrón: (?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2}). Las columnas de grupos con nombre en la tabla de coincidencias muestran cada componente por separado, mucho más claro que contar grupos posicionales.

3. Coincidir con un precio pero no con la palabra de moneda. Patrón: \d+(?:\.\d{2})?(?= USD). El lookahead exige que siga " USD" sin incluirlo en la coincidencia, así "49.99 USD" devuelve solo "49.99".

4. Encontrar palabras duplicadas. Patrón: \b(\w+)\s+\1\b con los flags i y g. La referencia \1 coincide con el mismo texto que capturó el primer grupo, detectando "el el" en una frase — una ayuda clásica de corrección.

5. Normalizar espacios en blanco. En el panel de Sustitución, pon el patrón \s+ con el flag g y el reemplazo a un solo espacio. Cualquier sucesión de espacios, tabuladores o saltos de línea se colapsa en uno, un paso de limpieza común antes de seguir procesando.

Cada uno de estos es intencionadamente pequeño. Los patrones reales crecen componiendo exactamente estas piezas — clases de caracteres, cuantificadores, grupos, anclas y lookaround — una restricción a la vez, verificando en cada paso.

Poniéndolo Todo Junto

La forma más rápida de aprender regex es experimentar con respuesta inmediata. Toma cualquier patrón de esta guía, pégalo en el Probador de Regex y edítalo carácter a carácter mientras observas cómo responden los resaltados y la tabla de grupos de captura. En una tarde, la densa sintaxis deja de parecer ruido y empieza a leerse como el lenguaje preciso y potente que es. Combínalo con nuestro Formateador JSON cuando extraigas datos estructurados, y tendrás un conjunto de herramientas completo, privado y en el navegador para manejar texto.

← Volver al Blog