JavaScript Regex (OR)

Las expresiones regulares de JavaScript (RegEx) ofrecen capacidades potentes para encontrar patrones dentro de cadenas. Uno de los componentes clave de RegEx es el operador OR, representado por la barra vertical (|). Este operador permite incluir múltiples patrones dentro de una sola expresión regular, lo que posibilita búsquedas y manipulaciones de cadenas versátiles y eficientes. En esta guía completa, exploraremos el uso del operador OR en JavaScript RegEx, con ejemplos prácticos para mejorar tu comprensión.

Comprender el operador OR (|) en RegEx

El operador OR en expresiones regulares te permite especificar múltiples alternativas para una coincidencia. Es especialmente útil cuando necesitas hacer coincidir uno de entre varios patrones posibles.

Uso básico del operador OR

La sintaxis del operador OR es sencilla. Consiste en colocar el símbolo | entre los patrones que deseas hacer coincidir.

En este ejemplo, el patrón /cat|dog/ coincide tanto con "cat" como con "dog" en las cadenas dadas.

Precedencia de alternancia: por qué casi siempre necesitas paréntesis

Este es el mayor error con |. El operador OR tiene precedencia muy baja — más baja que cualquier otro operador de expresiones regulares. Esto significa que | divide la expresión completa en alternativas, hasta los delimitadores circundantes o los paréntesis más cercanos.

Por tanto, /cat|concatenate/ no significa "cat seguido opcionalmente de concatenate". Significa: hacer coincidir el patrón completo cat, O hacer coincidir el patrón completo concatenate. Del mismo modo, /^cat|dog$/ se interpreta como (^cat)|(dog$) — "comienza con cat" O "termina con dog" — lo cual rara vez es lo que se pretende.

Para limitar la alternancia a solo una parte de un patrón, envuelve las alternativas entre paréntesis.

Anclar todo con ^ y $ es un acompañamiento habitual de la alternancia agrupada — consulta Anchors: string start and end.

El orden importa: gana la primera coincidencia

El motor de expresiones regulares prueba las alternativas de izquierda a derecha y se detiene en la primera que tiene éxito en la posición actual. No busca la coincidencia más larga — solo la primera. Esto significa que el orden de tus alternativas es significativo.

Regla general: lista las alternativas más largas o más específicas antes que las más cortas con las que comparten un prefijo.

Agrupación con paréntesis

Los paréntesis () agrupan partes de una expresión regular para que los cuantificadores y otros operadores se apliquen al grupo completo, y también capturan el texto coincidente para uso posterior (consulta Capturing Groups). Esto es esencial cuando quieres que el OR cubra solo un fragmento de un patrón más amplio.

Aquí, el cuantificador s? se aplica al grupo completo (cat|dog), por lo que el patrón coincide con "cat", "cats", "dog" y "dogs". El cuantificador ? y similares se tratan en Quantifiers +, * and {n}.

Ejemplos prácticos

Hacer coincidir diferentes extensiones de archivo

Supongamos que necesitas validar nombres de archivo con diferentes extensiones como .jpg, .png o .gif.

En este ejemplo, el patrón /\.(jpg|png|gif)$/ coincide con nombres de archivo que terminan en ".jpg", ".png" o ".gif". El \. inicial coincide con un punto literal, el grupo (jpg|png|gif) es la alternancia, y $ ancla la coincidencia al final de la cadena.

Validar números de teléfono

Considera un escenario en el que necesitas validar diferentes formatos de números de teléfono.

Leyendo el patrón /(\+\d{1,2}\s?)?(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}/ parte por parte:

• (\+\d{1,2}\s?)? — un código de país opcional: un +, uno o dos dígitos y luego un espacio opcional. El ? final hace que todo el grupo sea opcional.
• (\(\d{3}\)|\d{3}) — la alternancia: tres dígitos entre paréntesis (123) o tres dígitos sin paréntesis 123. Observa que \( y \) son paréntesis literales, mientras que los () externos sin escapar realizan la agrupación.
• [-.\s]? — un separador opcional: un guion, un punto o espacio en blanco. (Estas son clases de caracteres.)
• \d{3} — tres dígitos.
• [-.\s]? — otro separador opcional.
• \d{4} — los cuatro dígitos finales.

