Patrones y Banderas de Expresiones Regulares en JavaScript

Introducción a los Patrones y Banderas en JavaScript

Las expresiones regulares (regex) son herramientas esenciales en JavaScript para la búsqueda de patrones y la validación de datos. Una regex se compone de dos partes: un patrón (qué buscar) y banderas opcionales (cómo buscar). Esta guía cubre cómo crear una regex, cada token de patrón y bandera, y los métodos de string/regex que los ponen en funcionamiento. Para una visión más general, consulta el capítulo JavaScript RegExp.

Creación de una Expresión Regular

JavaScript ofrece dos formas de construir una expresión regular.

1. Literal de regex — escrita entre barras diagonales, con banderas después de la barra de cierre. El motor la compila una sola vez cuando se carga el script, por lo que es la forma más rápida y común:

2. Constructor new RegExp() — recibe el patrón como un string y las banderas como segundo argumento string. Úsalo cuando el patrón se construye en tiempo de ejecución (por ejemplo, a partir de la entrada del usuario), ya que un literal no puede contener variables.

Lista de Patrones Comunes

Aquí hay algunos patrones de uso frecuente:

• \w: Coincide con cualquier carácter de palabra (alfanumérico más guion bajo). Equivalente a [a-zA-Z0-9_].
• \W: Coincide con cualquier carácter que no sea de palabra. Equivalente a [^a-zA-Z0-9_].
• \d: Coincide con cualquier dígito. Equivalente a [0-9].
• \D: Coincide con cualquier carácter que no sea un dígito. Equivalente a [^0-9].
• \s: Coincide con cualquier carácter de espacio en blanco (espacios, tabulaciones, saltos de línea).
• \S: Coincide con cualquier carácter que no sea espacio en blanco. Equivalente a [^\s].
• .: Coincide con cualquier carácter excepto el salto de línea (\n).
• ^: Establece la posición al inicio de una línea.
• $: Establece la posición al final de una línea.
• \b: Coincide con un límite de palabra (posición entre un carácter de palabra y uno que no lo es).
• \B: Coincide con una posición que no es un límite de palabra.
• \t: Coincide con un carácter de tabulación.
• \n: Coincide con un carácter de nueva línea.
• \r: Coincide con un retorno de carro.
• \\: Coincide con una barra invertida literal.
• \f: Coincide con un carácter de avance de página.
• \v: Coincide con una tabulación vertical.
• [abc]: Coincide con cualquier carácter único dentro de los corchetes.
• [^abc]: Coincide con cualquier carácter único que no esté dentro de los corchetes.
• a|b: Coincide con a o con b.
• (abc): Coincide con la secuencia exacta abc.
• a?: Coincide con a cero o una vez.
• a*: Coincide con a cero o más veces.
• a+: Coincide con a una o más veces.
• a{3}: Coincide exactamente con 3 ocurrencias de a.
• a{3,}: Coincide con 3 o más ocurrencias de a.
• a{3,5}: Coincide con 3 a 5 ocurrencias de a.
• (?i): No compatible con JavaScript. Usa la bandera i en su lugar.
• (?:...): Grupo no capturador.
• (?=...): Aserción de anticipación positiva.
• (?!...): Aserción de anticipación negativa.
• (?<=...): Aserción de retrospección positiva.
• (?<!...): Aserción de retrospección negativa.

Comprensión de los Patrones

El patrón de regex se encierra entre barras diagonales (/patrón/banderas).

Ejemplo: /H.llo/g

• Patrón: H.llo coincide con cualquier string que comience con 'H', seguido de cualquier carácter único (.), y que termine con 'llo'.
• Bandera: g indica búsqueda global.
• Cuantificador: . coincide exactamente con un carácter.

Los patrones en las expresiones regulares se usan para definir el string que estás buscando. Estos patrones pueden incluir varios caracteres, clases de caracteres y símbolos especiales.

Veamos ahora algunos ejemplos:

Ejemplo 1:

1. Patrón: \d+ coincide con uno o más dígitos (\d+).
2. Bandera: g indica una búsqueda global.
3. Cuantificador: + coincide con una o más ocurrencias del elemento precedente (\d).

