Expresiones regulares

Una expresión regular es una técnica que nos permite identificar si un string coincide con un patrón determinado. Un ejemplo clásico es determinar si un email está correctamente tipeado (sabemos que comienza con uno o más caracteres alfanuméricos, luego el carácter @ seguido de uno o más caracteres alfanuméricos, luego el carácter '.' y finalmente otros caracteres alfabéticos)

Existe toda una serie de reglas para crear las expresiones regulares que iremos viendo.

El lenguaje JavaScript administra las expresiones regulares mediante el objeto RegExp:

Problema

Validar si se ingresa un valor entero con exactamente tres dígitos.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var valor=prompt('Ingrese un numero entero positivo de 3 dígitos','');
  var patron=new RegExp('^[0-9]{3}$');
  if (patron.test(valor))
    alert('Se ingresó un valor entero positivo de 3 dígitos');
  else
    alert('No se ingresó un valor entero positivo de 3 dígitos');
</script>
  
</body>
</html>

Ver ejemplo anterior

En este primer paso no nos importa la sintaxis dispuesta en el string que le pasamos al constructor del objeto RegExp, sino ver la sintaxis de JavaScript para crear un objeto de RegExp y seguidamente como llamamos al método test que retorna si el string 'valor' contrastado con la expresión regular definida en el objeto 'patron' verifica verdadero o falso:

  var patron=new RegExp('^[0-9]{3}$');
  if (patron.test(valor))
    alert('Se ingresó un valor entero positivo de 3 dígitos');
  else
    alert('No se ingresó un valor entero positivo de 3 dígitos');

Veremos luego que para definir expresiones regulares intervienen una serie de caracteres ^ $. * +? =! : | \ / () [] {} que tienen un significado especial en la definición del lenguaje de expresiones regulares, estos tipos de caracteres suelen llamarse metacaracteres.

El mismo problema se puede expresar utilizando una sintaxis distinta para la creación de la expresión regular (esta otra sintaxis es muy utilizada, pero en el fondo el interprete de JavaScript crea un objeto de tipo RegExp):

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var valor=prompt('Ingrese un numero entero positivo de 3 dígitos','');
  var patron=/^[0-9]{3}$/;
  if (patron.test(valor))
    alert('Se ingresó un valor entero positivo de 3 dígitos');
  else
    alert('No se ingresó un valor entero positivo de 3 dígitos');
</script>
  
</body>
</html>

Ver ejemplo anterior

Como podemos ver al definir la variable patron le asignamos una cadena encerrada entre los caracteres '/' (recordar que estamos creando un objeto de tipo RegExp):

  var patron=/^[0-9]{3}$/;

Problema

Ingresar una oración por teclado y luego imprimir un mensaje si la oración ingresada contiene la palabra 'hora'

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var oracion=prompt('Ingrese una oración','');
  var patron=/hora/;
  if (patron.test(oracion))
    alert('La oración ingresada contiene la palabra \'hora\'');
  else
    alert('La oración ingresada no contiene la palabra \'hora\'');
</script>
  
</body>
</html>

Ver ejemplo anterior

Es muy posible que este primer problema convenga utilizar el método indexOf del objeto string pero para introducir el concepto de expresiones regulares es lo más sencillo. Estamos declarando la expresión regular:

  var patron=/hora/;

Con esta definición especificamos que el patrón a comparar son los caracteres 'hora'. Luego al llamar al método test donde le pasamos el string a comparar verifica si el patrón 'hora' está contenido en alguna posición del string 'oración'.

El método test se verifica verdadero si ingresamos las siguientes oraciones:

Es hora de partir.
hora de comer.
Pasó muchas horas corriendo.
Ahora tenemos ganas de correr.

Se verifica falso si ingresamos la siguiente oración:

El niño ora.
Hora de comer.

Expresiones regulares en principio (^) y final ($) de una cadena

Los dos primeros caracteres con un significado especial en una expresión regular son: ^ principio de cadena y $ fin de cadena.

Cuando queremos controlar si un string comienza con un determinado carácter o conjunto de caracteres podemos implementar una expresión regular antecediendo al o los caracteres el símbolo ^.

Problema

Ingresar una oración y mostrar un mensaje si la misma comienza con el carácter '-'.
Otro mensaje si comienzo con la palabra 'hora'.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var oracion=prompt('Ingrese una oración','');
  var patron1=/^-/;
  if (patron1.test(oracion))
    alert('Comienza la oración con el carácter -');
  else
    alert('No comienza la oración con el carácter -');
  var patron2=/^hora/;
  if (patron2.test(oracion))
    alert('Comienza la oración con la palabra hora');
  else
    alert('No comienza la oración con la palabra hora');
</script>
  
</body>
</html>

Ver ejemplo anterior

