Introducción a expresiones regulares (RegEx) en JS

Breve introducción a las reglas para utilizar expresiones regulares en JavaScript

Publicado el: 4 de Febrero 2018 por Victor de Andrés Archivado en: Desarrollo | Fundamentos | Javascript
regular expresion

En este post voy a realizar una introducción a las expresiones regulares desde el punto de vista para un desarrollador de Javascript. Esas expresiones que parecen algo incompresibles y complicadas pero que nos pueden ayudar ahorrar mucho tiempo si sabemos utilizarlas.

Que son las expresiones regulares.

Una expresión regular es sólo un tipo de objecto, recuerda que en Javascript todo son objetos, que se utiliza para unir combinaciones de caracteres en cadenas. Como algo tan sencillo puede parecer tan complicado.

Manos a la obra.

Una vez hemos visto la definición de que es una expresión regular vamos a empezar a crearlas. Y para ello tenemos dos formas:

A través de una expresión regular. Usando las barras ‘/’ para contener el patrón.

      
  const pattern = /foo/
      
    

O desde un constructor:

      
  const pattern = new RegExp(‘foo’)
      
    

En ambos ejemplos ambos patrones son iguales: Primero se buscará la letra f, seguida de la o en dos ocasiones.

Aunque los dos patrones son iguales, yo utilizo la siguiente regla cuando los defino. Si es un patrón constante utilizo una constante y si el patrón es dinámico, a continuación veremos como crearlos, utilizo un constructor.

Métodos expresiones regulares.

Como he indicado anteriormente las expresiones regulares son objetos, por ello tienen sus propios métodos. Que en este caso son los siguientes: exec(), test() y toString(). De estos tres métodos el que utilizaremos habitualmente será test() que nos devolvera un verdadero o falso si el patrón que evaluamos se encuentra en una cadena.

Pero veamos este método con un sencillo ejemplo:

      
    const str1 = ‘El caballo blanco de santiago’;
    const str2 = ‘El caballo negro de santiago’;
    
    const hasBlanco = /blanco/;
    hasBlanco.test(str1);	// true
    hasBlanco.test(str2);	// false        
      
    

Patrones dinámicos.

Como comente anteriormente además de expresiones fijas, también podemos crear patrones dinámicos.

A continuación adjunto una pequeña guía con algunas de las reglas para crear los patrones dinámicos de las expresiones regulares.

Simbolos:

  • . (punto): cualquier carácter, sólo uno, excepto la saltos de línea,
  • * : cualquier expresión 0 o más ocasiones,
  • +: cualquier expresión 1 o más ocasiones,
  • ?: la expresión anterior es opcional ( coincide 0 o 1 ocasión),
  • ^: Marca el inicio de la cadena,
  • $: marca el final de la cadena.

Grupos:

  • \d: cualquier carácter decimal [0-9],
  • \w: cualquier carácter alfanumérico además del guión bajo,
  • [ABC]: cualquiera de los caracteres contenidos corchetes. También se puede indicar un rango: [A-C],
  • [^ABC]: El símbolo ^ dentro de una cadena de caracteres se utiliza como negación,
  • (ABC): patrón exacto dentro de los paréntesis.

Modificadores:

  • g: busqueda global,
  • i: la busqueda no es case sensitive, no distingue entre mayusculas o minusculas,
  • m: busca varias veces el patrón.

Algunos ejemplos sencillos.

Una vez hemos visto algunas de las reglas para formas patrones dinámicos vamos a ver unos cuantos ejemplos sencillos para entenderlos mejor.

Vamos a seguir el orden en el cual hemos visto las reglas. Por ello vamos a empezar a trabajar con los números.

Evaluemos la siguiente expresión:

      
  console.log(/\d/.test(‘12-12’)); // true        
      
    

En este ejemplo estamos buscando simplemente un número. Al igual que en el siguiente ejemplo donde mezclaremos números y letras.

      
  console.log(/\d/.test(‘1A-2B’)); // true      
      
    

