OBJETO REGEXP : EXPRESIONES REGULARES

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

Una expresión regular se construye con una cadena de texto que representa el formato que debe
cumplir el texto.

En javascript se puede hacer de dos formas, bien instanciando una clase RegExp pasándo como
parámetro la cadena de formato, bien poniendo directamente la cadena de formato, en vez de entre
comillas, entre /

//Son equivalentes

var reg = new RegExp("aa")

var reg = /aa/

Ver si un texto tiene una determinada secuencia de letras o números fija es fácil. La expresión
simplemente es esa cadena y podemos ver si un texto la tiene usando el método match() de ese
texto

var txt=prompt('ingrese un texto',''); // hola como estas --> correcto

var patron=/hola/;
if (txt.match(patron))
alert('Correcto');
else
alert('Incorrecto');

// Son equivalentes

var txt=prompt('ingrese un texto',''); // como estas --> incorrecto

var patron=new RegExp("hola");
if (txt.match(patron))
alert('Correcto');
else
alert('Incorrecto');

1
 CARACTERES NO ALFABÉTICOS NI NUMÉRICOS

Algunos de los caracteres no numéricos ni alfabéticos tienen un significado especial (lo vemos más
adelante), como por ejemplo [ ] { } ( ) * . ^ $ etc.
No podemos ponerlos tal cual si forman parte de nuestro formato, debemos "escaparlos" poniendo \
delante

"esto es un *".match(/\*/); // Devuelve ["*"] indicando que existe un asterisco.

CONJUNTO OPCIONAL DE CARACTERES

A veces nos da igual que una letra, por ejemplo, sea mayúscula o minúscula, o queremos que sea
una vocal, o un dígito.
Cuando queremos que una de las letras de nuestro texto pueda ser una cualquiera de un conjunto
de letras determinado, las ponemos entre [] en nuestra expresión.
Por ejemplo, si nos vale "Javascript" y "javascript", podemos poner la expresión como
/[Jj]avascript/ para indicar que nos vale J mayúscula o j minúscula

"javascript con minuscula".match(/[Jj]avascript/); // Sí encuentra la cadena

"Javascript con minuscula".match(/[Jj]avascript/); // También la encuentra.

Si los caracteres válidos son varios y van ordenados según el juego de caracteres, podemos poner
el primero y el último separados por un -. Por ejemplo, [a-z] vale para cualquier letra minúscula, [0-
9] para cualquier dígito y [a-zA-Z] para cualquier letra mayúscula o minúscula

"aa2bb".match(/[0-9]/); // Encuentra el 2, devolviendo ["2"].

"aa23bb".match(/[0-9]/); // Encuentra el 2, devolviendo ["2"].
"aa23bb".match(/[0-9][0-9]/); // Encuentra el 23, devolviendo ["23"].

Podemos hacer lo contrario, es decir, que la letra no esté en ese conjunto de caracteres. Se hace
poniendo el juego de caracteres que no queremos entre [^ y ].
Por ejemplo, para no dígitos pondríamos [^0-9]
"22a33".match(/[^0-9]/); // Encuentra letra a, devolviendo ["a"]
"2233".match(/[^0-9]/); // devuelve null

2
 CONJUNTOS HABITUALES

Hay varios conjuntos que se usan con frecuencia, como el de letras [a-zA-Z], el de dígitos [0-9] o el
de espacios en blanco (espacio, tabulador, etc).
Para estos conjuntos la expresión regular define formas abreviadas, como

\w para letras, equivalente a [a-zA-Z]

\W para no letras, equivalente a [^a-zA-Z]
\d para dígitos, equivalente a [0-9]
\D para no dígitos, equivalente a [^0-9]
\s para espacios en blanco (espacios, tabuladores, etc).
\S para no espacios en blanco.

Ver Metacaracteres http://www.w3schools.com/jsref/jsref_obj_regexp.asp

"aa2bb".match(/\d/); // Encuentra el 2, devolviendo ["2"]

REPETICIÓN DE CARACTERES

