Clase 05-expresiones-regulares

UNIDAD II:
Expresiones regulares
Desarrollo de AplicacionesWeb con
Software Interpretados en el Cliente

Objetivos
•Conseguir un dominio amplio de las expresiones regulares
de JavaScript.
•Estar en capacidad de utilizar expresiones regulares de
forma declarativa y utilizando el objeto RegExp().
•Dominar las técnica para crear una expresión regular
•Aplicar los principales métodos para creación de
expresiones regulares

Contenido
1. Definición de expresiones regulares.
2.Por qué son tan importantes las Expresiones Regulares.
3. Crear expresiones regulares en JavaScript.
4.Usar códigos de escape para caracteres que generan
ambigüedad.
5. Modificadores de las expresiones regulares.
6.Indicadores de posición.
7. Cuantificadores de repetición.

Contenido
8.Clases de caracteres.
9.Agrupamiento.
10.Subexpresiones.
11.Alternativas.
12.Coincidencia agresiva.
13.Herramientas para probar expresiones regulares.
14.Características de Expresiones Regulares de Perl no
admitidas en JavaScript.

Definición de expresiones regulares
•Una expresión regular es básicamente un patrón de
caracteres que se define con el objeto de realizar
comparaciones en busca de coincidencias con cadenas de
prueba.
•Las RegExp permiten el reconocimiento y extracción de casi
cualquier tipo de cadena con formato predecible como
pueden ser: direcciones URL, direcciones IP, direcciones de
correo electrónico, números de identificación, números de
teléfono, números de tarjetas de crédito, códigos postales,
números de matrícula (placa), etc.
•Entre las utilidades más usuales de las RegExp están la
comprobación de datos introducidos en formularios, la
búsqueda y sustitución de texto, etc.

•Las expresiones regulares se componen de caracteres, ya sea
solos o en combinación con caracteres especiales que se
utilizan para crear expresiones regulares más complejas

• En JavaScript, una expresión regular es un objeto que describe un
patrón de caracteres que se crea mediante un objeto RegExp que
representa a las expresiones regulares.
• Tanto RegExp como String, definen métodos que utilizan expresiones
regulares para realizar búsquedas de coincidencia de patrones
eficaces, así como funciones de reemplazo en el texto analizado.
• Las expresiones regulares en JavaScript, se estandarizaron en
ECMAScript v3. JavaScript 1.2 implementa un subconjunto de
opciones de expresión regular requeridas por ECMAScript v3 y
JavaScript 1.5 implementa todo el estándar.
• JavaScript implementa las expresiones regulares basadas
principalmente en las funciones de expresión regular del lenguaje
Perl.

Por qué son tan importantes las Expresiones
Regulares
•Aunque dicho en palabras no es tan evidente explicar la
importancia de las expresiones regulares, intentaremos
explicarlo diciendo que tareas que usando cualquier otra
metodología de programación pudieran tomarnos varias
líneas de código, con una expresión regular bien planteada,
podríamos realizar con una única instrucción.
•Es así que las expresiones regulares son especialmente útiles
para hacer trivial el proceso de descomponer cadenas y
buscar o extraer información de estas.

Regulares
•A pesar de la afirmación anterior, la única manera evidente de
comprobar lo increíble e importante que son las expresiones
regulares es con un ejemplo práctico:
•Imagine la siguiente situación: se quiere validar una cadena
para verificar que sea un código postal válido en los Estados
Unidos, que sigue el siguiente formato 99999-9999, en donde
cada 9 representa un dígito decimal.
•Sin la existencia de las expresiones regulares, una posible
solución elegante del problema de verificar si un dato
ingresado coincide o no con un código postal de los Estados
Unidos, sería la siguiente.

