W3docs

JavaScript Regex (OR)

JavaScript regular expressions (RegEx) offer powerful capabilities for pattern matching within strings. One of the key components of RegEx is the OR operator,

Las expresiones regulares de JavaScript (RegEx) ofrecen capacidades potentes para la coincidencia de 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 habilita búsquedas y manipulaciones de cadenas versátiles y eficientes. En esta guía completa, exploraremos el uso del operador OR en RegEx de JavaScript, acompañado de ejemplos prácticos para mejorar tu comprensión.

Comprender el Operador OR (|) en RegEx

El operador OR en las expresiones regulares te permite especificar múltiples alternativas para una coincidencia. Es particularmente útil cuando necesitas hacer coincidir un patrón entre varios 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.


javascript— editable

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

Agrupación con Paréntesis

Los paréntesis () se utilizan para agrupar partes de una expresión regular (para más información sobre grupos, consulta Grupos de Captura). Esto es útil cuando necesitas aplicar el operador OR a múltiples caracteres o patrones.


javascript— editable

Aquí, el patrón /(cat|dog)s?/ coincide con "cat", "cats", "dog" y "dogs".

Ejemplos Prácticos

Coincidir con Diferentes Extensiones de Archivo

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


javascript— editable

En este ejemplo, el patrón /\.(jpg|png|gif)$/ coincide con nombres de archivo que terminan en ".jpg", ".png" o ".gif".

Validación de Números de Teléfono

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


javascript— editable

El patrón /(\+\d{1,2}\s?)?(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}/ coincide con varios formatos de números de teléfono, incluidos aquellos con códigos de país, paréntesis, guiones, puntos y espacios.

Coincidir con Subpatrones Opcionales

El operador OR también se puede utilizar para hacer coincidir subpatrones opcionales dentro de una cadena.


javascript— editable

Aquí, el patrón /color|colour/ coincide tanto con la ortografía estadounidense como con la británica de la palabra "color".

Combinar el Operador OR con Otros Metacaracteres

El poder del operador OR se potencia al combinarse 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


javascript— editable

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

Ejemplo Avanzado con Múltiples Condiciones


javascript— editable

En este ejemplo, el patrón /(\d{1,2}-\d{1,2}-\d{4})|(\d{4}-\d{1,2}-\d{1,2})/ coincide con fechas en los formatos "MM-DD-YYYY" y "YYYY-MM-DD".

Conclusión

Dominar el operador OR en las expresiones regulares de JavaScript abre un amplio abanico de posibilidades para la coincidencia de patrones 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 manejar búsquedas y manipulaciones de cadenas complejas.

Practice

Práctica

¿Cuál de las siguientes expresiones regulares utiliza correctamente el operador OR (|) para buscar las palabras 'cat' o 'dog'?