Podemos querer buscar por ejemplo un conjunto de tres dígitos, podemos hacerlo repitiendo tres
veces el \d
"aa123bb".match(/\d\d\d/); // Encuentra el 123, devolviendo ["123"]
Pero esta forma es un poco engorrosa si hay muchos caracteres y es poco versátil.
Las expresiones regulares nos permiten poner entre {} un rango de veces que debe repetirse.
por ejemplo
/\d{3}/ Busca 3 dígitos en la cadena
/\d{1,5}/ Busca entre 1 y 5 dígitos en la cadena.
/\d{2,}/ Busca 2 dígitos o más en la cadena.

Como ejemplos
"1234".match(/\d{2}/); //["12"]
"1234".match(/\d{1,3}/); // ["123"]
"1234".match(/\d{3,10}/) //["1234"]

También suele haber rangos habituales como 0 o más veces, 1 o más veces, 0 ó 1 vez.

3
Estos rangos habituales tienen caracteres especiales que nos permiten ponerlos de forma más
simple.
* equivale a 0 o más veces {0,}
+ equivale a 1 o más veces {1,}

? equivale a 0 ó 1 vez {0,1}

Por ejemplo
"a2a".match(/a\d+a/); // Encuentra a2a
"a234a".match(/a\d+a/); // Encuentra a234a

Cosas como * o + encuentran el máximo posible de caracteres.

Por ejemplo, si nuestro patrón es /a+/ y nuestra cadena es "aaaaa", el resultado será todo la cadena
"aaaaa".match(/a+/); // Devuelve ["aaaaa"]

Para hacer que se encuentre lo menos posible, se pone un ? detrás.

Así por ejemplo, si nuestra expresión regular es /a+?/ y nuestra cadena es "aaaaa", sólo se
encontrará una "a"
"aaaaa".match(/a+?/); // Devuelve ["aaaaa"]

EXTRAER PARTES DE LA CADENA

A veces nos interesa no sólo saber si una cadena cumple un determinado patrón, sino extraer
determinadas partes de él.
Por ejemplo, si una fecha está en el formato "27/11/2012" puede interesarnos extraer los números.
Una expresión regular que vale para esta cadena puede ser

/\d{1,2}\/\d{1,2}\/\d{4}/

Suponiendo que el día y el mes puedan tener una cifra y que el año sea obligatoriamente de 4 cifras.
En este caso
"27/11/2012".match(/\d{1,2}\/\d{1,2}\/\d{4}/);

nos devuelve un array con un único elemento que es la cadena "27/11/2012".

4
Para extraer los trozos, únicamente debemos poner entre paréntesis en la expresión regular
aquellas partes que nos interesan. Es decir,
/(\d{1,2})\/(\d{1,2})\/(\d{4})/

Si ahora ejecutamos el método match() con la misma cadena anterior, obtendremos un array de 4
cadenas. La primera es la cadena completa que cumple la expresión regular. Los otros tres
elementos son lo que cumple cada uno de los paréntesis

"27/11/2012".match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/); // Devuelve el array

["27/11/2012", "27", "11", "2012"]

Los paréntesis también nos sirven para agrupan un trozo y poner detrás uno de los símbolos de
cantidades. Por ejemplo
"xyxyxyxy".match(/(xy)+/); // Se cumple, hay xy una o más veces.

POSICIÓN DE LA EXPRESIÓN

A veces nos interesa que la cadena busque en determinadas posiciones. Las expresiones regulares
nos ofrecen algunos caracteres espaciales para esto.
^ indica el principo de cadena, por ejemplo, /^hola/ vale si la cadena "hola" está al principio
"hola tu".match(/^hola/); // Devuelve ["hola"]
"pues hola tu".match(/^hola/); // Devuelve null

$ es el final de la cadena, por ejemplo /tu$/ vale si la cadena termina en "tu"

"hola tu".match(/tu$/); // Devuelve ["tu"]
"hola tu tururú".match(/tu$/); // Devuelve null