Regulares
function isZipCode(zipcode){
if(typeof zipcode!=="string" || zipcode.length!=10) return false;
for(var i=0; i<zipcode.length; i++){
var car = zipcode[i];
switch(i){
case 0: case 1: case 2: case 3: case 4:
case 6: case 7: case 8: case 9:
if(car<'0' || car>'9') return false;
break;
case 5:
if(car!='-') return false;
break;
}
}
return true;
}

Regulares
•El código anterior saca partido del hecho que sólo se
requieren dos tipos de comprobaciones distintas, una para
los dígitos del 0 al 9 y la otra un simple guión de separación
en donde la única posición distinta de donde se espera el
guión y no un entero es en el sexto carácter, que debe estar
ubicado en el índice 5 de la matriz o arreglo.
•Observe la solución, usando expresiones regulares y cómo
simplifica la cantidad de código requerido, pero mejor aún la
eficiencia de la solución que evita la utilización del ciclo
repetitivo.

Regulares
function isZipCode(zipcode){
return /^d{5}-d{4}$/.test(zipcode);
}
•Aunque le parezca mentira la función iterativa anterior de 15
líneas es reducida a 3 líneas usando expresiones regulares.
•De esto se trata el increíble poder de las expresiones
regulares, de hacer una tarea aparentemente compleja en
una o pocas líneas.
•Aprenderemos mucho de expresiones regulares en esta
clase, así que a poner atención sobre todos los conceptos y
operadores que poseen.

Creación de expresiones regulares
En JavaScript existen dos formas de crear o declarar una expresión
regular, que son:
1. Usando literales de expresiones, que es la forma más usual y
extendida:
var re = /ab + c/;
2. Utilizando el constructor del objeto RegExp:
var re = new RegExp("ab + c");
Es de notar la diferencia que hay en cada una de las formas en
que se delimitan los patrones que definen la expresión regular.

Uso de códigos de escape
•Al igual que ocurre con las cadenas de caracteres, en las
expresiones regulares también hay ciertos caracteres que
generan ambigüedad en la expresión y por tanto deben
escaparse si se desean incluir dentro de un patrón.
•Entre algunos de los caracteres problemáticos más comunes
están las barras de división que son justamente iguales a los
delimitadores de expresiones regulares en la sintaxis
declarativa.
•Puede examinar un conjunto bastante completo de códigos
de escape en la guía de práctica #6.

Modificadores de las expresiones regulares
En las expresiones regulares existen modificadores que alteran
la interpretación del patrón para una expresión regular. Los
principales modificadores son tres:
Carácter Significado
i No se hace distinción entre mayúsculas y minúsculas.
g Correspondencia global; es decir, se buscan todas las
correspondencias dentro de la cadena, no solo la primera.
m Se busca correspondencia en líneas múltiples.

Ejemplos usando modificadores
Usando objeto inicializador:
var patron1 = /http:///i;
var patron2 = /universidad/i;
Usando el constructor RegExp():
var patron1 = new RegExp("http://", "i");
var patron2 = new RegExp("universidad", "i");

