EXPRESIONES REGULARES (REGEX) EN JAVASCRIPT
Son plantillas o patrones de caracteres que, en comparación con otro conjunto dado, crearán o no una coincidencia. Las expresiones regulares se consideran objetos. Daré unos ejemplos abajo según la aplicación, o lo que se necesite realizar. En este vínculo se expanden esos conceptos.
Los REGEX son contenedores útiles para detectar patrones en datos alfanuméricos, para validar datos que se ingresen mediante campos de texto o evaluar si existen o no los rangos pedidos en un conjunto más grande de números o letras.
Daré unos ejemplos abajo según la necesidad. En este vínculo se expanden esos conceptos.
Para hallar la primera coincidencia del primer caracter en un conjunto de caracteres dados y recibir datos de ubicación e índice, entro otros
/[a-zA-Z]/ busca cualquier caracter literal (no numérico) desde un conjunto de caracteres mayúsculas o minúsculas. Mientras que el método match() realiza la búsqueda. Lo entregado es un arreglo con los datos de caracter, índice, entro otros.
En Javascript
let buscar = "ABcdFG 1111 111";
console.log(buscar.match(/[a-zA-Z]/));
/*
[ 'A', --> la primera coincidencia
index: 0, --> su ubicación
input: 'ABcdFG 1111 111', --> de dónde lo tomamos
groups: undefined ] --> No se capturaron grupos de strings
*/
Para hallar solo la primera coincidencia del primer caracter en un conjunto de caracteres literales y numéricos dados, pero solo recibir el caracter hallado, sin más datos
match() solo halla y entrega el primer caracter hallado, sin más datos.
En Javascript
let a = "2211duduromeroa111";
let res = a.match(/[a-zA-Z]/);
console.log(res[0]);
// d
let b = "**///()DDudu213132123";
let res1 = b.match(/[a-zA-Z]/);
console.log(res1[0]);
// d
let c = "___dDudu----- ";
let res2 = c.match(/[a-zA-Z]/);
console.log(res2[0]);
// d
Para hallar una coincidencia desde el inicio de un conjunto de caracteres dados, y enviar booleano
/^xxx/ con '^' exige que la coincidencia sea desde el inicio de los caracteres. El método .test() aplica la búsqueda entre el conjunto que se pide coincidir y el conjunto donde se debe buscar.
En Javascript
// Para hallar una coincidencia de inicio
var conjunto = "1233334Dudu";
var evaluarContenido = /^123/;
console.log(evaluarContenido.test(conjunto));
// True
if (evaluarContenido.test(conjunto)) {
console.log("Sí inicia con 123");
} else {
console.log("No inicia con 123");
}
// Sí inicia con 123
Para hallar mediante booleano una coincidencia de números de entre un conjunto de números dados.
La coincidencia pide dos valores [ [primero][segundo] ]. Primer dígito debe ser: [1-9] en ese rango, pero deberá obviar el cero. El segundo dígito debe ser: [0-9] entre 0 a 9.
En otras palabras, se pide un par de números que no inicie en cero, y que solo tenga un rango de entre 1 a 9. Si el resultado es true, entonces halló una coincidencia (halló el valor 20).
En Javascript
// El conjunto
var conjunto = "0020102";
var evalCoincidencia = /[1-9][0-9]/;
console.log(evalCoincidencia.test(conjunto));
// True
Para hallar mediante booleano una palabra entre un conjunto de palabras dadas
/\bxxx\b/ los literales \b\b definen posición de límite de búsqueda entre los caracteres (en este caso, en una palabra dada). El literal /i validará cualquier estilo en altas o bajas, en toda la extensión del conjunto de strings.
En Javascript
var elConjunto = "La batalla del Pichincha de 1824";
var loDeseado = /\d+/g;
// ¿Lo que se busca está en el conjunto?
console.log(loDeseado.test(elConjunto));
// TRUE
var conjunto0 = "Dudu le gusta JAVAscript";
var evalCoincidencia0 = /\bjavascript\b/i;
console.log(evalCoincidencia0.test(conjunto0));
// True. Hay coincidencia entre javascript y JAVAscript
var conjunto1 = "Dudu le gusta JaVASCripT";
var evalCoincidencia1 = /\bjavascript\b/i;
console.log(evalCoincidencia1.test(conjunto1));
// True. Hay coincidencia entre javascript y bajas
var conjunto2 = "Dudu le gusta javaSCRipT";
var evalCoincidencia2 = /\bjavascript\b/i;
console.log(evalCoincidencia2.test(conjunto2));
// True. Hay coincidencia entre javascript y javaSCRipT
Para hallar y entregar solo los caracteres numéricos (llamados dígitos, uno o más) en un conjunto alfanumérico variado
En /\d+/g el caracter \d busca cualquier dígito entre 0 a 9. El signo + buscará más de un dígito. Y /g permite mostrartodas las coincidencias, no solo la primera.
En Javascript
var conjunto = "La batalla del Pichincha de 1824";
var evaluaRegEx = /\d+/g;
console.log(conjunto.match(evaluaRegEx));
// [ '1824' ]
var conjunto1 = "La b1tall4 del P1chincha de 1824";
var evaluaRegEx = /\d+/g;
console.log(conjunto1.match(evaluaRegEx));
// [ '1', '4', '1', '1824' ]
var conjunto2 = "Pichincha1824";
var evaluaRegEx = /\d+/g;
console.log(conjunto2.match(evaluaRegEx));
// [ '1824' ]
Para hallar tramos de caracteres entre conjunto de caracteres con 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:
- Las expresiones regulares (Regex) es sensible a las letras mayúsculas o minúsculas. Es decir, buscará el patrón exacto en dato.
- 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
Para hallar uno de los tramos de caracteres mediante una tríada de opciones
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 tramos de caracteres según una tríada de opciones dada
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";
// PANAMA es una palabra arbitraria.
// Solo se pide buscar la 'e'
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