Alternancia simple vs. subpatrones opcionales

Una confusión habitual es tratar color|colour como si la u fuera opcional. No lo es — esto es alternancia simple entre dos palabras completas.

Cuando las alternativas difieren solo en un carácter (o una secuencia corta), el enfoque idiomático y más eficiente es un subpatrón opcional con cuantificador, no la alternancia. El cuantificador ? hace que la u precedente sea opcional:

Usa la alternancia (|) cuando las opciones son cadenas genuinamente distintas (cat|dog); usa ? cuando una forma es la otra más un fragmento opcional (colou?r).

Combinar el operador OR con otros metacaracteres

El poder del operador OR se potencia al combinarlo con otros metacaracteres de expresiones regulares, como * (cero o más), + (uno o más), ? (cero o uno) y {} (exactamente n veces).

Ejemplo con cuantificadores

El patrón /\b(cat|dog)s?\b/ coincide con "cat", "cats", "dog" y "dogs" como palabras completas, usando el metacarácter de límite de palabra \b.

Ejemplo avanzado con múltiples condiciones

Los dos formatos de fecha a continuación — D-M-YYYY y YYYY-M-D — usan los mismos separadores y cantidades de dígitos, por lo que la expresión regular no puede distinguir el orden día-mes por su forma. Lo que sí puede distinguir es dónde se encuentra el año de cuatro dígitos: al final en un formato y al inicio en el otro.

Este patrón coincide con fechas tanto en formato día primero (12-31-2023, 31-12-2023) como año primero (2023-12-31). Ten en cuenta que 31-12-2023 sí coincide — es una cadena \d{1,2}-\d{1,2}-\d{4} perfectamente válida, por lo que la primera alternativa la acepta.

Un detalle sutil pero importante: dado que | tiene la precedencia más baja, el ^ se vincula solo a la primera alternativa y el $ solo a la segunda. Para anclar ambas alternativas, agrúpalas:

Usar la alternancia con match(), matchAll() y replace()

test() solo te indica si un patrón coincidió. Para extraer o transformar el texto coincidente, combina la alternancia con grupos de captura y los métodos de string match(), matchAll() y replace().

match() (sin el indicador g) devuelve la primera coincidencia junto con cada grupo capturado:

Con el indicador g, match() devuelve todas las coincidencias como un array, y matchAll() te da un iterador de objetos de coincidencia completos:

replace() te permite reescribir cada alternativa. Aquí normalizamos las ortografías británica y americana a una sola forma:

Conclusión

Dominar el operador OR en las expresiones regulares de JavaScript abre un amplio abanico de posibilidades para la búsqueda de patrones de forma eficiente y versátil. Al comprender cómo usar el operador OR en combinación con otras características de RegEx, puedes crear patrones potentes y flexibles para gestionar búsquedas y manipulaciones de cadenas complejas.

Práctica

Antes de responder, razona cada opción. Recuerda que todas las opciones a continuación son sintaxis de expresión regular válida — la pregunta es qué coincide realmente cada una:

• /cat|dog/ — alternancia simple usando |; coincide con "cat" o "dog" en cualquier parte de una cadena. Correcta.
• /(cat|dog)/ — la misma alternancia envuelta en un grupo de captura; el grupo no cambia lo que se hace coincidir, solo que la coincidencia se captura. Correcta.
• /cat|dogs/ — válida, pero la segunda alternativa es "dogs" (con una s), por lo que nunca coincide con la palabra simple "dog". Incorrecta para esta pregunta.
• /cat||dog/ — la alternativa vacía entre los dos símbolos | coincide con una cadena vacía, por lo que coincide con casi cualquier cosa, incluidas cadenas que no contienen ninguna de las dos palabras. Incorrecta.
• /(cat|dog)s/ — la s obligatoria después del grupo significa que esto coincide con "cats" o "dogs", no con "cat" o "dog". Incorrecta.
• /cat|do g/ — el espacio es un carácter literal, por lo que la segunda alternativa es "do g" (con un espacio), no "dog". Incorrecta.