Ejemplo de expresión regular declarativa
Observe la siguiente expresión regular:
• En el literal de expresión regular anterior, los símbolos "/" y "/"
delimitan la expresión regular.
• La letra g, al final del literal indica que se realizará una
comparación global con cualquier cadena de prueba, de modo
que si existe más de una coincidencia se seguirá comparando
hasta encontrarlas todas. Por defecto, si no se incluye la letra "g"
sólo se encuentra la primera coincidencia.
• w y d son clases de caracteres que indican cualquier carácter de
palabra o cualquier carácter dígito, respectivamente.
• {#} es un cuantificador de repetición.

Ejemplo de expresión regular con el
constructor RegExp
Observe la siguiente expresión regular:
• El constructor anterior acepta dos argumentos. El primero es la
expresión regular en sí y el segundo es el modificador, que en este
caso indica que se realice una búsqueda global sobre la cadena de
prueba.
• Observe que en este caso, con el constructor d es necesario
escapar el carácter de barra invertida con otra barra invertida,
quedando d.
• La expresión regular anterior valida números de tarjetas de
crédito del formato: 9999-9999-9999-9999 comunes en tarjetas
VISA y Master Card.

Indicadores de posición
Dentro de las expresiones regulares existen una serie de caracteres
especiales que se utilizan para definir patrones de forma más precisa. El
primer grupo de esos tipos de caracteres especiales son los indicadores
de posición, que se utilizan para indicar la posición en la que tiene que
estar el patrón en la cadena para que se de una coincidencia.
^ El patrón debe aparecer al comienzo de la cadena o de la línea.
$ El patrón debe aparecer al final de la cadena o de la línea.
b Coincide con un límite de palabra; es decir, con la posición entre un carácter w y un carácter W o
entre el carácter w y el inicio o el final de una cadena.
B Coincide con una posición que no es límite de palabra.
(?=p) Afirmación previa positiva que requiere que los siguientes caracteres coincidan con el patrón p, pero
sin incluir realmente dichos caracteres en la coincidencia.
(?!p) Afirmación previa negativa que requiere que los siguientes caracteres no coincidan con el patrón p.

Utilización de indicadores de posición
•Los indicadores de posición establecerán qué elemento debe
aparecer al inicio y/o al final del patrón para aceptar una
coincidencia.
•Cuando no se especifican indicadores de posición la
coincidencia se produce, si se encuentra el patrón en la
cadena, en cualquier posición, no necesariamente al inicio o al
final.

Ejemplos de indicadores de posición
•Con sintaxis declarativa (objeto inicializador):
var re = /^<input type=/;
var htmltag = "<input type='text' name='txtname'>";
var coinciden = re.test(htmltag);
•Con el constructor RegExp:
var re = new RegExp("^<input type=");
var htmltag = "<input type='text' name='txtname'>";
var coinciden = re.test(htmltag);

Cuantificadores de repetición
• Entre los cuantificadores de repetición más utilizados está el asterisco
(*), que se utiliza para indicar que el elemento anterior se puede
repetir cero, o más, veces.
• Ejemplo:
var patron = /zy*x/;
• Habrá coincidencia con literales de cadena como:
"zx"
"zyx"
"zyyyyyyyyyyyyyyyx"
"Las letras zyx son las últimas letras del abecedario"
• No habrá coincidencia con:
"abexzedaryo"
"yx"
"zy"

• Otro cuantificador de repetición es el signo más (+), que se utiliza para
indicar que el elemento anterior se debe repetir una o más veces.
• Ejemplo:
var patron = /ab+c/;
• Existirá coincidencia con:
"abc"
"abbbbbbbbbbbbbbc"
"Las letras abc son las primeras letras del abecedario"
• No existirá coincidencia con:
"ac"
"abecedario"

•El cuantificador signo de interrogación (?), indica que el
elemento anterior se puede repetir cero o una vez, pero no
más de una.
•Ejemplo:
var patron = /ab?c/;
•Habrá coincidencia con: "ac" o "abc".
•No habrá coincidencia con: "abbbbc".

•Existen situaciones en las que es necesario controlar de forma
exacta el número de veces que se debe producir una
repetición o indicar un rango válido de cantidad de
repeticiones.
•Para estos casos se utiliza una nomenclatura especial que son
las llaves ({}). Dentro de las llaves se indica una cantidad de
correspondencias específica permitidas para el elemento
precedente.

Se puede utilizar de tres formas:
1.{m}, indica una cantidad exacta de correspondencias de m
veces; donde m es un valor entero.
2.{m,}, indica una cantidad de correspondencias de m o más
veces.
3.{m,n}, indica una cantidad de correspondencias entre m y
n veces, incluyéndolos.

* Coincide el elemento anterior cero o más veces.
+ Coincide el elemento anterior una o más veces.
? Coincide el elemento anterior cero o una vez.
{m,n} Coincide el elemento anterior un mínimo de m veces, pero no más de
n.
{m,} Coincide el elemento anterior m o más veces.
{m} Coincide el elemento anterior exactamente m veces.

Clases de caracteres
•Una particularidad de las expresiones regulares es que
permite definir patrones formados por clases de caracteres.
•Una clase de carácter es una combinación de caracteres
literales individuales encerrados entre corchetes.
•Para encontrar coincidencia con una clase de carácter basta
que un solo carácter de la cadena de prueba (literal de
cadena) sea uno de los definidos en el patrón.
•Por ejemplo: el patrón [0123456789] encontraría
coincidencia con los siguientes literales de cadena: "2227-
3735", "abc 123 +-*"

•Se pueden definir clases de caracteres para números, letras
del alfabeto, minúsculas y mayúsculas, así como clases de
caracteres para símbolos y para signos de puntuación, si se
desea.
•Por ejemplo:
[0123456789], define un patrón para los dígitos.
[abcdefghijklmnopqrstuvwxyz], define un patrón para letras
minúsculas.
[=+-*/], define un patrón para símbolos utilizados para las
operaciones aritméticas básicas.

•También se pueden definir clases de caracteres de negación
anteponiendo un signo de circunflejo (^) al inicio del patrón
colocado entre corchetes.
•Una clase de carácter de negación encontrará coincidencia
con cualquier carácter o secuencia de caracteres que no estén
incluidos en el patrón.
•Por ejemplo, el patrón [^abc] se corresponderá con cualquier
literal de cadena que no sea ni a, ni b, ni c. Por ejemplo: hello,
luz, etc.

•Es posible indicar un rango de caracteres para definir las
clases de caracteres. Esto facilita definir clases de caracteres
cuando se piensan incluir varios caracteres de un mismo tipo.
•Por ejemplo, si se piensa crear un patrón para caracteres
numéricos, en vez de digitar [0123456789], se puede digitar
[0-9], lo cual permite crear patrones de forma más cómoda y
eficiente.
•Para indicar cualquier carácter alfabético en minúsculas o
mayúsculas, podría digitarse un patrón como el siguiente: [a-
zA-Z].

• Además de la notación entre corchetes existen clases de caracteres
que se pueden definir utilizando secuencias o códigos de escape.
• El signo punto (.) se utiliza para indicar que se acepta cualquier
carácter, excepto el carácter de salto de línea.
• s, acepta cualquier carácter de espacio en blanco (barra espaciadora,
tabulación horizontal y vertical, ENTER).
• S, cualquier carácter que no sea espacio en blanco.
• w, para cualquier carácter de palabra.
• W, cualquier carácter que no forma palabras.
• d, cualquier dígito.
• D, cualquier carácter que no sea un dígito.

[…] Cualquiera de los caracteres incluidos entre los corchetes.
[^…] Cualquiera de los caracteres no incluidos entre los corchetes.
. Cualquier carácter excepto el de nueva línea.
w Cualquier carácter de palabra: [a-zA-Z0-9_]
W Cualquier carácter que no sea de palabra: [^a-zA-Z0-9_]
s Cualquier carácter de espacio en blanco: [ tnrfv]
S Cualquier carácter que no sea espacio en blanco: [^ tnrfv]
d Cualquier dígito: [0-9]
D Cualquier carácter que no sea dígito: [^0-9]
[b] Tecla de retroceso literal.

Agrupamiento
•Es posible agrupar caracteres utilizando paréntesis. Esto
provocará que el grupo de caracteres sea tratado como una
unidad por los operadores de las expresiones regulares.
•Por ejemplo, el patrón /a(bc)+/ encontrará correspondencias
que contengan cualquier cadena con una a, seguida de una o
más repeticiones de la secuencia "bc".
•Ejemplo de expresión regular con agrupamiento:

Subexpresiones
•Los paréntesis en las expresiones regulares se pueden utilizar
también para crear subexpresiones o subpatrones.
•Las subexpresiones se encierran entre paréntesis definiendo
elementos individuales a los que se puede hacer referencia
dentro del patrón completo.
•Ejemplo:
var carnet = "EG970425";
var patron = /^([A-Z]){2}([0-9]){6}$/;
patron.test(carnet);

Alternativas
•Para crear alternativas dentro de los patrones de expresiones
regulares se incluye otro operador especial, conocido como
operador O lógico (|).
•Este operador se incluye con el carácter especial "|" que debe
colocarse entre varias alternativas de elementos o
subexpresiones para optar por una o la otra.
•Ejemplo:
var url = "http://www.udb.edu.sv";
var patron = /^((http|ftp|https)(://)){1}/;
patron.test(url);

Coincidencia agresiva
•Se conoce también como coincidencia voraz o coincidencia
máxima.
•La coincidencia agresiva es un término que describe el hecho
que, la expresión regular siempre intentará hacer coincidir
tantos caracteres como sea posible.
•Dicho de otro modo, al trabajar con expresiones regulares,
JavaScript siempre intentará hacer coincidir algo, si de algún
modo es posible y coincidirá siempre que sea posible.
•Debe ser muy específico para evitar que la expresión regular
encuentre resultados con más correspondencias de la cuenta.

Coincidencia agresiva
• Para comprenderlo mejor, veamos la siguiente declaración:
var patron = /d{4}-d{4}/;
• A simple vista esta declaración parece apropiada para números de
teléfonos de El Salvador. Hoy en día los números de teléfono están
compuestos de cuatro dígitos, un guión de separación y otros cuatro
dígitos. Si probáramos el número de teléfono: 2251-8212 utilizando el
método test:
alert(patron.test("227-0174"));
alert(patron.test("56533-98762366"));
• Obtendríamos true como resultado en ambos casos. Siendo evidente
que el segundo caso no debería ser así.
• El patrón correcto sería:
var patron = /^d{4}-d{4}$/;

Utilización de expresiones regulares
•Para aplicar expresiones regulares en el análisis de texto
proveniente de formularios, principalmente, se pueden
utilizar una variedad de propiedades y métodos del objeto
RegExp.
•Método test(). Este método es el más sencillo de utilizar.
Devuelve un valor lógico que indica si el argumento de cadena
pasado al método coincide o no con la expresión regular.

•El método exec(). Este método acepta una cadena con la que
será comparado el patrón y puede escribirse de forma
abreviada invocando el nombre de la RegExp como si fuera
una función.
•Este método devuelve un array con varias propiedades. Las
más importantes son: length (longitud del array), input
(cadena de entrada original), index (índice de la primera
correspondencia) y lastIndex (índice del carácter que sigue a
la correspondencia).

•También se pueden utilizar métodos del objeto String para el
análisis de expresiones regulares. Estos métodos son:
search(), split(), replace() y match().
•Se estudiarán más detenidamente estos métodos durante la
práctica de laboratorio.

Características de Expresiones Regulares de
Perl no admitidas
•Los indicadores s (modo de una sola línea) y x (sintáxis
extendida).
•Las secuencias de escape: a, e, l, u, L, U, E, Q, A, Z, z y
G.
•El anclaje previo previo positivo (?<= y el anclaje previo
negativo (?!.
•La sintáxis de comentario (?# y otras sintaxis extendidas.

Herramientas para probar expresiones
regulares
•Existen muchos sitios web para probar expresiones regulares;
sin embargo, dos de los más completos son los siguientes:
• http://regexr.com/
• http://leaverou.github.io/regexplained/

FIN
Desarrollo de Aplicaciones Web con
Software Interpretado en el Cliente

Clase 05-expresiones-regulares

Más contenido relacionado

La actualidad más candente (20)

Similar a Clase 05-expresiones-regulares (20)

Último (20)

Clase 05-expresiones-regulares