Regexp en programación y desarrollo de la Web
Hoy vamos a escribir sobre las Expresiones Regulares conocidas como regex o regexp abreviado, un concepto muy útil de uso de patrones de búsqueda.
Seguramente usted estaba en una situación en la que necesita reemplazar una palabra por otra o un carácter por otro. Esto y más puedes manejar con las Expresiones Regulares. Aquí puedes leer sobre todo lo que necesitas saber para saber cómo funciona, cómo puedes usar Regex para ayudar a mejorar tu búsqueda en el entorno de programación y desarrollo web. Comencemos.
Entonces, ¿qué es REGEX?
Expresión Regular es una secuencia de caracteres con la capacidad de buscar a través del texto, validarlo contra condiciones o reglas definidas.
Esa secuencia forma patrones que se utilizan para hacer coincidir las combinaciones de caracteres en una cadena de texto.
Así que el propósito de esto es hacer una simple o más compleja coincidencia de caracteres de texto. Permite buscar caracteres específicos, palabras, interpunciones, etc. Hay muchos usos para el resultado de la búsqueda. Usted puede usar Regex para hacer data validación de datos, web scraping o si desea hacer una operación avanzada de búsqueda y reemplazo, como por ejemplo si desea cambiar ciertos caracteres o obtener sólo direcciones de correo electrónico del documento y mucho más.
Las expresiones regulares se utilizan en los motores de búsqueda, y muchos lenguajes de programación tienen capacidades regex o implementación de su funcionalidad (motor regex) ya sea incorporado o a través de librerías.
Nos centraremos en la presentación de la expresión regular en JavaScript, en la que es un objeto(clase).
¿Cómo usar Regex?
Como mencionamos, la expresión regular puede ser un solo carácter o una combinación más complicada de caracteres en patrón.
Veamos esos caracteres que definen la búsqueda.
Cada carácter en un patrón es un metacaracter, que tiene un significado especial, o un carácter regular que tiene un significado literal. Juntos, los metacaracteres y los caracteres literales pueden utilizarse para identificar el texto, las coincidencias de patrones pueden variar desde ser muy precisas hasta ser muy generales, controladas por los metacaracteres.
Por ejemplo, en la "m" de regex. , la m es un carácter literal que coincide con toda la "m", y la "." es un metacaracter que coincide con todos los caracteres. Por lo tanto, si tenemos un texto que contiene el texto "m0, me, mX", nuestro regex m. coincide con los tres conjuntos.
El punto . es un patrón muy general, [a-z] (coincide con todas las letras minúsculas de la 'a' a la 'z') es menos general y la a es un patrón preciso (coincide sólo con la 'a').
Sintaxis Regex y caracteres Metacharacteres
La expresión regular es una cadena de texto, compuesta por delimitadores, patrones y modificadores opcionales.
/patrón/modificadores;
Como este ejemplo:
/ma-no.org/i
es una expresión regular, ma-no.org es un patrón, i es un modificador (modifica la búsqueda para que no se distinga entre mayúsculas y minúsculas).
El delimitador puede ser cualquier carácter que no sea una letra, un número, una barra invertida o un espacio, por eso lo más común es la barra inclinada "/", pero cuando se tiene que buscar /, a veces se pueden usar otros delimitadores como # o ~.
El patrón es lo que se busca y el modificador establece dónde se realiza la búsqueda o la hace sensible a mayúsculas y minúsculas o insensible.
Podemos construir expressiones complejas, combinarlas de forma similar a la aritmética.
La idea es hacer que un pequeño patrón de caracteres represente un gran número de posibles cadenas, en lugar de compilar una gran lista de todas las posibilidades literales.
Una vez hecho esto, pasemos al siguiente capítulo.
Conjunto de banderas
¿Qué son esas banderas Regex? Son modificadores detrás del delimitador final. Podemos cambiar cómo se interpreta la expresión con ellos.
g
Global, realiza un match global (continúa después del primer match a través de toda la cadena dada).
i
Hace que todo el patrón sea insensible a las mayúsculas y minúsculas. Por ejemplo, /AbC/i coincidiría con aBc, ABC, abc, etc.
m
La multilínea, el principio y el final (^ y $) coincidirán sólo para el final de la línea, en lugar de toda la cadena.
u
unicode, con esto es posible extender los escapes de unicode.
y
pegajoso, el patrón sólo coincidirá desde su posición en el último índice e ignora la bandera global(g).
s
punto (.) coincidirá con cualquier carácter, incluyendo la nueva línea.
Regex para una simple coincidencia
Antes de continuar, no todos los regex funcionarán en todos los lenguajes de programación, tienes que comprobarlo por ti mismo.
Ahora aquí están los metacaracteres y su definición con ejemplos para JavaScript.
Punto o Punto .
Comodín, cualquier cosa, excepto una nueva línea.
Por ejemplo
/a.b/
coincide con "a3b" pero también con "acb", etc.
Dentro de [ ] el punto o la coma es literal.
El carácter que se escapa \
Se usa cuando quieres hacer coincidir los caracteres especiales como '+' o '\' o punto.
Ejemplo
/.\./
Encuentra cualquier cosa que tenga un periodo detrás del primer carácter buscado como el primer periodo es un comodín.
/\./
Busca un período normal, en lugar de un período de comodín.
/\(?a/
Encontrará el carácter a con el carácter especial opcional "(" que antes de la "a".
Las clases de caracteres coinciden con cualquiera de un conjunto de caracteres.
/w
coincide con cualquier palabra
/W
coincide con cualquier cosa que NO sea una palabra
/s
coincide con cualquier espacio en blanco, como el espacio y el tabulador...
/S
coincide con cualquier cosa que NO sea un espacio
/d
coincide con cualquier dígito (números)
/D
coincide con cualquier carácter que NO sea un dígito
/b
coincide con cualquier límite de palabra (esto incluye espacios, guiones, comas, punto y coma)
Carácter de la tubería (barra vertical)
Se usa como OR en la programación, coincide con cualquier carácter separado por él.
Por ejemplo
/m|mouse/
encuentra una cadena de texto que es la letra "m" O las letras "mouse".
¡Signo de exclamación!
Negativo.
El símbolo de la caricia ^
El comienzo de la línea o cadena de texto en la que se buscaba.
Símbolo del dólar $
Fin de una declaración (cadena de texto en la que se buscaba)
Cuantificadores
Estos símbolos actúan como repetidores y los caracteres precedentes deben ser utilizados más de una vez.
Signo de interrogación ?
El carácter opcional antes del signo de interrogación, como el guión "-?" sería opcional.
Por ejemplo
/ab?c/
coincidirá con "ab" pero también con "abc.
Asterix *
Cero o más ocurrencias del carácter anterior .
Ejemplos :
/a.*b/
coincide con cualquier cadena que contenga "a" y luego la "b" más tarde, ya que puede haber cero o más ocurrencias del punto - como carácter comodín.
/ab*c/
coincide con "ac", "abc", "abbbc", etc.
/[xyz]*/
coincide con '', 'x', 'y', 'z', 'zx', 'zyx', 'xyzzy', etc.
/(ab)*/
coincide con '', 'ab', 'abab', 'ababab', y así sucesivamente.
El símbolo más +
Indica una o más ocurrencias del carácter precedente
El ejemplo
/[a]+/
coincidirá con la "a" de la palabra "Palma".
Tirantes rizados { }
Delimita un número mínimo y máximo de caracteres en el patrón de búsqueda, afecta al carácter anterior a {} en los patrones de búsqueda, como
/o{2,3}/
encuentra dos oo en "school", o
/(c|r|a){2,3}/
encuentra "rat", "cat".
{min,}
? el carácter precedente puede ocurrir min o más veces, ejemplo
/{3}a/
que coincide con "aaa".
{min,max}
? el carácter precedente puede ocurrir al menos un mínimo de veces, pero no más de un máximo de veces.
Agrupación de caracteres
Los paréntesis [ ]
Dentro ponemos los carácter que queremos que coincidan en una búsqueda. Usando caracteres en minúsculas o mayúsculas podemos especificar un rango de coincidencias, las formas pueden ser mezcladas como
[abcX-Z]
.
/[cmt]at/g
encontrará "cat, mat" pero no "that".
[a-z]
rango de caracteres, en este caso en minúsculas.
[^ ]
coincide con un solo carácter que no está contenido entre los corchetes, por ejemplo
/[^a-z]/
coincide con cualquier carácter que no sea una letra minúscula de la a a la z.
Grupo de patrones ()
La cuerda dentro del paréntesis puede ser recordada más tarde. Una subexpresión marcada también se llama bloque o grupo de captura.
Ejemplo :
/(p|P)/
busca p minúscula o P mayúscula.
(?<nombre>)
- nombrando el grupo para su uso posterior.
Mirar adelante y mira atrás
Con estos patrones podemos encontrar carácteres antes o detrás de algo, pero no te asustes por su nombre.
/(?<=)./
Mirada positiva hacia atrás. Cualquier carácter que esté precediendo a los carácteres que definimos detrás de él. Ejemplo
/(?<=[Tt]he)./g
encontrará cualquier carácter detrás de los carácteres La o la.
/(?<=[h])a/g
encontrará cualquier carácter detrás de la palabra h, por ejemplo a en la palabra That.
/(?<!)./
Mirada negativa detrás. Cualquier cosa que no tenga caracteres que definamos detrás de ella.
/.(?=)/
Mirada positiva hacia atrás. Cualquier carácter que esté antes de los carácteres definidos.
/.(?=[tT])/g
encontrará todos los caracteres anteriores al carácter T o t.
/.(?!)/
Mirada negativa detrás. Cualquier carácter que no esté antes de los caracteres definidos.
/.(?![ ])/g
encontrará todos los caracteres que no sean anteriores al espacio.
Profundicemos en el Regex
Ahora podemos usar lo que aprendimos para buscar el número de teléfono en un texto.
Déjenos mostrarle algunos ejemplos avanzados.
^[\t]+|[\t]+$
Coincide con el exceso de espacio en blanco al principio o al final de una línea
[+-]?(\d+(\.\d+)?|\.\d+)([eE][+-]?\d+)?
Coincide con cualquier número
^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$
Coincide con la dirección de correo electrónico
^((\+\d{1,3}(-| )?\(?d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$
Coincide con un número de teléfono de 9 dígitos en la UE, con el prefijo del país en el formato 0034123456789.
^((\+1)[ -])?\(?(\d{3})\)?[ -]?(\d{3})[ -]?(\d{4})$
Coincide con un número de teléfono de EE.UU. con el prefijo internacional +1.
Regex y JavaScript
Hay dos métodos de cuerda.
search()
usa una expresión para una coincidencia y devuelve la posición de la coincidencia. (note el modificador insensible a mayúsculas y minúsculas).
var resultado = string.search(/NO/i); //resultado = 3
replace()
devuelve una cadena modificada en la que se reemplaza el patrón.(note el lookahead positivo)
var result2 = string2.replace(/(?<=[ ])[a-zA-Z]{1,5}/g, "Pizzería");
//resultado2 = "Visitar Pizzería!"
Hay dos formas de construir el Regex de la siguiente manera:
let myRegexObject = new RegExp('ab+c');
En JavaScript, las expresiones regulares son objetos y se usan a menudo con los dos métodos de objetos predefinidos.
test()
busca una cadena de caracteres para un patrón, y devuelve verdadero o falso
<script>
inputOutput = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = /e/.test(inputOutput); //true
</script>
El método
exec()
busca en una cadena un patrón especificado y devuelve el texto encontrado como un objeto, si no se encuentra, devuelve null.
document.getElementById("demo").innerHTML = "Found " + obj[0] + " in position " + obj.index + " en el texto: " + obj.input;
//Found M en posición 0 en el texto: Ma-no.org
match()
Devuelve una matriz que contiene todas las coincidencias, incluyendo los grupos de captura, o nula si no se encuentra ninguna coincidencia.
const regex = /[A-Z]/g;
document.getElementById("demo").innerHTML = paragraph.match(regex); //M, N
matchAll()
Devuelve un iterador que contiene todas las coincidencias, incluyendo los grupos de captura.
split()
Utiliza una expresión regular o una cadena fija para romper una cadena en un conjunto de subcadenas.
También hay propiedades bastante útiles como esta.
document.getElementById("demo").innerHTML = pattern.source; //Ma-no.org
Conclusión
Los regexes son útiles en una amplia variedad de tareas de procesamiento de textos, y más generalmente en el procesamiento de cadenas.
Por último, hay aplicaciones web o herramientas de sitios web de juegos, ideales para practicar y probar.
Sólo podemos recomendar estos sitios:
https://regex101.com/
https://regexr.com/
Javascript Regex cheatsheet
Y la última la recomendamos para comprobar la compatibilidad del navegador.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions.
Imagen de CyberHades.