Pero hagamos lo un poco más complicado, vamos a validar un formato telefónico que tiene que ser tres grupos de tres números separados por un espacio.

      
  console.log(/\d \d \d/.test(‘600 789 456’));             // false
  
  console.log(/\d\d\d \d\d\d \d\d\d/.test(‘600 789 456’)); // true
      
    

Fijate en la diferencia, en este caso en la primera de las consultas estamos buscando un patrón que es un dígito un espacio un dígito un espacio y finalmente un dígito. Pero lo que nosotros buscamos son patrones de tres dígitos unidos separados por un espacio. Por ello hemos utilizado la expresión \d en tres ocasiones seguida de un espacio. Pero podemos hacer este patrón un poco más sencillo con el asterisco.

      
  console.log(/\d* \d* \d*/.test(‘600 789 456’)); // true
      
    

El patrón de búsqueda es el mismo pero en esta ocasión indicamos el que el grupo de dígitos tiene que ser mayor que 0. Esto nos podría dar un falso positivo, ya que la siguiente evaluación también sería positiva y no es el patrón que estamos buscando.

      
  console.log(/\d* \d* \d*/.test(‘6007 89 456’)); // true
      
    

Es por ello que debemos ser muy cuidadosos al generar los patrones porque podemos obtener falsos positivos.

Ahora hagamos algunos ejemplos un poco más complicados con cadenas, además utilizaremos los paréntesis para agrupar expresiones dentro de nuestro patrón de búsqueda.

Vamos a practicar con el siguiente texto ‘Golgolgoooooooooool’.

      
  console.log(/(gol)+/.test(‘Golgolgoooooooooool’));	// true
      
    

Ya que en esta caso estamos buscando el patron ‘gol’ (gol)+ por lo menos en una ocasión dentro de la cadena que estamos analizando.

Ahora veamos un ejemplo con el simbolo *

      
  console.log(/(fol)(gol)+/.test(‘Golgolgoooooooooool’));	// false

  console.log(/(fol)*(gol)+/.test(‘Golgolgoooooooooool’));	// true
      
    

En la primera ocasión obtenemos el resultado false ya que nuestro patrón indica que debemos buscar ‘fol’ seguido de ‘gol’ por lo menos en una ocasión. Pero en el segundo test estamos recibiendo true. ¿ Como es eso posible ?, si en nuestra cadena no existe ‘fol’. Esto es debido a que hemos añadido después del patrón ‘fol’ el símbolo del asterisco. Que nos indica que ese patrón tiene que aparecer en 0 o más ocasiones. Por ello el resultado es true.

Sigamos jugando con los simbolos, ya hemos visto el + y el *. Ahora vamos a testar los simbolos ^ y el $.

      
  console.log(/(ooo)/.test(‘Golgolgoooooooooool’));	// true

  console.log(/^(ooo)/.test(‘Golgolgoooooooooool’));	// false
      
    

En el primer test, hemos buscado un patrón compuesto por tres o consecutivas, que es correcto. Y en el segundo hemos utilizado el símbolo ^ antes del patrón de las tres oes consecutivas, que indica que tiene que ser el principio de la cadena. En este caso estamos recibiendo false ya que nuestra cadena no comienza con tres oes consecutivas si no con gol.

      
  console.log(/[A-Z]ol$/.test(‘Golgolgoooooooooool’));	// false

  console.log(/[A-Z]*ol$/.test(‘Golgolgoooooooooool’));	// true
      
    

En el primer caso la respuesta es negativa porque en nuestro patrón indicamos un carácter entre la A y la Z y que finalize en ol. Pero solo le hemos indicado un carácter, por eso obtenemos false. Pero cuando añadimos el símbolo * después de [A-Z] estamos indicando que busque en 0 o más ocasiones el carácter [A-Z]. Entonces nuestra cadena ya corresponde con el patrón.

Como has podido ver las reglas básicas son muy sencillas, sólo hay que practicar un poco para obtener toda las ventajas de trabajar con las expresiones regulares. Si quieres practicar te recomiendo la siguiente página: https://regex101.com/ donde podrás practicar el uso de las expresiones regulares además de obtener explicación de todas las reglas que estas utilizando. Una página muy útil para comprobar que tus patrones son correctos.

Comentarios
Escribe tu comentario