\b indica una frontera de palabra, es decir, entre un caracter "letra" y cualquier otra cosa
como espacios, fin o principio de linea, etc.
De esta forma, por ejemplo, /\bjava\b/ buscará la palabra java, pero ignorará javascript
"java es güay".match(/\bjava\b/); // Devuelve ["java"]
"javascript es güay".match(/\bjava\b/); // Devuelve null

5
 \B es lo contrario de \b, así por ejemplo, /\bjava\B/ buscará una palabra que empiece por
"java", pero no sea sólo java sino que tenga algo más
"java es güay".match(/\bjava\B/); // Devuelve null
"javascript es güay".match(/\bjava\B/); // Devuelve ["java"]

(?=expresion) sirve para posicionar el resto de la expresión regular y buscar antes o

depués.
Por ejemplo si queremos buscar un número que vaya delante de km, podemos hacer esto
/\d+(?= km)/ , es decir, uno o más dígitos seguidos de un espacio y las letras km. La
diferencia con esta expresión (/\d+ km/) es que en el primer caso sólo casan con la
expresión los números, mientras que en el segundo caso se incluye también el " km"
"11 millas 10 km".match(/\d+(?= km)/); // Devuelve ["10"]
"11 millas 10 km".match(/\d+ km/); // Devuelve ["10 km"]

Hay que tener cuidado si buscamos detrás, porque como el trozo (?=expresion) no se tiene
en cuenta, sigue contando para el resto de la expresión. Por ejemplo, si queremos extraer la
parte decimal de "11.22" podríamos pensar en hacer esto /(?=\.)\d+/ , pero no funciona
porque el . decimal no se "consume" con (?=\.), así que debemos tenerlo en cuenta y
ponerlo detrás, así /(?=\.)\.\d+/

"11.22".match(/(?=\.)\d+/); // Devuelve null

"11.22".match(/(?=\.)\.\d+/); // Devuelve [".22"]

(?!expresion) hace lo contrario que (?=expresion), es decir, busca una posición donde no se
cumpla expresión. Por ejemplo, para sacar lo que no sean km de "11 km, 12 km, 14 m" podemos
poner /\d{2}(?! km)/

"11 km 12 km 14 m".match(/\d{2}(?! km)/); // Devuelve ["14"]

6
 FLAGS DE OPCIONES

Hemos visto que una expresión regular es /expresion/. Podemos poner algunos flags detrás,
básicamente unas letras que cambian algo el comportamiento

i es para ignorar mayúsculas y minúsculas

"hola".match(/HOLA/); // Devuelve null
"hola".match(/HOLA/i); // Devuelve ["hola"]

g es para buscar todas las veces posibles la expresión, no sólo una vez
"11 223 44 66 77".match(/\d+/); // Devuelve ["11"]
"11 223 44 66 77".match(/\d+/g); // Devuelve ["11", "223", "44", "66", "77"]

m busca en cadenas con retornos de carro \n considerando estos como inicios de linea ^ o
fin $
"hola\ntu".match(/^tu/); // Devuelve null
"hola\ntu".match(/^tu/m); // Devuelve ["tu"]
"hola\ntu".match(/hola$/); // Devuelve null
"hola\ntu".match(/hola$/m); // Devuelve ["hola"]

OTROS MÉTODOS DE CADENA Y DE EXPRESIÓN REGULAR

Para todos estos ejemplos hemos usado el método match() de la clase String, ya que nos devuelve
un array con las cosas que se encuentran y viendo los resultados es la forma más clara de ver cómo
funcionan las distintas partes de la expresión regular.
Sin embargo, tanto String como RegExp tienen otros métodos útiles

String.search(/expresion/)
Devuelve la posición donde se encuentra esa expresión dentro de la cadena, o -1 si no se
encuentra.
"aa3bb".match(/[0-9]/); // Encuentra el 3, devolviendo ["3"].
"aa2bb".search(/[0-9]/); // En la posicion 2

