Expresiones Regulares

por Máximo Guando · Publicada mayo 21, 2018 · Actualizado agosto 21, 2019

Las Expresiones Regulares en JavaScript son patrones que se utilizan para realizar restricciones como por ejemplo cuando aplicamos restricciones de correo electrónico en un formulario

Cuando empezamos a programar en muchos de los casos empezamos a memorizar expresiones y pasos que inicialmente nos resultan muy tediosos, pero que a medida vamos avanzando notamos que nos permiten ejecutar acciones simples y prácticas. Quizás recuerdes la primera vez que aprendiste a cerrar una ventana con la combinación de teclas (ALT + F4), nos resulto muy difícil no? pero luego nos fuimos a costumbrando a su uso y resulta ahora muy aplicarlo, es algo muy similar estos procesos, y en especial este tema nuevo de nombre Expresiones Regulares.

Tabla de contenido:

¿Qué son las expresiones regulares?

Una expresión regular es un patrón que se emplea para crear patrones con un grupo de caracteres y compararlos con otros datos.

Una expresión regular definida en términos técnicos vendría hacer el formato que debería de cumplir un determinado String.

Para los programadores, esas expresiones regulares facilitan su labor en un solo paso.

Ejemplo:

Un ejemplo muy sencillo sería la comprobación de ingreso de datos en un formulario que tendría que realizar un usuario para determinar si son correctos o no, teniendo en cuenta ello; podríamos determinar se muestre un mensaje de error en caso el dato ingresado no coincida o el capo se encuentre en blanco. La forma rápida de comprobarlo es a través de una expresión regular.

Fuente: mentoringit.com.mx

Otro caso muy básico sería si deseamos buscar dentro de la carpeta descargas todas las imágenes JPG, podemos escribir dentro de la caja de búsqueda *.jpg

Lo que acabamos de realizar es una expresión regular, es un patrón pues mediante él podemos buscar lo que deseamos.

Tambien se podría llevar a cabo si en el buscador google deseamos buscar todos los archivos que lleven la extensión PDF de un determinado tema:

Validación de Formularios en HTML 5

Aunque en la actualidad HTML5 esta trabajando mucho en la validación de formularios pues permite trabajar con tipos de datos y añadir un dato requerido, aún así hay navegadores que no le soportan y datos que aún falta trabajarlo aún más, como es el caso de texto.

Por ejemplo si deseamos validar el ingreso de datos de sólo caracteres de textos en un campo Nombre, no lo podríamos realizar tan facilmente.

Nombres y Apellidos <input type="text" required>

