duduromeroa.com

#Javascript, #DOMJs, #webinteractiva, #Interfaces, #duduromeroa, #Guayaquil

Javascript

Programación para web: Javascript API DOM 6


George Póyla, matemático. Resolver problemas de diseño. www.duduromeroa.com

Por Eduardo J. Romero Andrade
| Guayaquil

Contenido

Expresiones regulares





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


BIBLIOGRAFÍA:
    3ra edición. 2018. Marijn Haverbeke. No starch press.
    [2] MDN Web Docs, Javascript. Mozilla Foundation.
    David Flanagan (2020). Editorial O'Reilly.
    Ved Antani, Stoyan Stefanov (2017). Packt Publishing.
    Editorial Packt.
    Information and Computation. Elsevier.
    ACM SIGCSE