7
String.replace(/expresion/,cadena)
Busca el trozo de cadena que casa con la expresión y la reemplaza con lo que le pasemos en
el parámetro cadena. Este método tiene además un detalle intresante. Cuando en la
expresión regular tenemos paréntesis para extraer algunas partes de la cadena, la misma
expresión regular recuerda qué ha encontrado. En el método replace, si en la cadena de
segundo parámetro aparecen cosas como $1, $2, utilizará lo encontrado.

"ho3la".replace(/\d/,"X"); // Devuelve "hoXla"

"ho3la".replace(/(\d)/,"-$1-"); // Devuelve "ho-3-la"

String.match(/expresion/)
Ya lo hemos visto.

String.split(/expresion/)
Usa lo que sea que case con la expresión como separador y devuelve un array con la cadena
partida en trozos por ese separador
"hola, dos tres; cuatro".split(/\W+/); // Devuelve ["hola", "dos", "tres", "cuatro"]

RegExp constructor
Además de crear las expresiones regulares con /expresion/flags, podemos hacerlo con un
new de la clase RegExp, por ejemplo new RegExp("expresion","flags").

var reg = new RegExp("\\d+","g");

"11 22 33".match(reg); // Devuelve ["11","22","33"]
Hay que fijarse en este caso que las \ debemos escaparlas, con \\

RegExp.exec()

Es similar a match() de String, pero sólo devuelve un resultado y hace que RegExp guarde la
posición en la que lo ha encontrado. Sucesivas llamadas a exec(), nos iran devolviendo los
siguientes resultados

var reg = new RegExp("\\d+");

reg.exec("11 22 33"); // Devuelve ["11"]
reg.exec("11 22 33"); // Vuelve a devolver ["11"], puesto que no hay flag g

8
var reg = new RegExp("\\d+","g");
reg.exec("11 22 33"); // Devuelve ["11"]
reg.exec("11 22 33"); // Vuelve a devolver ["22"], puesto que si hay flag g
reg.exec("11 22 33"); // Vuelve a devolver ["33"], puesto que si hay flag g
reg.exec("11 22 33"); // Devuelve null, ya no hay más resutlados.
reg.exec("11 22 33"); // Vuelve a devolver ["11"], despues de devolver null la RegExp se
"reinicializa"

RegExp.test()

Similar a exec(), pero en vez de devolver lo encontrado, devuelve true si ha encontrado algo
o false si no. Como la expresión regular recuerda las búsquedas anteriores, sucesivas
llamadas a test() pueden devolver resultados distintos

var reg = new RegExp("\\d+","g");

reg.test("11 22 33"); // Devuelve true, porque encuentra el ["11"]
reg.test("11 22 33"); // Vuelve a devolver true, porque encuentra el ["22"], puesto que si
hay flag g
reg.test("11 22 33"); // Vuelve a devolver true, porque encuentra el ["33"], puesto que si
hay flag g
reg.test("11 22 33"); // Devuelve false, ya no hay más resutlados.
reg.test("11 22 33"); // Vuelve a devolver true, porque vuelve a encontrar el ["11"],
despues de devolver null la RegExp se "reinicializa"

9
RESUMEN DESCRIPCIÓN DE LAS EXPRESIONES REGULARES

Carácter Significado Ejemplo Resultado

^ Comienzo de la cadena ^ad Todas las palabras que comienzan con "ad"

$ Final de la cadena ad$ Todas las palabras que terminan en "ad"

\ Permite usar caracteres \^ Representa este símbolo ^

especiales

. Equivale a un solo caracter a.a Busca "aaa" "aba" "aca" "ada" ... etc
excepto salto de línea

* El caracter anterior 0 o más per*o Busca "peo" "pero" "perro" "perrro" ... etc
veces

? El caracter anterior 0 a 1 vez ah?y Busca solamente "ay" "ahy"

+ El caracter anterior 1 a más mas+ Busca "mas" "mass" "masss" ... etc
veces

| Indica opciones soltero|ca Representa una de las opciones

sado

