Todo lo que necesitas saber para Trabajar con Expresiones Regulares en JavaScript

Todo lo que necesitas saber para trabajar con Expresiones Regulares en JavaScript. Nos ahorrarán mucho tiempo validando campos de formulario, realizando búsquedas, reemplazando textos, manipulando datos, etc …

Al igual que en otros lenguajes de programación la palabra clave RegExp en JavaScript nos indica que estamos tratando con expresiones regulares.

¿Como se crean las expresiones regulares?

Las expresiones regulares se pueden crear de dos maneras diferentes:

Usando las expresiones directamente.
Haciendo uso del Objeto RegExp().

La diferencia es que usando RegExp() podemos cambiar el patrón según sea el caso. Veamos un ejemplo muy básico de como crear una expresión regular directamente. El método test() evalúa si la hay coincidencias del patrón en la cadena y más adelante profundizaremos un poco más.

// buscar la palabra JavaScript en la cadena.
cadena = "JavaScript";
(/JavaScript/.test(cadena)) ? console.log("hay coincidencia"): console.log("no hay coincidencia");

// buscar la palabra JavaScript en la cadena.

cadena = "JavaScript";

(/JavaScript/.test(cadena)) ? console.log("hay coincidencia"): console.log("no hay coincidencia");

Por lo que para crear esta misma expresión usando el objeto RegExp() haremos lo siguiente:

// cadena
let cadena = "JavaScript"; 
// patrón
let patron = "JavaScript";     
// evaluar con RegExp()
reg = new RegExp(patron);
(reg.test(cadena)) ? console.log("hay coincidencia"): console.log("no hay coincidencia");

// cadena

let cadena = "JavaScript";

// patrón

let patron = "JavaScript";

// evaluar con RegExp()

reg = new RegExp(patron);

(reg.test(cadena)) ? console.log("hay coincidencia"): console.log("no hay coincidencia");

La ventaja de usar RegExp() es que podemos cambiar el patrón según sea el caso y además acepta otro parámetro denominado banderas (flags) que nos permiten añadir funcionalidades extra que veremos más adelante).

Componentes de una expresión regular

Una expresión regular se puede componer de caracteres simples como hemos visto en el ejemplo anterior o de una combinación de caracteres simples y especiales:

Los patrones simples se usan para buscar coincidencias exactas (Por ejemplo /hola/) y ya hemos visto como trabajan en el ejemplo anterior.
Cuando necesitamos buscar algo más concreto necesitamos hacer uso de caracteres especiales (Por ejemplo /[0-9]/ que busca coincidencias de números en la cadena)

Caracteres especiales

Para crear expresiones regulares más complejas se usan caracteres especiales. Vamos a ver cuales son los caracteres especiales más utilizados:

\ Una barra invertida que preceda a un carácter (por ejemplo \a) indicará que este debe ser interpretado literalmente. Por lo que si indicamos \a* estaremos indicando que busque cualquier caracter «a» un número ilimitado de veces.
^ Índica que debemos buscar en el comienzo de una cadena. Por lo que ^J encuentra coincidencias en una cadena como puede ser «JavaScript 2020»
$ Indica el fin de una cadena. Por ejemplo /$a/ encuentra coincidencias en la cadena «Esto es Roma»
* indica que puede ser cualquier coincidencia. Por lo que /Ho*/ encuentra coincidencias que comiencen por Ho, como pueden ser las cadenas Hola, Hora, Hombre, etc …
+ Encuentra el carácter que le precede. /o+/ encuentra el carácter o en la cadena «Hola»
? Encuentra el carácter que le precede pero tan sólo una vez. /H?/
. Encuentra cualquier carácter que le preceda, por lo que /.a/ encuentra coincidencias en «la»

Las Banderas (flags)

Las banderas en una expresión regular son opcionales y permiten especificar funcionalidades especificas en una búsqueda.