Como si se podría llevar con el correo electrónico (aunque si analizamos bien tambien tendriamos problemas pues no permite validar el .(punto) despues del @ (para añadir la extensión o pais)

Correo Electrónico <input type="email" required>

Declarando las expresiones regulares

JavaScript tiene 2 maneras de como nosotros podemos declarar nuestras expresiones regulares

Primero: Utilizando una expresión literal

La representación literal compila la expresión regular una vez que el script ha terminado de cargar.

Si después de la doble barra ingresamos un texto entonces estaríamos considerando un comentario y ya no una expresión regular, sin embargo si ingresamos la regla dentro de las barras allí si estaríamos estableciendo la expresión regular.

Es recomendable utilizar esta representación cuando la expresión regular permanecerá sin cambios durante la ejecución del script.

var ExprNombre=/JavaScript/;

Segundo: Constructor del objeto RegExp

El uso del constructor ofrece una compilación de la expresión regular en tiempo de ejecución.

Este método recibe en paréntesis (String) la expresión regular que deseamos evaluar.

Su uso es recomendable en aquellos escenarios en que el patrón de la expresión regular pueda cambiar durante la ejecución del script, una de las desventajas en comparación de la anterior, no reconoce el carácter de escape ( \ ).

var ExprNombre= new RegExp("JavaScript");

Ejemplo de uso

Para los ejemplos que plantearé en adelante utilizaré la primera alternativa

function proceso(){
    var curso="estamos aprendiendo JavaScript en este curso";
    var ExprNombre=/JavaScript/;
    if(!ExprNombre.test(curso)){
      alert("No contiene la palabra JavaScript");
      return 0;
    }else{
      alert("Gracias, si contiene");
      return 0;
    }
  }

Metacaracteres: Comodin

Dentro de los cuales tenemos:

Sustitución

Son los que definen que caracter esperamos se cumpla en un determinado lugar del patron, dicho caracter deberá mostrarse al menos una única vez

. (punto)

permite cualquier caracter o simbolo

Ejemplo: Deseamos crear una expresión regular que valide el ingreso de la palabra Perú ó Peru (puede tener tilde o no)

var ExprPais= /Per./;

Vemos que con el punto me indica que puede ser cualquier caracter o símbolo sin interesar el valor

[] corchetes

Así como la declaración basica en JavaScript se utiliza declarar un array. Considera los valores ordenados de menor a mayor u ordenados alfabeticamente en forma ascendente

Ejemplo 1: Se declara una expresión regular donde permita el ingreso de letras minúsculas de a hasta z, en el ejemplo utilizamos el guión para expandir las alternativas (rango de opciones), puede aplicarse también a números.

var ExprCodigo= /[a-z]/;

Ejemplo 2: se declara la expresión regular que evalúe el ingreso de alumnos ó alumnas (la diferencia esta entre la a ó o. Cuando no usamos el guión consideramos que puede ir cualquiera de las alternativas

var ExprEstudiante= /alumn[ao]s/;

Ejemplo 3: También podría aplicarse a casos mixtos. En el siguiente caso considera que hay un rango de a hasta la g pues hay un guión medio y para el siguiente caracter xyz que no tiene guión los toma como valores independientes.

var ExprCodigo= /[a-gxyz]/;

Ejemplo 4: Otro caso que también lo podríamos aplicar sería

var imagen="imagen001";

  var ExprImagen=/imagen00[1-9]/;

(opcion1|opcion2|opcion3)

Se utiliza para evaluar si uno de los casos cumplen, los paréntesis se utilizan para evaluar por palabras (string completo) a diferencia de los corchetes que se utilizan por array.

Ejemplo: Se evalúa mediante una expresión regular el ingreso de uno de los países:

var ExprPaises=/(Peru|Colombia|Argentina)/;

Cantidad

Se utilizan para definir cuantas veces aparece ese caracter que estamos evaluando

*(asterisco)

Indica que lo que se encuentra antes del asterisco (punto, corchete, paréntesis, caracter) puede estar, no puede estar, puede repetirse.

Ejemplo: Evaluamos si un elemento tiene: alumnos, alumnas, alumno, alumna, profesores, profesoras, profesoras

var ExprEvaluar=/(alumn[ao]s*|profesor(ao)s*)/;

+ (mas)

Lo que esta antes del símbolo tiene que estar una vez como mínimo

Ejemplo 1: Se desea evaluar el ingreso de un usuario del rango de az sin importar mayúsculas ó minúsculas, y obligatoriamente se ingrese un caracter.

var ExprCodigo= /[a-z]+/i;

{} (llaves)

Determina la cantidad exacta que se repite determinado caracter.

Aquí se tiene 3 combinaciones posibles

{numero} : el numero que esta entre los corchetes muestra la cantidad exacta a mostrarse

{numero1,numero2} : el numero de veces que deberá mostrarse debe estar en el rango de numero1 y numero2

{numero,} : el numero minimo a mostrarse es el valor numero.

Atajos \

\w

Representa cualquier caracter alfanumérico (deberá ser a-z A-Z 0-9 _ )

\d

Representa sólo números [0-9]

Ejemplo: en la caso de las imágenes se podría llevar a cabo

var imagen="imagen001";

var ExprImagen=/imagen00\d/;

\s

Representa cualquier símbolo de espacio (espaciadora, tab, enter)

\b

Representa cualquier delimitador de palabras, que pueden ser (espaciadora, tab, enter, punto, coma, punto y coma, comillas, parentesis) todo valor que sirva para representar un final de texto

Ejemplo: validar el texto curso

var ExprEvaluar=/\bcurso\b/;

Ahora si en el caso de los atajos los caracteres después de las barras se añade en mayúsculas se estarían negando

\W

Representa la negación de cualquier caracter alfanumérico (deberá ser a-z A-Z 0-9 _ )

\D

Representa la negación de números [0-9]

\S

Representa la negación de cualquier símbolo de espacio (espaciadora, tab, enter)

\B

Representa la negación de cualquier delimitador de palabras, que pueden ser (espaciadora, tab, enter, punto, coma, punto y coma, comillas, parentesis) todo valor que sirva para representar un final de texto

Modificadores

/i

es case insensitive, es decir no va a diferenciar las mayúsculas ó minúsculas

Ejemplo 1: Se desea evaluar el dato profesor ó profesores sea mayúscula ó minúscula

var ExprEvaluar=/profesor(es)?/i;

Delimitadores de Inicio ó Fin de Expresión Regular

^ (Inicio de Expresión Regular)

Indica que antes de la regla no puede haber ningún valor ó caracter

$ (Fin de Expresión Regular)

Indica que después de ese símbolo no puede haber nada

Ejemplo 1: Validar para que el dato ingresado sea un caracter mayúscula ó minúscula

var ExprValor=/^\w$/i;

Casos practicos desarrollados

Ejercicio 01

Expresión regular que valida caracteres minúsculas ó mayúsculas cuya cantidad sea de 3 a más

var ExprValor=/^[a-z]{3,}$/i;

Ejercicio 02

Expresión regular que valida el envio de archivos PDF, ODT, DOCX/DOC

En el HTML establecemos:

Luego en el JavaScript

var archivo=document.getElementById("archivo").value;
  var ExprFile=/\.(pdf|odt|docx?)$/;
  if(!ExprFile.test(archivo)){
    alert("El archivo no es válido");
  }
  else{
    alert("Gracias por enviar su CV");
  }

Ejercicio 03

Expresión regular, para validar el ingreso a una caja de texto de solo números 0-9

var numeros = /^[0-9]+$/;

Ejercicio 04

Expresión regular, que acepta letras minúsculas, mayúsculas y espacios en blanco.

var letrasMayusMinus=/^[a-zA-Z\s]+$/;

Ejercicio 05

Expresión regular, para validar algunos caracteres latinos [áÁéÉíÍóÓúÚñÑüÜ]

var caracteresLatinos = /^[áÁéÉíÍóÓúÚñÑüÜ]+$/;

Ejercicio 06

Expresión regular, para validar un correo electrónico valido

var email = /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/;

Ejercicio 07

expresión regular, para validar fechas de formato: 20/06/2018

var fecha = /^([0-9]{2}\/[0-9]{2}\/[0-9]{4})$/;

Ejercicio 08

Expresión regular, para validar número telefónico de 9 dígitos ejemplo: 956658883

var numTel = /[0-9]{9}$/;

Ejercicio 09

Expresión regular, para validar DNI ejemplo: 44553311

var dni = /[0-9]{8}$/;

Ejercicio 10

Expresión regular, Tarjetas de crédito MASTERCARD

var mastercard = /^(^5[1-5][0-9]{2}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/;

Ejercicio 11

Expresión regular, Tarjetas de crédito VISA

var visa = /^4[0-9]{3}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/;

Les comparto una imagen que encontré en Internet y que resume lo explicado

Fuente: cursos.mejorcodigo.net

Si deseas comprobar tu expresión regular te recomiendo visitar la siguiente web

Espero que este nuevo artículo te haya gustado, nos vemos hasta la próxima.