Sintaxis de Expresiones Regulares en JavaScript
Aprende a crear expresiones regulares usando notación literal o el constructor RegExp, y descubre cuándo usar cada método según tus necesidades.
TL;DR - Resumen rápido
- Las expresiones regulares (regex) son patrones para buscar y manipular texto
- Puedes crear regex usando notación literal (/patron/) o constructor RegExp
- La notación literal es más eficiente para patrones estáticos
- El constructor RegExp es necesario para patrones dinámicos
- El constructor requiere doble backslash (\\) para secuencias de escape
- Ambos métodos crean objetos RegExp con las mismas funcionalidades
Introducción a las Expresiones Regulares
Las expresiones regulares, comúnmente llamadas regex o regexp, son patrones que describen conjuntos de cadenas de caracteres. En JavaScript, son una herramienta poderosa para validar, buscar y reemplazar texto de manera eficiente. JavaScript implementa las expresiones regulares como objetos del tipo RegExp, que puedes crear de dos formas distintas.
Las expresiones regulares son especialmente útiles cuando necesitas:
- Validar formatos como correos electrónicos, números de teléfono o fechas
- Buscar patrones complejos en textos grandes
- Reemplazar múltiples ocurrencias de un patrón
- Extraer información específica de cadenas de texto
- Filtrar datos basándote en patrones de caracteres
Historia de las expresiones regulares
Las expresiones regulares tienen su origen en la teoría de autómatas y lenguajes formales de los años 50. JavaScript las incorporó inspirándose en Perl, por lo que comparten mucha sintaxis con otros lenguajes como Python, Java y C#.
Notación Literal
La notación literal es la forma más común y eficiente de crear expresiones regulares en JavaScript. Consiste en encerrar el patrón entre barras inclinadas (/patron/), opcionalmente seguidas de flags que modifican el comportamiento de la búsqueda. Esta sintaxis es más concisa y tiene mejor rendimiento porque el motor de JavaScript puede compilar el patrón una sola vez durante el análisis del código.
Sintaxis Básica Literal
La estructura básica de una expresión regular literal incluye el patrón entre barras y opcionalmente uno o más flags después de la segunda barra.
El ejemplo muestra cómo crear un patrón simple que busca la palabra "hola" en una cadena. El método test() devuelve true si encuentra una coincidencia. Este es el uso más básico de una expresión regular literal.
Usando Flags en Notación Literal
Los flags modifican el comportamiento de la expresión regular. Los más comunes son 'i' para ignorar mayúsculas/minúsculas, 'g' para búsqueda global (todas las ocurrencias), y 'm' para modo multilínea.
Con el flag 'i', la búsqueda ignora si las letras están en mayúsculas o minúsculas. Sin este flag, "Hola" y "hola" serían patrones diferentes. Los flags se pueden combinar en cualquier orden, como 'gi' para búsqueda global sin distinguir mayúsculas.
Flags disponibles en JavaScript
Los flags principales son: g (global), i(insensitive), m (multiline), s (dotAll),u (unicode) y y (sticky). Puedes combinarlos según necesites, por ejemplo /patron/gim.
Constructor RegExp
El constructor RegExp te permite crear expresiones regulares dinámicamente usando cadenas de texto. Esto es especialmente útil cuando el patrón proviene de una variable, entrada del usuario o necesita construirse en tiempo de ejecución. A diferencia de la notación literal, el constructor RegExp compila el patrón cada vez que se ejecuta, lo que puede afectar el rendimiento si se usa en bucles.
Sintaxis Básica del Constructor
El constructor RegExp acepta dos parámetros: el patrón como cadena y opcionalmente los flags como una segunda cadena.
El constructor crea el mismo objeto RegExp que la notación literal, pero usando cadenas de texto. Esto permite construir patrones dinámicamente concatenando variables o generando el patrón basándote en condiciones.
Patrones Dinámicos con Variables
La verdadera ventaja del constructor RegExp es la capacidad de crear patrones que cambian según el contexto, como cuando el usuario ingresa el término de búsqueda.
Este ejemplo muestra cómo crear un patrón basado en la entrada del usuario. La función crea una expresión regular dinámica que busca el término en cualquier parte del texto, ignorando mayúsculas y minúsculas. Esto sería imposible con notación literal estática.
Advertencia: Caracteres especiales en patrones dinámicos
Cuando usas variables en patrones regex, debes escapar caracteres especiales como ., *, +, ?,^, $, |, \, (,), [, ], {, }. Usa new RegExp(variable.replace(/[.*+?^$()|[\]\\]/g, '\\$&'))para escaparlos automáticamente.
Diferencias y Cuándo Usar Cada Uno
Tanto la notación literal como el constructor RegExp crean objetos con la misma funcionalidad, pero tienen diferencias importantes en rendimiento, flexibilidad y casos de uso ideales.
Comparación de Rendimiento
La notación literal es compilada una vez durante el análisis del código, mientras que el constructor RegExp compila el patrón cada vez que se ejecuta. Esto tiene implicaciones importantes en bucles o funciones que se llaman frecuentemente.
El ejemplo muestra que la notación literal dentro del bucle es más eficiente porque JavaScript compila el patrón una sola vez. El constructor RegExp dentro del bucle compila el patrón en cada iteración, lo que es innecesario cuando el patrón no cambia.
Mejor práctica para bucles
Si el patrón no cambia, crea la expresión regular fuera del bucle usando notación literal. Si necesitas el constructor, crea el RegExp una vez antes del bucle y reutiliza la variable.
Casos de Uso Recomendados
Elige el método según la naturaleza de tu patrón y si necesita ser dinámico.
Este ejemplo muestra ambos enfoques: validación de email con patrón estático (ideal para notación literal) y búsqueda dinámica basada en entrada del usuario (requiere constructor RegExp). Cada caso usa el método más apropiado.
Casos Especiales
Al trabajar con expresiones regulares, hay casos especiales que debes conocer para evitar errores comunes. El escapado de caracteres, el manejo de barras y la reutilización de regex requieren atención especial según uses notación literal o constructor.
Este ejemplo muestra casos especiales importantes. La notación literal requiere un solo backslash (\d), mientras que el constructor requiere doble backslash (\\d) porque los strings en JavaScript también procesan escapes. Las barras (/) deben escaparse en literal (\/) pero no en constructor. Puedes crear una regex vacía que coincide con cualquier string. Los flags inválidos lanzan SyntaxError en literal (tiempo de análisis) pero también en constructor (tiempo de ejecución). El constructor acepta otra RegExp como patrón, útil para copiar o modificar flags. Siempre escapa caracteres especiales cuando uses input del usuario para evitar patrones inválidos o búsquedas incorrectas. El flag 'u' es importante para manejar Unicode correctamente.
Escapado de Caracteres Especiales
Cuando construyes regex dinámicamente con input del usuario, SIEMPRE escapa caracteres especiales usando str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'). De lo contrario, caracteres como . o * serán interpretados como metacaracteres, causando comportamiento inesperado.
Resumen: Sintaxis de Expresiones Regulares
Conceptos principales:
- •Las expresiones regulares son patrones para buscar y manipular texto
- •JavaScript ofrece dos formas de crear regex: notación literal y constructor
- •La notación literal usa barras: /patron/flags
- •El constructor RegExp usa cadenas: new RegExp('patron', 'flags')
- •El constructor requiere doble backslash (\\) para secuencias de escape
- •Ambos métodos crean objetos RegExp con las mismas funcionalidades
Mejores prácticas:
- •Usa notación literal para patrones estáticos por mejor rendimiento
- •Usa constructor RegExp solo cuando necesites patrones dinámicos
- •Crea la expresión regular fuera de bucles para evitar compilación repetida
- •Escapa caracteres especiales en patrones dinámicos con input del usuario
- •Las barras (/) se escapan en literal (\/), no en constructor
- •Combina flags según necesites: gi, im, gim, etc.