Patrones y flags de JavaScript
Introducción a los patrones y flags de JavaScript
Las expresiones regulares (regex) son herramientas esenciales en JavaScript para la búsqueda de patrones y la validación de datos. Esta guía completa profundiza en tu comprensión de los patrones y flags de regex, mejorando tus habilidades en JavaScript.
Lista de patrones comunes
Aquí tienes algunos patrones de uso común:
\w: Coincide con cualquier carácter de palabra (carácter alfanumérico más guion bajo). Equivale a[a-zA-Z0-9_].\W: Coincide con cualquier carácter que no sea de palabra. Equivale a[^a-zA-Z0-9_].\d: Coincide con cualquier carácter numérico. Equivale a[0-9].\D: Coincide con cualquier carácter que no sea numérico. Equivale 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. Equivale a[^\s]..: Coincide con cualquier carácter excepto el salto de línea (\n).^: Afirma la posición al inicio de una línea.$: Afirma 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 un carácter que no es de palabra).\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 salto de línea.\r: Coincide con un carácter de retorno de carro.\\: Coincide con una barra invertida literal.\f: Coincide con un carácter de salto de página.\v: Coincide con un carácter de tabulación vertical.[abc]: Coincide con cualquier carácter individual dentro de los corchetes.[^abc]: Coincide con cualquier carácter individual que no esté dentro de los corchetes.a|b: Coincide con a o b.(abc): Coincide con la secuencia exacta abc.a?: Coincide cero o una vez.a*: Coincide cero o más veces.a+: Coincide una o más veces.a{3}: Coincide exactamente 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 es compatible en JavaScript. Usa en su lugar el flagi.(?:...): Grupo no capturador.(?=...): Aserción de anticipación positiva.(?!...): Aserción de anticipación negativa.(?<=...): Aserción de retroceso positiva.(?<!...): Aserción de retroceso negativa.
Entendiendo los patrones
El patrón de regex se encierra entre barras (/pattern/flags).
Ejemplo: /H.llo/g
- Patrón:
H.llocoincide con cualquier cadena que empiece con 'H', seguida de cualquier carácter individual (.), y termine con 'llo'. - Flag:
gindica búsqueda global. - Cuantificador:
.coincide exactamente con un carácter.
Los patrones en las expresiones regulares se usan para definir la cadena que estás buscando. Estos patrones pueden incluir varios caracteres, clases de caracteres y símbolos especiales.
Ahora veamos algunos ejemplos:
Ejemplo 1:
- Patrón:
\d+coincide con uno o más caracteres numéricos (\d+). - Flag:
gindica una búsqueda global. - Cuantificador:
+coincide con una o más ocurrencias del elemento anterior (\d).
Ejemplo 2:
- Patrón:
\D+coincide con uno o más caracteres que no son numéricos (\D+). - Flag:
gindica una búsqueda global. - Cuantificador:
+coincide con una o más ocurrencias del elemento anterior (\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í tienes algunos cuantificadores de uso común con ejemplos:
+- Coincide con una o más ocurrencias del elemento anterior.
Este patrón coincide con secuencias de uno o más dígitos.
*- Coincide con cero o más ocurrencias del elemento anterior.
Este patrón coincide con secuencias de cero o más caracteres de palabra.
?- Coincide con cero o una ocurrencia del elemento anterior.
Este patrón coincide con 'color' o 'colour'.
{n}- Coincide exactamente con n ocurrencias del elemento anterior.
Este patrón coincide exactamente con tres dígitos.
{n,}- Coincide con n o más ocurrencias del elemento anterior.
Este patrón coincide con secuencias de dos o más dígitos.
{n,m}- Coincide entre n y m ocurrencias del elemento anterior.
Este patrón coincide con secuencias de dos a tres dígitos.
Flags
Los flags son parámetros opcionales que permiten búsquedas globales, búsquedas sin distinción entre mayúsculas y minúsculas, y más. Aquí tienes algunos flags de uso común con ejemplos:
g- Búsqueda global.
Este flag permite encontrar todas las coincidencias en la cadena.
i- Búsqueda sin distinción entre mayúsculas y minúsculas.
Este flag hace que la búsqueda no distinga entre mayúsculas y minúsculas.
m- Búsqueda multilínea.
Este flag permite que ^ y $ coincidan con el inicio y el final de cada línea en la cadena.
s- Permite que.coincida con caracteres de salto de línea (también conocido como el flag dotAll).
Este flag permite que el punto . también coincida con caracteres de salto de línea.
u- "Unicode"; trata el patrón como una secuencia de puntos de código Unicode.
Este flag habilita la coincidencia completa de Unicode.
y- "Sticky"; coincide solo desde el índice indicado por la propiedad lastIndex de esta expresión regular en la cadena de destino.
Este flag permite que la búsqueda comience en un índice específico de la cadena.
Probar patrones: regexp.test()
El método test() verifica si un patrón existe dentro de una cadena, devolviendo true o false.
Este código comprueba la presencia de "world" en la cadena.
Reemplazar texto: str.replace()
La función replace() te permite modificar cadenas reemplazando partes de ellas por texto nuevo.
Este código reemplaza "morning" por "evening".
Reemplazar todo: str.replaceAll()
El método replaceAll() reemplaza todas las ocurrencias de un patrón por una nueva cadena.
Este código reemplaza cada "a" por "o".
Dividir texto: str.split()
El método split() divide una cadena en un array de subcadenas basándose en un patrón.
Este código divide la cadena en cada coma.
Buscar texto: str.match()
El método match() recupera las coincidencias de un patrón dentro de una cadena, útil para extraer datos específicos.
Este código encuentra todos los números en el texto.
Sintaxis de regex en JavaScript
Las expresiones regulares usan caracteres especiales para definir patrones. Aquí tienes un ejemplo detallado usando 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 seguida de cualquier carácter que no sea espacio en blanco hasta el final, representando la ruta.
Más detalles:
Este código de JavaScript verifica si una dirección web encaja con 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 va después del dominio).
- Prueba de la dirección web: El código prueba "https://www.w3docs.com/pathname/?search=test" contra este patrón.
- Mostrar el 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:
- La dirección web completa: "https://www.w3docs.com/pathname/?search=test".
- El protocolo usado: "https".
- El nombre de dominio: "www.w3docs.com".
- La ruta y la cadena de consulta: "pathname/?search=test".
Aplicaciones prácticas de patrones y flags
Regex se usa en varios escenarios para mejorar las aplicaciones de JavaScript:
Validación de la entrada del usuario
Regex ayuda a garantizar que los datos introducidos por el usuario cumplan ciertos criterios, lo cual es crucial para la calidad y la 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
Regex puede extraer información específica de textos largos o conjuntos de datos de forma eficiente.
Este código de JavaScript extrae una pieza específica de información de una cadena de texto.
- Definición del texto: El código comienza con una cadena llamada
dataque contiene detalles sobre un pedido, incluido 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 una coincidencia de
idPatternen la cadenadata. Cuando encuentra una coincidencia, recupera solo la parte de los dígitos (ignorando el texto "Order ID:"), que representa el ID del pedido. - Mostrar el resultado: Luego imprime este ID de pedido en la consola.
INFO
Siempre prueba tus patrones de regex usando herramientas como regex101.com para garantizar precisión y eficiencia antes de implementarlos en tu código.
Conclusión
Dominar los patrones y flags de regex en JavaScript es vital para manejar eficazmente la manipulación de texto, la validación de datos y las operaciones de búsqueda. Estas herramientas hacen que tus aplicaciones de JavaScript sean más robustas, eficientes y fáciles de usar. Explora varios patrones y flags para mejorar tu experiencia de programación y el rendimiento de tus aplicaciones.
Práctica
¿Cuáles son las propiedades de las expresiones regulares en JavaScript según se describen en la URL proporcionada?