La primer expresión regular la definimos con la siguiente sintaxis (luego del carácter ^ disponemos el carácter que debe ingresar primero el operador para que la expresión se valide correctamente):

  var patron1=/^-/;

Luego vemos que podemos disponer un conjunto de caracteres:

  var patron2=/^hora/;

Con esta expresión el operador debe ingresar los cuatro primeros caracteres iguales a los dispuestos después del carácter ^.

Problema

Ingresar una palabra y mostrar un mensaje si la misma finaliza con el string 'ón'

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var oracion=prompt('Ingrese una palabra','');
  var patron=/ón$/;
  if (patron.test(oracion))
    alert('La palabra finaliza con los caracteres \'ón\'');
  else
    alert('La palabra no finaliza con los caracteres \'ón\'');
</script>
  
</body>
</html>

Ver ejemplo anterior

Cuando queremos verificar si una cadena finaliza con un determinado carácter o conjunto de caracteres debemos disponer al final el carácter $ y antecederle el o los caracteres a verificar:

En el ejemplo anterior si ingresamos las palabras 'constitución', 'camión', 'edición' luego el método test retorna verdadero. En cambio si ingresamos 'cama', 'mano' el método test retorna falso ya que dichas palabras no finalizan con el string 'ón'.

Conjunto de caracteres opcionales [ ] en expresiones regulares

Ahora veremos el significado de los caracteres [] en una expresión regular. Se emplea estos caracteres para encerrar los caracteres permitidos.
Problema
Controlar si la palabra ingresada comienza con el primer carácter alfabético ya sea en mayúsculas o en minúsculas:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var palabra=prompt('Ingrese una palabra','');
  var patron=/^[a-zA-Z]/;
  if (patron.test(palabra))
    alert('La palabra comienza con un carácter alfabético (mayúscula o minúscula)');
  else
    alert('La palabra no comienza con un carácter alfabético (mayúscula o minúscula)');
</script>
  
</body>
</html>

Ver ejemplo anterior

Debemos especificar cada uno de los caracteres permitidos encerrados entre los corchetes. Cuando los caracteres son seguidos en la tabla de caracteres podemos utilizar el carácter '-' para indicar un rango de caracteres:

  var patron=/^[a-zA-Z]/;

Como solo debemos verificar el primer carácter utilizamos el comando '^' y le sigue los caracteres posibles.

Problema

Ingresar una palabra y luego mostrar un mensaje si finaliza con vocal.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var palabra=prompt('Ingrese una palabra','');
  var patron=/[aeiouAEIOUáéíóú]$/;
  if (patron.test(palabra))
    alert('La palabra finaliza con vocal');
  else
    alert('La palabra no finaliza con vocal');
</script>
  
</body>
</html>

Ver ejemplo anterior

En la expresión regular debemos especificar entre corchetes todas las vocales y como no están en forma seguida en la tabla de caracteres debemos especificarlas una por una:

  var patron=/[aeiouAEIOUáéíóú]$/;

Como debemos controlar el último carácter de la oración utilizamos el comando $

Hemos utilizado el carácter '^' para encontrar coincidencias desde el principio del string, pero este carácter dentro de los corchetes abiertos y cerrados tiene otro uso. Permite obtener todos los otros caracteres distintos a los especificados.

Problema

Ingresar una palabra y luego mostrar un mensaje si contiene una vocal en alguna parte de la palabra.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var palabra=prompt('Ingrese una palabra','');
  var patron=/[aeiouAEIOUáéíóú]/;
  if (patron.test(palabra))
    alert('La palabra tiene al menos una vocal');
  else
    alert('La palabra no tiene vocales');
</script>
  
</body>
</html>

Ver ejemplo anterior

Ahora nuestra expresión regular queda especificada como:

  var patron=/[aeiouAEIOUáéíóú]/;

El método test retorna true si ingresamos alguna de las siguientes palabras:

 casa
madre
salir

En cambio retorna false si ingresamos:

pbt

Cuando tenemos que buscar en el string alguno de los caracteres que tienen un significado especial en las expresiones regulares '^ $. * +? =! : | \ / () [] {} ' debemos escaparlos a algunos dentro de los corchetes.

Problema

Ingresar una oración por teclado y luego mostrar un mensaje si el string ingresado contiene al menos uno de los caracteres que son un comando o metacaracter para las expresiones regulares:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var oracion=prompt('Ingrese una oracion','');
  var patron=/[\^$.*+?=!:|\\/()\[\]{}]/;
  if (patron.test(oracion))
    alert('La oración tiene al menos un carácter ^ $. * +? =! : | \ / () [] {}');
  else
    alert('La oración no tiene ningún carácter ^ $. * +? =! : | \ / () [] {}');
</script>
  
</body>
</html>

