Hola gente, estuve ausente por un buen tiempo por motivos laborales 😅. Ahora espero retomar con el blog, así que continuando con la serie de tutoriales sobre expresiones regulares en javascript, continuamos con la segunda parte.
Así también comentarte que utilizaremos la palabra regex que proviene de la frase en ingles regular expresions para hacer referencia a las expresiones regulares en javascript dentro de este post.
Grupos y Referencias (Groups and References) en expresiones regulares en javascript
Los Grupos (Groups)
Permite dividir parte de una expresión regular en regex mas pequeñas para poder buscar patrones que coincidan con un texto ingresado.
Al colocar parte de una expresión regular entre paréntesis (...), puede agrupar esa parte de la regex. Esto le permite aplicar un cuantificador a todo el grupo o restringir la alternancia a parte de la expresión regular.
Además de agrupar parte de una Regex, los paréntesis también crean un grupo de captura numerado; conforme se van definiendo de izquierda a derecha (1...n). Almacena la parte de la cadena que coincide con la parte de la expresión regular dentro del paréntesis.
La Regex Set(Value)? coincide con Set o SetValue. En el primer caso, el primer (y único) grupo de captura permanece vacío. En el segundo caso, el primer grupo de captura coincide con Value.
Ahora veamos la representación de los grupos en las regex.
(a|b)➔ Representa a o b.(abc)➔ Simboliza un Grupo. Ejem. Para la Regex(ha)+muestra como resultado para el siguientes texto "==hahaha== ==ha==a ==ha==h!".(?:abc)➔ Grupo pasivo (sin captura, por lo tanto no asigna un ID). Ejem. para(?:ha)+muestra como resultado “==hahaha== ==ha==a ==ha==h!”, pero no generará un ID de referencia\1. Las referencia las veremos mas adelante en la sección de mismo nombre.(?<name>abc)➔ Crea un grupo de captura al que se puede hacer referencia mediante el nombre (<name>) especificado. Ejem.(?<name>Sally)el resultado de la prueba será “Llámame ==Sally==”.
Las Referencias (References)
Permiten marcar mediante un nombre o un id que se incrementa automáticamente, un determinado grupo (denominado grupo de captura) de expresión regular; para luego hacer referencia mas adelante en la misma regex. Generalmente se utiliza para expresiones regulares en javascript más complejas.
Supón que desea hacer coincidir un par de etiquetas HTML de apertura y cierre, y el texto intermedio. Al poner la etiqueta de apertura en una referencia inversa, podemos reutilizar el nombre de la etiqueta para la etiqueta de cierre. He aquí cómo: <([A-Z][A-Z0-9]*)\b[^>]*>.*?</\1>.
Esta expresión regular contiene solo un par de paréntesis, que capturan la cadena que coincide con [A-Z][A-Z0-9]*. Esta es la etiqueta HTML de apertura. (Dado que las etiquetas HTML no distinguen entre mayúsculas y minúsculas, esta expresión regular requiere una coincidencia que no distinga entre mayúsculas y minúsculas). La referencia \1(barra invertida 1) hace referencia al primer grupo de captura. \1 que coincide exactamente con el mismo texto que coincidió con el primer grupo de captura. El / antes es un carácter literal. Es simplemente la barra inclinada en la etiqueta HTML de cierre que estamos tratando de hacer coincidir.
Para averiguar el número de una referencia en particular, escanea la Regex de izquierda a derecha. Cuente los paréntesis de apertura de todos los grupos de captura numerados. El primer paréntesis comienza con la referencia número 1, el segundo número 2, etc. Omita los paréntesis que forman parte de otra sintaxis, como los grupos que no capturan (?:abc). Esto significa que los paréntesis que no capturan tienen otro beneficio, puede insertarlos en una expresión regular sin cambiar los números asignados a las referencias. Esto puede resultar muy útil al modificar una expresión regular compleja.
\1➔ Coincide con los resultados de un grupo de captura. Ejem., \1 coincide con los resultados del primer grupo de captura y \3 coincide con el tercero.\#buscará una repetición del texto coincidente con el numero de grupo especificado (#), para ver su funcionamiento tiene que haber al menos un grupo (…) en la expresión regular. Ejem. Para la regex que determina si una cadena son etiquetas HTML de apertura y cierre<([a-zA-Z0-9]+)\b[^>]*>.*?<\/\1>el resultado de el test será "==<strong>hola mundo</strong>=="
Afirmaciones (Assertions) en las expresiones regulares en javascript
Las afirmaciones, denominadas en ingles "lookaround", son afirmaciones de longitud cero como el inicio y el final de cadena o línea (^ o $); y el limite de palabra (\b) anclajes explicados anteriormente en este blog, en el post expresiones regulares en javascript parte 01. La diferencia es que las afirmaciones coinciden con los caracteres, pero luego abandonan la coincidencia, devolviendo solo el resultado: coincidencia o no coincidencia. Por eso se les llama "afirmaciones". No consumen caracteres en la cadena de búsqueda, solo afirma si una coincidencia es posible o no. Las afirmaciones le permiten crear expresiones regulares en javascript que serian imposibles de crear sin ellas, o que se volverían muy largas y complejas.
(?=ABC)➔ Afirmación anticipada positiva. Afirma que el subpatrón dado puede coincidir después de la expresión principal, no consume caracteres en el resultado. Ejem. para la expresión regular\d(?=px)el texto de prueba se mostrará así “1pt ==2==px 3em ==4==px”. Como vemos no marca ninguna coincidencia debido a que no hay ningún numero seguido de alguna unidad px de CSS.(?!ABC)➔ Afirmación anticipada negativa. Afirma que el subpatrón dado NO puede coincidir después de la expresión principal, no consume caracteres en el resultado. Ejem. para la Regex\d(?!px)el texto de prueba se mostrará así “==1==pt 2px ==3==em 4px”. Vemos que marca 1 y 3 debido a que son los únicos dígitos sin ninguna unidad px de CSS.(?<=ABC)➔ Afirmación retrospectiva (hacia atrás) positiva. Coincide con un grupo antes de la expresión principal sin incluirlo en el resultado, funcional igual que(?=ABC); con la diferencia que va antes de la expresión principal. Ejem.(?<=foo)barel resultado del test es “foobar== fuubar”. Como vemos marca solo la palabra bar, debido a que se esta afirmando retrospectivamente que debe estar la palabra foo antes.(?<!ABC)➔ Afirmación retrospectiva (hacia atrás) negativa. Especifica un grupo que NO puede coincidir antes de la expresión principal, muy similar a(?!ABC); con la diferencia que va antes de la expresión principal. Ejem.(?<!not )fooel resultado del test es “not foo but ==foo==”. La expresión regular del ejemplo esta afirmando que no va haber ninguna palabra not con espacio antes de la palabra foo.
Fuente: https://www.regular-expressions.info/lookaround.html
Cuantificadores y Alternancia (Quantifiers and Alternation) en la expresiones regulares en javascript
Cuantificadores (Quantifiers)
Nos permiten indicarle al motor de expresiones regulares en javascript que sub-expresiones dentro de una regex se van a repetir, una cantidad de veces que sera determinada por ti.
El asterisco (*) le dice al motor que intente hacer coincidir la expresión regular anterior cero o más veces. El signo más (+) le dice al motor que intente hacer coincidir la regex anterior una o más veces. La expresión regular <[A-Za-z][A-Za-z0-9]*> coincide con una etiqueta HTML sin ningún atributo. La primera clase de caracteres (Character Classes) [A-Za-z] coincide con una letra. La segunda clase de caracteres [A-Za-z0-9] coincide con una letra o un dígito.
La estrella (*) repite la segunda clase de caracteres 0 o mas veces. Debido a que usamos la estrella, está bien si la segunda clase de caracteres no coincide con nada. Entonces, nuestra expresión regular coincidirá con una etiqueta HTML como <STRONG>. Cuando ingreso la etiqueta <HTML>, la primera clase de caracteres coincidirá H. La estrella hará que la segunda clase de caracteres se repita tres veces, haciendo coincidir T, M y L con cada paso.
Hay un cuantificador adicional que le permite especificar cuántas veces se puede repetir una sub-expresión. La sintaxis es {min,max}, donde min es cero o un número entero positivo que indica el número mínimo de coincidencias, y max es un número entero igual o mayor que min que indica el número máximo de coincidencias. Si la coma está presente pero max se omite, el número máximo de coincidencias es infinito. ¿Entonces {0,1} es lo mismo que ?, {0,} es lo mismo que * y {1,} es lo mismo que +. Omitir tanto la coma como el max le dice al motor que repita la sub-expresion exactamente un min de veces.
*➔ 0 o más. Repite de 0 a más veces la expresión anterior.+➔ 1 o más. Repite 1 a más veces la expresión anterior.?➔ 0 o 1. Se repite por lo menos una vez{3}➔ Exactamente 3{3,}➔ 3 o más. Repite de 3 hasta un numero infinito de veces.{3,5}➔ 3, 4 o 5. Repite de 3 a 5 veces.
Alternancia (Alternation)
Puedes usar la expresión regular \b[1-9][0-9]{3}\b para hacer coincidir un número entre 1000 y 9999. O la regex \b[1-9][0-9]{2,4}\b que coincide con a número entre 100 y 99999.
Si desea buscar el texto literal gato o perro, separe ambas opciones con una barra vertical o un símbolo de tubería: gato|perro. Si desea más opciones, simplemente expanda la lista: gato|perro|raton|pescado.
El operador de alternancia (|) tiene la precedencia más baja de todos los operadores de expresiones regulares en javascript. Es decir, le dice al motor de Regex que haga coincidir todo lo que está a la izquierda o todo lo que está a la derecha de la barra vertical respectivamente. Si desea limitar el alcance de la alternancia, debe usar paréntesis para agrupar.
|➔ Actúa como un OR booleano. Puede operar dentro de un grupo o en una expresión completa. Los patrones se probarán en orden. Ejem. para la Regexb(a|e|i)del resultado serias así “==bad== bud bod ==bed== ==bid==”.
Fuente: https://www.regular-expressions.info/alternation.html
Sustitución de Cadenas (String Sustitution) en las expresiones regulares en javascript
Una cadena de reemplazo (Replacement String), también conocida como texto de reemplazo (Replacement Text), es el texto con el que se sustituye cada coincidencia de expresión regular durante una búsqueda. En la mayoría de las aplicaciones, el texto de reemplazo admite una sintaxis especial que le permite reutilizar el texto que coincide con la expresión regular o partes de la misma en el reemplazo.
Este post explica esta sintaxis. Si bien las cadenas de reemplazo son bastante simples en comparación con las Regex, todavía existe una gran variedad entre la sintaxis utilizada por varias aplicaciones y su comportamiento real. Para probar este tipo de expresiones regulares en javascript, tiene que activar la herramienta "Replace" de regexr.com que te recomiendo utilizar.
En la imagen anterior podemos ver como para la expresión regular ([A-Z])\w+ que representa cualquier carácter que empiece con una mayúscula seguido de cualquier palabra \w y que se repita una o mas veces *. Se sustituyen todas las coincidencias por << $1 >> que representa el primer grupo de captura dentro de dobles signos mayor y menor que. Esto quiere decir la primera letra en mayúscula de todas las palabras que cumplen con la coincidencia y que están resaltadas. A continuación te detallo todas la regex de remplazo para que puedas probar.
$1➔ Inserta los resultados del grupo de captura especificado. Ejem. para$3, esto devolverá una cadena con el contenido del tercer grupo de captura. El número, en este caso el 3, puede ser cualquier número siempre que corresponda a un grupo de captura válido.$`➔ Inserta la parte de la cadena de origen que precede a la coincidencia.$'➔ Inserta la parte de la cadena de origen que sigue a la coincidencia.$&➔ Inserta el texto coincidente. Esto devolverá una cadena con el resultado completo de la coincidencia de la expresión regular.$$➔ Inserta un carácter de signo de dólar ($).
Para con el uso de $& que representa el remplazo de una cadena completa, vemos que todas las coincidencias están siendo sustituidas por la forma << $& >>. Lo que coge la palabra completa y la encierra en dobles llaves mayor y menor que.
Fuente: https://www.regular-expressions.info/replacetutorial.html
Banderas o Modificadores (Flags or Modifiers) en las expresiones regulares en javascript
Normalmente, los modos de coincidencia se especifican fuera de la expresión regular. En un lenguaje de programación, los pasa como una bandera (flag) al constructor de Regex o los agrega al literal de expresiones regulares en javascript. En una aplicación, alternaría los botones o casillas de verificación correspondientes. A continuación su significado.
g➔ Coincidencia global. Indica al motor que no se detenga después de encontrar la primera coincidencia, sino que continúe hasta que no se encuentren más coincidencias.i➔ No distinguir entre mayúsculas y minúsculasm➔ Varias Lineass➔ Trata a la cadena como una sola lineau➔ Habilita la compatibilidad con Unicodey➔ Busca en cadenas solo desde el índice de la última coincidencia
Donde probar las expresiones regulares en javascript
Para probar las expresiones regulares en Javascript, puede utilizar la siguientes aplicaciones web. La cuales te serán muy sencillas de utilizar.
Aplicación de regexr.com
Esta es una aplicación muy potente y a la vez simple para probar las expresiones regulares, además de ser gratuita. Solo te permite probar expresiones regulares en javascript y PCRE que se utiliza en PHP <= 7.2.
Aplicación regex101.com
Esta aplicación es mucho mas potente que la primera (regexr.com), es también gratuita y te permite probar expresiones regulares para diferentes lenguajes de programación en los que están PCRE2 (PHP >=7.3), PCRE (PHP <= 7.2), javascript, python, golang, Java y C#.