Ejemplo 2:

1. Patrón: \D+ coincide con uno o más caracteres que no son dígitos (\D+).
2. Bandera: g indica una búsqueda global.
3. Cuantificador: + coincide con una o más ocurrencias del elemento precedente (\D).

Cuantificadores

Los cuantificadores definen cuántas instancias de un carácter, grupo o clase de caracteres deben estar presentes en la entrada para que se encuentre una coincidencia. Aquí hay algunos cuantificadores de uso frecuente con ejemplos:

• + - Coincide con una o más ocurrencias del elemento precedente.

Este patrón coincide con secuencias de uno o más dígitos.

• * - Coincide con cero o más ocurrencias del elemento precedente.

Este patrón coincide con secuencias de cero o más caracteres de palabra.

• ? - Coincide con cero o una ocurrencia del elemento precedente.

Este patrón coincide con 'color' o 'colour'.

• {n} - Coincide exactamente con n ocurrencias del elemento precedente.

Este patrón coincide exactamente con tres dígitos.

• {n,} - Coincide con n o más ocurrencias del elemento precedente.

Este patrón coincide con secuencias de dos o más dígitos.

• {n,m} - Coincide con entre n y m ocurrencias del elemento precedente.

Este patrón coincide con secuencias de dos a tres dígitos.

Banderas

Las banderas son parámetros opcionales que cambian cómo se aplica el patrón. Puedes combinarlas en cualquier orden (por ejemplo /abc/gi). Aquí está la lista completa:

Bandera	Nombre	Efecto
g	Global	Encuentra todas las coincidencias, no solo la primera.
i	Ignorar mayúsculas	Coincide independientemente de mayúsculas/minúsculas.
m	Multilínea	^ y $ coinciden con el inicio/fin de cada línea.
s	DotAll	. también coincide con caracteres de nueva línea.
u	Unicode	Trata el patrón como puntos de código Unicode; habilita \u{...} y \p{...}.
y	Sticky	Coincide solo en la posición exacta de lastIndex.
d	Índices	Añade indices (posiciones de inicio/fin) a los resultados de coincidencia.

Las secciones a continuación demuestran cada bandera en orden:

• g - Búsqueda global.

Esta bandera permite encontrar todas las coincidencias en el string.

• i - Búsqueda sin distinción entre mayúsculas y minúsculas.

Esta bandera hace que la búsqueda no distinga entre mayúsculas y minúsculas.

• m - Búsqueda multilínea.

Esta bandera permite que ^ y $ coincidan con el inicio y el final de cada línea del string.

• s - Permite que . coincida con caracteres de nueva línea (también conocida como bandera dotAll).

Esta bandera permite que el punto . también coincida con caracteres de nueva línea.

• u - "Unicode"; trata el patrón como una secuencia de puntos de código Unicode.

Esta bandera habilita la coincidencia completa de Unicode.

• y - "Sticky"; coincide solo desde el índice indicado por la propiedad lastIndex de esta expresión regular en el string objetivo.

Esta bandera permite que la búsqueda comience en un índice específico del string. La bandera sticky es útil para tokenizadores y analizadores sintácticos que recorren un string posición por posición — consulta Bandera sticky "y", búsqueda en posición para un análisis más detallado.

Probar Patrones: regexp.test()

El método test() verifica si un patrón existe dentro de un string, devolviendo true o false.

Este código comprueba la presencia de "world" en el string.

Reemplazar Texto: str.replace()

La función replace() te permite modificar strings reemplazando partes de ellos con nuevo texto.

Este código reemplaza "morning" con "evening".

Reemplazar Todo: str.replaceAll()

El método replaceAll() reemplaza todas las ocurrencias de un patrón con un nuevo string.

Este código reemplaza cada "a" con "o".

Dividir Texto: str.split()

El método split() divide un string en un array de subcadenas basándose en un patrón.

Este código divide el string en cada coma.

Buscar en Texto: str.match()

El método match() recupera las coincidencias de un patrón dentro de un string, útil para extraer datos específicos.