( abcd) Agrupa elementos para (abc) Representa"abc" "rabcg" "feabcrr" ... etc
usarlos como si fuera uno

{a} Indica el número de e{3} Representa solamente "eee"

repeticiones

{a,} Debe repetir al menos "a" a{2,} Representa "aa" "aaa" "aaaa" ... etc
veces

{a,b} Debe repetir al menos "a" u{1,4} Representa solamente "u" "uu" "uuu"
veces hasta "b" veces "uuuu"

[abcd] Indica un sólo caracter del [gth] Representa una de las opciones "g" "t" "h"
grupo indicado

[a-z] Indica una opción de la letra [d-g] Representa una de las opciones "d" "e" "f"
"a" hasta la "z" "g"

[0-9] Indica una opción del [4-7] Representa una de las opciones "4" "5" "6"
numero 0 al 9 "7"

10
 [^abcd] Indica un caracter menos las [^dgh] Representa un caracter menos "d" "g" "h"
opciones indicadas

\d Indica un dígito 4\d Representa "40" "41" "42" ... etc

[ \s\t\n\r] Incluyen espacio en blanco,

tabulador, nueva línea,
retorno

\w Cualquier alfanumérico [a- \w{2,4} Representa "4tw" "r3" "ff" "aert" ... etc
zA-Z0-9_ ]

Ejemplos

fran[zk] coincidiría con "franz" o "frank" pero no con "franzk" ni con "ranz"

(franz)|(wilder) coincidiría con "franz" "wilder" "franzymas" "wilderymas"

pe[dr]?ro coincidiría con "pedro" "perro" "pero" "pedroymasletras" "peroymas"

[aei]{2,3}c*a? coincidiría con "aaca" "iiicc" "ee" "aaaca"

[3-7][a-d](u|e) coincidiría con "4eu" "6ae" "7du" "4bu"

VALIDACIONES PARTICULARES
Con este código podemos validar formularios con campos de texto como Email, URL, contraseña
segura, fecha etc... Sólo cambiando la variable cadena con la expresión regular correspondiente.

<script>
function ValidarCadenaExpReg() {
// Expresion regular que representa un Email válido
cadena = "^[a-z]+@[a-z]+\.[a-z]{2,4}$";
re = new RegExp(cadena);

if (document.getElementById("textValidReg").value.match(re))
alert("Aceptado");
else
alert("Rechazado");
}
</script>

<span>Email :</span></br>
<input id="textValidReg" type="text" value="aa@gmail.com" /></br>
<input onclick="ValidarCadenaExpReg()" type="button" value="Entrar" />

11
 LISTA DE EXPRESIONES REGULARES MÁS USADAS

Cualquier letra en [a-z]

minuscula
Entero ^(?:\+|-)?\d+$
Correo electrónico /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/
URL ^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)( [a-zA-Z0-9\-\.\?\,\'\/\\
Contraseña segura (?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$
(Entre 8 y 10 caracteres, por lo menos un digito y un alfanumérico, y no puede contener
caracteres espaciales)
Fecha ^\d{1,2}\/\d{1,2}\/\d{2,4}$
(Por ejemplo 01/01/2007)
Hora ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
(Por ejemplo 10:45:23)
Número tarjeta de ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))
crédito (-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$
Número teléfono ^[0-9]{2,3}-? ?[0-9]{6,7}$
Código postal ^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$
Certificado ^(X(-|\.)?0?\d{7}(-|\.)?[A-Z]|[A-Z](-|\.)?\d{7}(-|\.)? [0-9A-Z]|\d{8}(-|\.)?[A-Z])$
Identificación Fiscal

Formulario de validación de expresiones regulares

http://www-aii.dyndns.org/aii/valida_regexp.php

Más información en
http://www.w3schools.com/jsref/jsref_obj_regexp.asp

EJERCICIOS REGEXP
Crea un script y comprueba la lista de expresiones regulares mas utilizadas para validar
formularios. Puedes buscar otras expresiones en internet para compararlas.

12