Ver ejemplo anterior

Se verifica verdadero el método test si ingresamos:

La tarde estaba soleada!

Se verifica falso el método test si ingresamos:

La tarde estaba soleada

Problema

Ingresar todos los caracteres con significada especial en las expresiones regulares en el siguiente orden: ^$.*+?=!:|\/()[]{} (es necesario escapar todos los metacaracteres):

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var cadena=prompt('Ingrese esos caracteres especiales para expresiones regulares en este mismo orden: ^$.*+?=!:|\/()[]{} ','');
  var patron=/^\^\$\.\*\+\?\=\!\:\|\\\/\(\)\[\]\{\}$/;
  if (patron.test(cadena))
    alert('Orden correcto');
  else
    alert('Incorrecto');
</script>
  
</body>
</html>

Ver ejemplo anterior

Cuantificadores o repeticiones en expresiones regulares{x} {x,y} {x,}

Ahora veremos que podemos inicializar luego que indicamos entre corchetes el patrón a buscar la cantidad de veces que puede repetirse este patrón.

Son útiles para controlar la cantidad de repeticiones del patrón definido.

Se especifican luego del corchete donde definimos los caracteres permitidos:

Verificar si contiene entre 3 y 6 dígitos:

var patron=/[0-9]{3,6}/;

Verificar si contiene 3:

var patron=/[0-9]{3}/;

Verificar si contiene 3 o más dígitos:

var patron=/[0-9]{3,}/;

Problema
Ingresar una oración y mostrar si se ingresó un número que tiene al menos 2 dígitos.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var oracion=prompt('Ingrese una palabra','');
  var patron=/[0-9]{2,}/;
  if (patron.test(oracion))
    alert('La oración tiene un número de al menos 2 dígitos');
  else
    alert('La oración no tiene un número de al menos 2 dígitos');
</script>
  
</body>
</html>

Ver ejemplo anterior

La expresión regular se verifica verdadera si se ingresa:

Yo tengo 20 años.
Yo tengo 101 años.

La expresión regular se verifica falsa si se ingresa:

Yo tengo 5 años.

Problema
Ingresar una patente de un auto de argentina y luego mostrar un mensaje si es correcto o no su valor. Toda patente está constituida por 2 letras, tres números y finalmente 2 letras (ej. aa123bb )

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var patente=prompt('Ingrese una patente','');
  var patron=/[a-z]{2}[0-9]{3}[a-z]{2}/;
  if (patron.test(patente))
    alert('La patente ingresada es correcta');
  else
    alert('La patente ingresada no es correcta');
</script>
  
</body>
</html>

Ver ejemplo anterior

A primera medida este patrón resolvería nuestro problema:

  var patron=/[a-z]{2}[0-9]{3}[a-z]{2}/;

Se verifica verdadero si se ingresa:

aa111bb
zx343bb

Se verifica falso si se ingresa:

a333bb
bb22dd

Pero tenemos un problema ya que si ingresamos:

aa111cccd

SE VERIFICA VERDADERO.

Para resolver esto debemos modificar el patrón indicando que los últimos dos caracteres deben ser letras:

  var patron=/[a-z]{2}[0-9]{3}[a-z]{2}$/;

Ahora si ingresamos aa111bbb se verifica falso.

Pero todavía tenemos otro problema al ingresar:

5aa111bb

Y finalmente para que funcione correctamente debemos definir el patrón:

  var patron=/^[a-z]{2}[0-9]{3}[a-z]{2}$/;

El algoritmo correcto es el siguiente:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var patente=prompt('Ingrese una patente','');
  var patron=/^[a-z]{2}[0-9]{3}[a-z]{2}$/;
  if (patron.test(patente))
    alert('La patente ingresada es correcta');
  else
    alert('La patente ingresada no es correcta');
</script>
  
</body>
</html>

Ver ejemplo anterior

Problema

Ingresar una oración y mostrar si se ingresó uno o más números con exactamente 5 dígitos.

Para resolver este problema debemos definir un patrón que identifique un número con exactamente cinco dígitos y que antes y después de este tenga un espacio en blanco. Para identificar el espacio en blanco debemos introducir en la expresión regular el carácter de escape y la letra s, es decir \s

El algoritmo luego es:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var oracion=prompt('Ingrese una oracion','');
  var patron=/\s[0-9]{5}\s/;
  if (patron.test(oracion))
    alert('La oración tiene un número de 5 dígitos');
  else
    alert('La oración no tiene un número de 5 dígitos');
</script>
  
</body>
</html>

Ahora vemos la expresión regular definida es:

  var patron=/\s[0-9]{5}\s/;

Es decir que para que se valide verdadero el string debe contener un espacio en blanco, seguido de 5 dígitos y otro espacio en blanco.

Ver ejemplo anterior