Este código encuentra todos los números en el texto.

Recorrer Coincidencias: regexp.exec()

El método exec() devuelve una coincidencia a la vez. Con la bandera g (o y), la regex recuerda su posición en lastIndex, de modo que llamar a exec() en un bucle recorre cada coincidencia — y a diferencia de match() con g, cada resultado incluye el índice de la coincidencia y los grupos de captura.

Iterar Coincidencias: str.matchAll()

matchAll() es la alternativa moderna y más limpia a un bucle exec(). Devuelve un iterador de objetos de coincidencia completos (incluyendo grupos de captura) y requiere la bandera g.

Grupos de Captura

Los paréntesis (...) crean un grupo de captura, exponiendo parte de una coincidencia para su reutilización. Los grupos también pueden tener nombre con (?<nombre>...) y leerse desde el object .groups — mucho más legible que los índices numéricos.

Sintaxis de Regex en JavaScript

Las expresiones regulares usan caracteres especiales para definir patrones. Aquí hay un ejemplo detallado que utiliza múltiples elementos de la sintaxis de regex:

Este patrón de regex descompone una URL en sus componentes:

• ^(\w+): Coincide con cualquier carácter de palabra (equivalente a [a-zA-Z0-9_]) al inicio, representando el protocolo.
• :\/\/: Coincide literalmente con "://".
• ([\w.-]+): Coincide con uno o más caracteres de palabra, puntos o guiones, representando el dominio.
• \/(\S*)$: Coincide con una barra diagonal seguida de cualquier carácter que no sea espacio en blanco hasta el final, representando la ruta.

Más Detalles:

Este código JavaScript verifica si una dirección web se ajusta a un patrón detallado.

• Configuración del patrón: El patrón está estructurado para capturar diferentes componentes de una dirección web: el protocolo (como "https"), el nombre de dominio (como "www.w3docs.com") y la ruta (todo lo que sigue al dominio).
• Prueba de la dirección web: El código prueba "https://www.w3docs.com/pathname/?search=test" contra este patrón.
• Muestra del resultado: Si la dirección web coincide, el código muestra las partes que corresponden al patrón.

Resultado Esperado: La salida es un array con los siguientes elementos:

1. La dirección web completa: "https://www.w3docs.com/pathname/?search=test".
2. El protocolo utilizado: "https".
3. El nombre de dominio: "www.w3docs.com".
4. La ruta y la cadena de consulta: "pathname/?search=test".

Aplicaciones Prácticas de Patrones y Banderas

Las regex se usan en diversos escenarios para mejorar las aplicaciones JavaScript:

Validación de Entradas del Usuario

Las regex ayudan a garantizar que las entradas del usuario cumplan ciertos criterios, lo que es crucial para la calidad y seguridad de los datos.

Este código comprueba si el nombre de usuario consta de 3 a 16 caracteres alfanuméricos o guiones bajos.

Extracción de Información

Las regex pueden extraer información específica de textos o conjuntos de datos extensos de manera eficiente.

Este código JavaScript extrae un dato específico de un string de texto.

• Definición del texto: El código comienza con un string llamado data que contiene detalles sobre un pedido, incluyendo un ID de pedido y una fecha.
• Configuración del patrón: Usa un patrón (idPattern) para buscar la frase "Order ID:" seguida de una serie de dígitos. Este patrón está diseñado para capturar la parte numérica justo después de "Order ID:".
• Extracción del ID del pedido: El código busca en el string data una coincidencia con idPattern. Cuando encuentra una, recupera solo la parte de los dígitos (ignorando el texto "Order ID:"), que representa el ID del pedido.
• Visualización del resultado: Luego imprime este ID de pedido en la consola.

Conclusión

Dominar los patrones y banderas de regex en JavaScript es fundamental para gestionar eficazmente la manipulación de texto, la validación de datos y las operaciones de búsqueda. Estas herramientas hacen que tus aplicaciones JavaScript sean más robustas, eficientes y fáciles de usar. Para profundizar, continúa con clases de caracteres, anclas, cuantificadores y grupos de captura.

Práctica