Expresiones Regulares

14-3-2020

La expresión regular (que es un patrón) es un objeto en Javascript y puede ser creado en dos formas

//forma literal
var xyz = /aqui va la expresion en RegEx/

//forma objeto propiamente dicho
var xyz = new RegExp()

Un buen sitio para probar las Expresiones Regulares ante sde meterlas en nuestro código es www.regex101.com

Algunas pautas:

Las FLAGS van por fuera de la expresión regular, es decir, por fuera de las barras, por ejemplo /..../i significa case insensitive, /...../g global.

Si es global busca por todas las veces que aperece un patrón, y no sólo la primera.

/abc/ son caracteres literales, es decir, buscar exactamente "abc"

El punto es comodín, por ejemplo /a.b/ busca a, cualquier caracter, y luego b.

Para escapar un caracter literal uso la barra invertida \, por ejemplo /a\.c/ busca "a.c"

 

Caracteres de Posición

El caret ^ indica que el patrón debe comenzar con eso, mientras que $ significa que debe terminar así.

Caracteres de Cantidad

{} el número que metemos allí nos dice cuántas veces debe repetirse, por ejemplo c{2} la letra c debe aparecer dos veces.

El símbolo siempre aplica al caracter inmediato anterior, excepto si usamos paréntesis: en este caso aplica al conjunto, por ejemplo:

a{2} : busca aa

(ac){2} : busca acac

{2,5} Indica rango, busca caracteres que aparezcan de 2 a 5 veces.

{3,} Rango abierto: Para buscar caracteres que aparezcan 3 o más veces

{0,3} Busca que el patrón aparezca un mínimo de 0 elementos hasta 3 veces

La barra | es OR (sólo usamos ésa, & no significa nada). Por ejemplo (a.c | a.d)

 

Reemplazos:

{0,1} busca uno o ningún caracter puede reemplazarse por ?

{0, } ninguna o n cantidad de apariciones puede reemplazarse por *

{1, } al menos 1 aparición puede reemplazarse por +

 

Otros rangos:

[0-9] de 0 a 9 números

[123] puede ser 1 ó 2 ó 3

[0-3 7-9] puede ser 0 ó 1, ó 2 ó 3, ó 7, 8 ó 9, es decir, números del 0 al 3 ó del 7 al 9

[0-5][0-5] Dos números del 0 al 5 cada uno

 

Formas abreviadas de buscar:

[a-z A-Z 0-9 _] puede reemplazarse por \w (cualquier letra minúscula, o mayúscula o número o guión bajo)

[0-9] \d (sólo números)

 

Con el cater delante, entre corchetes significa negación

[^a-z A-Z 0-9 _] puede reemplazarse por \D (que NO contenga ni letra minúscula, o mayúscula o número o guión bajo)

[^0-9] \D (que NO contenga números)

 

Los caracteres especiales dentro de un rango no necesito escaparlos. Por ejemplo [0-9 ? .] busca un número ó el signo ? ó el punto.

 

Validación del formulario con Expresiones Regulares

let form = document.querySelector('form')
let input = document.querySelector('input')

form.addEventListener('submit', e => {
    e.preventDefault()
    let valor = input.value

    let miRegExp = /^\w+@\w+\.(com|org|edu|net)(\.[a-zA-Z]{2})?$/  //(busca un email)
    if(miRegExp.test(valor)) {
        console.log('El valor ingresado es', encodeURIComponent(valor) )
    }
    else {
        console.log('error de validación de campo')
    }

 

.test() es un método del objeto de la expesión regular que simplemente testea si la expresión es TRUE (encontró el patrón) o FALSE (no lo encontró).

encodeURIComponent() es un método que remueve caracteres extraños para evitar injections.

 

Cómo sería la validación sin RegEx?

let form = document.querySelector('form')
let input = document.querySelector('input')

form.addEventListener('submit', e=>{
   e.preventDefault()
   let valor = input.value
   let valorConTrim = valor.trim()
   let longitud = valorConTrim.length
   //console.log(`[ ${valorConTrim} ]`, longitud)

if(longitud){
   //let hayEspacio = valorConTrim.indexOf(' ') != -1
   let hayEspacio = valorConTrim.includes(' ')
   //console.log(hayEspacio)

   if(!hayEspacio){
      console.log( 'El valor ingresado es ' + encodeURIComponent(valorConTrim) )
   } else {
      console.log('no se permiten espacios')
   }
   } else {
      console.log('debes completar el campo')
   }

})

Buscar caracteres en un string determinado:

En JS5 se usaba el método .indexOf() para buscar caracteres. Este método nos devuelve el índice donde lo que buscamos aparece. Si no encuentra nada devuelve -1. Si encuentra algo devuelve el índice.

En JS6 usamos el método .includes() que devuelve TRUE si encuentra lo que buscamos o FALSE si no lo encuentra.