i la búsqueda no tiene en cuenta si son mayúsculas ó minúsculas (no sensitive).
g se realiza una búsqueda global por lo que se siguen buscando coincidencias aunque hallan sido encontradas otras.
m buscar coincidencias en múltiples líneas.
u para caracteres unicode.

Los métodos test() y match()

El método test() ejecuta una búsqueda para así poder evaluar si se han encontrado coincidencias de una expresión regular. Hay que tener en cuenta que test() devuelve un valor booleano true o false, pero nunca el resultado de dicha búsqueda.

Funciona muy parecido al método search() pero este último en vez de true o false devuelve un valor entre 0 y 1.

El método match() es usado para obtener las ocurrencias encontradas en una cadena a través de una expresión regular.

Ahora que ya sabemos un poco más sobre expresiones regulares podemos ver cómo funcionan con un par de ejemplos. Veamos un ejemplo sencillo usando RegExp()

 // cadena de búsqueda
 let cadena = "JavaScript es un lenguaje de programación";
 // el comienzo de la cadena (^) empieza por "j"
 let patron = "^j";
 // case no sensitive y busqueda global
 let banderas = "gi";

 // usando RegExp()
 reg = new RegExp(patron, banderas);
 (reg.test(cadena)) ? console.log("hay coincidencias"): console.log("no hay coincidencias");

// cadena de búsqueda

let cadena = "JavaScript es un lenguaje de programación";

// el comienzo de la cadena (^) empieza por "j"

let patron = "^j";

// case no sensitive y busqueda global

let banderas = "gi";

// usando RegExp()

reg = new RegExp(patron, banderas);

(reg.test(cadena)) ? console.log("hay coincidencias"): console.log("no hay coincidencias");

Ahora el mismo ejemplo usando un patrón directamente:

// usando una expresión directamente
(/^j/ig.test(cadena)) ? console.log("hay coincidencias"): console.log("no hay coincidencias");

1 2	// usando una expresión directamente (/^j/ig.test(cadena)) ? console.log("hay coincidencias"): console.log("no hay coincidencias");

Otros Caracteres Especiales y Patrones

Existen otros muchos caracteres especiales y que nos permiten crear expresiones más complejas. Estos caracteres especiales requieren escapar la barra invertida para que funcionen correctamente.

\d cualquier dígito. Equivale a [0-9]
\D cualquier carácter que no sea un dígito. Por lo que la expresión ^\\D comprueba si el primer carácter no es un dígito.
\w cualquier carácter alfanumérico incluidos guiones bajos. Equivaldría a [A-Za-z0-9_]
\W cualquier carácter que no sea alfanumérico y guiones bajos. Puede ser una #, €, % etc …
{n} el número de ocurrencias que estamos buscando. Por ejemplo ^\\d{2} especifica que buscamos 2 dígitos al comienzo de la cadena.
{n,m} ocurrencias encontradas entre n y m veces.
x|y ocurrencias encontradas de x o y.
\t coincidencias con tabulaciones.
\r coincidencias con retornos de carro.
\n coincidencias con saltos de línea.
\f coincidencias con saltos de página.
[a-z] un grupo de caracteres. Con el guión especificamos que es un rango de caracteres comprendidos entre la a y la z.
[0-9] lo mismo pero es un grupo de dígitos comprendidos entre el 0 y el 9.
[^a-z] cualquier coincidencia que no este en el grupo especificado.

Con estos caracteres y patrones ya podemos proceder a realizar otro ejercicio para aprender a crear expresiones regulares más complejas.

En este ejemplo vamos a comprobar si una matrícula europea introducida por el usuario es correcta.

let matricula = "8431ddj";
let patron = "^\\d{4}\\D{3}$";
let banderas = "i";
reg = new RegExp(patron, banderas);
(reg.test(matricula)) ? console.log("matricula correcta") : console.log("matricula incorrecta");
console.log(matricula.match(reg)); // comprobación

let matricula = "8431ddj";

let patron = "^\\d{4}\\D{3}$";

