EXPRESIONES REGULARES (REGEX) EN JAVASCRIPT
Función match()
Es un contenedor útil para detectar patrones en datos alfanuméricos, para validar datos que se ingresen mediante campos de texto y para apuntar o reemplazar caracteres:
- Regex es sensible a las letras mayúsculas o minúsculas. Es decir, buscará el patrón exacto en dato y estilo.
- Si ninguna coincidencia es hallada, resultará en null.
En Javascript
// Buscar coincidencias desde este string
let buscar = "Quiero encebollado";
// Detecta la coincidencia SOLO si NO inicia con minúscula
console.log(buscar.match( /encebo/ ));
// Resultado en forma de objeto
/* [ 'encebo',
index: 7,
input: 'Quiero encebollado',
groups: undefined ] */
/* Detecta la coincidencia sin importar
si inicia con mayúscula o minúscula (se añade 'i' al final) */
console.log(buscar.match( /quiero/i ));
// Resultado en forma de objeto
/* [ 'Quiero',
index: 0, input: 'Quiero encebollado',
groups: undefined ] */
console.log(buscar.match( /8787/i ));
// null
En otro ejemplo se definen tres opciones de patrones y hallar así una de esas coincidencias:
En Javascript
// Buscar coincidencias desde este string
let buscar = "Quiero encebollado";
/* Busca una de esas tres opciones alfanuméricas
SIN importar que inicien o no en mayúscula*/
// /patron | patron | patron/i
console.log(buscar.match(/encebo|qui|react/i));
// Resultado
/* [
'Qui',
index: 0,
input: 'Quiero encebollado',
groups: undefined ]
*/
Para hallar todas las coincidencias y no solo una, se agrega el operador 'g' al final; y si deseamos la búsqueda no sea sensible a mayúsculas, agregamos el operador 'i'. El resultado será un arreglo con las coincidencias:
En Javascript
// Buscar coincidencias desde este string
let buscar = "Quiero Encebollado";
console.log(buscar.match(/Qui|encebo|ado/gi));
// [ 'Qui', 'encebo', 'ado' ]
Por otro lado, para hallar un solo caracter dentro de un string se usa la sintaxis /[patron_A_buscar]/
En Javascript
// Buscar SOLO UNA coincidencia de caracter
let buscar = "Quiero Encebollado";
console.log(buscar.match(/[ePANAMA]/));
// Solo la ubicación del primer caracter hallará
/* [ 'e',
index: 3,
input: 'Quiero Encebollado',
groups: undefined ] */
Si se desea hallar un patron dentro de un rango de caracteres se aplicará la sintaxis /[patron-patron]/.
En Javascript
// Buscar SOLO UNA coincidencia de caracter
let buscar = "c";
// Hallar un caracter dentro de este rango
console.log(buscar.match(/[a-d]/));
/* [ 'c',
index: 0,
input: 'c',
groups: undefined ] */
Y si deseamos hallar coincidencias tanto de mayúsculas y minúsculas:
En Javascript
// Buscar SOLO UNA coincidencia de caracter
let buscar = "ABcdFG";
// Hallar un caracter dentro de este rango
// a-z(minúsculas) y A-Z(mayúsculas)
console.log(buscar.match(/[a-zA-Z]/));
/* [ 'c',
index: 0,
input: 'c',
groups: undefined ] */
Para hallar coincidencias numéricas:
En Javascript
// Buscar SOLO UNA coincidencia de caracter
let buscar = "ab123";
/* Hallar la coincidencia del primer número entre el 0 al 9 */
console.log(buscar.match(/[0-9]/));
/* [ '1',
index: 2,
input: 'ab123',
groups: undefined ] */
O para hallar y mostrar todos los elementos/caracter del arreglo:
En Javascript
// Buscar SOLO UNA coincidencia de caracter
let buscar = "Viva Guayaquil";
/* Hallar la coincidencia del primer número entre el 0 al 9 */
console.log(buscar.match(/./g));
/*
[
'V', 'i', 'v', 'a',
' ', 'G', 'u', 'a',
'y', 'a', 'q', 'u',
'i', 'l'
]
*/
Y para hallar únicamente un tipo de valor. En este caso, solo los numéricos:
En Javascript
// Buscar SOLO UNA coincidencia de caracter
let buscar = "Viva 2023";
/* Mostrar en un arreglo únicamente los dígitos*/
console.log(buscar.match(/\d/g));
/*
[ '2', '0', '2', '3' ]
*/
Para extraer solo los espacios en blanco de un string:
En Javascript
// Buscar SOLO UNA coincidencia de caracter
let buscar = "Viva 2023";
/* Mostrar en un arreglo únicamente los dígitos*/
console.log(buscar.match(/\s/g));
/*
[ ' ' ]
*/
Para extraer solo el PRIMER conjunto de caracteres de un string se usa el operador 'b' y enseguida los caracteres a coincidir. En este caso son los caracteres 'be':
En Javascript
// Buscar SOLO UNA coincidencia de caracter
let buscar = "bebé quiere teta";
/* Mostrar solo el conjunto de caracteres
que inicien con la palabra 'be' */
console.log(buscar.match(/\bbe/gi));
/*
[ 'be' ]
*/
AGRUPAR COINCIDENCIAS CON REGex
Debemos tener en cuenta que con el siguiente código se busca que la coincidencia ocurra con uno o ambos strings (la barra vertical indica el valor booleano de 'o': quiero, o pan).
En Javascript
let buscar = "quiero encebollado con pan";
/* Buscar una o ambas coincidencias */
console.log(buscar.match(/(quiero|pan)/gi));
// [ 'quiero', 'pan' ]
En cuanto a las coincidencias agrupadas se activará y se mostrará una siempre que al menos haya una coincidencia en el primer grupo de paréntesis. Sino, el sistema dará 'null', es decir; que no se halló coincidencias.
En Javascript
let buscar = "aAA bBB CCc dDd";
/* Hallar al menos una coincidencia de cada
grupo de paréntesis. En todo el string
(operador 'a'; y sin importar que sean
minúsculas o mayúsculas) */
console.log(buscar.match(/(aaa|xxx)\s(ooo|bbb)/gi));
/* En el primer grupo sí se halló UNA coincidencia.
En el segundo grupo también se halló UNA coincidencia. */
// [ 'aaa bbb' ]
console.log(buscar.match(/(lll|xxx)\s(aaa|bbb)/gi));
/* En este caso, como no existe coincidencia
en el primer grupo, ya no se busca más */
// null
Por otro lado, si se desea hallar la cantidad de veces de coincidencias de caracteres en una secuencia dada; o ubicar la presencia de uno de esos caracteres, usaremos el operador '?':
En Javascript
let buscar = "Quiero engordar comiendo encebollado";
/* Hallará solo aquellas coincidencias
que contengan la letra 'i' y la letra 'e' juntas */
// Buscará en todo el string (operador 'g')
// Sin importar que sea mayúsculas o minúsculas (operador 'i')
console.log(buscar.match(/i?e/gi));
// [ 'ie', 'e', 'ie', 'e', 'e' ]
También para hallar las veces que una coincidencia se repite, se aplica la sintaxis de grupo (paréntesis) junto con el signo '+':
En Javascript
let buscar = "Quiero engordar quiero comer quiero dormir";
/* Hallará solo aquellas coincidencias
que contengan la letra 'i' y la letra 'e' juntas */
// Buscará en todo el string (operador 'g')
// Sin importar que sea mayúsculas o minúsculas (operador 'i')
console.log(buscar.match(/(quiero)+/gi));
// [ 'Quiero', 'quiero', 'quiero' ]
COMBINAR MÉTODOS DE STRINGS CON REGEX
Combinar métodos strings junto con la búsqueda de coincidencias mediante las expresiones regulares permite ampliar el poder de búsqueda y reemplazo. En el código inferior muestra la primera ubicación del string 'loca':
En Javascript
let buscar = "Gringa loca gringa loca
fuiste tu la que se quiso casar";
/* Para buscar una porción
de texto en todo el string ('g')
sea o no mayúscula o minúscula ('i') */
console.log(buscar.search(/loca/gi));
/* Se muestra el índice en donde
se halla la primera letra de la porción dada para hallar */
//-> 7
En otro ejemplo se reemplaza una porción de texto por otra:
En Javascript
let buscar = "Gringa loca fuiste tu la que se quiso casar";
/* Se pide reemplazar el string 'loca' por el string 'alemana' */
console.log(buscar.replace( /loca/g, "alemana"));
/* -> Gringa alemana gringa alemana
fuiste tu la que se quiso casar */
En otro ejemplo se valida mediante RegExp si un ingreso tipo email es correcto o no:
En Javascript
/* VALIDAR UN INGRESO DE MAIL */
/* OJO. Todo debe estar unido, sin espacios. Sino resulta en 'null' ambos */
let evaluarMail = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/g;
let validEmail = "duduromeroa@gmail.com";
let invalidEmail = "dudud@@com";
console.log( validEmail.match(evaluarMail) );
// [ 'duduromeroa@gmail.com' ]
console.log( invalidEmail.match(evaluarMail) );
// null