let banderas = "i";

reg = new RegExp(patron, banderas);

(reg.test(matricula)) ? console.log("matricula correcta") : console.log("matricula incorrecta");

console.log(matricula.match(reg)); // comprobación

Otra expresión correcta aunque más larga podría ser:

patron = "^[0-9]{4}[A-Za-z]{3}$";

1	patron = "^[0-9]{4}[A-Za-z]{3}$";

Y ahora veamos el ejemplo ya funcional que nos va a permitir realizar la comprobación de una matrícula europea desde un formulario web:

El método replace()

El método replace() retorna una nueva cadena como resultado de las coincidencias encontradas en esta.

Los parámetros que puede recibir replace() son un patron/cadena y la nueva cadena o función. Hay que tener en cuenta que no cambia la cadena sino que retorna una nueva.

Veamos un ejemplo donde vamos a reemplazar una palabra en una cadena.

cadena = 'Pues al final acabaré odiando las expresiones regulares.';
var reg = /odiando/gi; // búsqueda global y no sensitive
console.log(cadena.replace(reg, 'amando'));
console.log(cadena.replace('odiando', 'sufriendo'));

cadena = 'Pues al final acabaré odiando las expresiones regulares.';

var reg = /odiando/gi; // búsqueda global y no sensitive

console.log(cadena.replace(reg, 'amando'));

console.log(cadena.replace('odiando', 'sufriendo'));

El resultado de dicha expresión es el siguiente:

Pues al final acabaré amando las expresiones regulares.
Pues al final acabaré sufriendo las expresiones regulares.

1 2	Pues al final acabaré amando las expresiones regulares. Pues al final acabaré sufriendo las expresiones regulares.

El método split()

El método split() divide una cadena en un array de cadenas, para ello necesitamos indicar el separador de cadenas que especifica donde realizar cada corte.

Los parámetros que admite split() son un separador y el limite de palabras que queremos cortar.

// cadena
cadena = 'Pues al final acabaré odiando las expresiones regulares.'; 
// el separador será un espacio
let palabras = cadena.split(' '); 
// array de palabras de la cadena 
console.log( palabras ); 
// devuelve "expresiones regulares"
console.log( palabras[6]+ ' '+palabras[6] );

// cadena

cadena = 'Pues al final acabaré odiando las expresiones regulares.';

// el separador será un espacio

let palabras = cadena.split(' ');

// array de palabras de la cadena

console.log( palabras );

// devuelve "expresiones regulares"

console.log( palabras[6]+ ' '+palabras[6] );

El resultado sería el siguiente:

(8) ["Pues", "al", "final", "acabaré", "odiando", "las", "expresiones", "regulares."]
expresiones expresiones

1 2	(8) ["Pues", "al", "final", "acabaré", "odiando", "las", "expresiones", "regulares."] expresiones expresiones

Comprobación de Expresiones Regulares

Hay muchas páginas donde podemos comprobar si nuestras expresiones regulares son correctas antes de aplicarlas en nuestro código. Esto nos puede ahorrar tiempo sino estamos habituados a trabajar con ellas.

Online Regex tester and Debuguer

Para más información sobre expresiones regulares puedes seguir este enlace.

RegExp

¿Como se crean las expresiones regulares?

Componentes de una expresión regular

Caracteres especiales

Las Banderas (flags)

Los métodos test() y match()

Otros Caracteres Especiales y Patrones

El método replace()

El método split()

Comprobación de Expresiones Regulares

Entradas relacionadas

Diseño de un Panel de Login+Registro con un elegante Carrusel con Bootstrap5

Adapta tu web a la nueva Ley de Protección de Datos del 2020, usando JavaScript, CSS y Bootstrap.

Mostrar y Ocultar contraseñas de elementos de formulario HTML usando JavaScript, Bootstrap 4> y FontAwesome 5>

Guía de Configuración de Google reCaptcha en su versión 3.0

Deja una respuesta Cancelar la respuesta