PDF de programación - Expresiones regulares con JavaScript

UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLÓGICOS

COMPUTACIÓN

GUIA DE LABORATORIO #6

Nombre de la Practica: Expresiones regulares con JavaScript
Lugar de Ejecución:
Tiempo Estimado:
MATERIA:
DOCENTES:

Centro de cómputo
2 horas con 30 minutos
Lenguajes Interpretados en el Cliente
Inga. Blanca Iris Cañas
(Pilet — Ricaldone), Tec. Jonathan Arévalo (Pilet – Don
Bosco)

(G-01L), Inga. Issela Mejía



CICLO: 02/2011



I. OBJETIVOS


Que el estudiante:
 Comprenda la utilidad de las expresiones regulares para resolver problemas dentro de los scripts.
 Aplicar expresiones regulares para validar información ingresada en campos de formularios.
 Utilizar expresiones regulares para reemplazar texto.
 Utilizar los métodos relacionados con expresiones regulares del objeto RegExp.


II. INTRODUCCION TEORICA


Expresiones regulares
Las expresiones regulares son patrones usados para gestionar la concordancia o coincidencia de patrones de
caracteres con cadenas de prueba. Dicho de otra forma, una expresión regular permite especificar patrones de
caracteres que serán comparados con cadenas de texto con el objeto de validar datos de entrada, realizar
búsquedas y/o reemplazos.

Entre las utilidades más comunes de las expresiones regulares están la comprobación de datos introducidos
en formularios, la creación y el análisis de cookies, la construcción y modificación de cadenas de texto, etc.

Las expresiones regulares permiten el reconocimiento y extracción de casi cualquier tipo de datos de cadena
con formato predecible como pueden ser direcciones URL, direcciones de correo electrónico, números de
teléfono, números de identificación, cookies, etc.

Creación de expresiones regulares en JavaScript
Existen dos formas de crear expresiones regulares en JavaScript, que son:

 Usando sintaxis declarativa con literales de expresiones regulares, de la siguiente forma:

re = /ab + c/;

 Llamando al constructor del objeto RegExp

re = new RegExp("ab + c");

var pattern = /http:\/\//;

En la primera forma los caracteres que forman el patrón van colocados entre barras de división ("/" y "/"). Por
ejemplo, para crear una expresión regular que coincida con una cadena que contenga http://, deberíamos
escribir:


En donde se han utilizado códigos de escape para las barras de división.



1 / 14

Guía de práctica #6: Expresiones regulares con JavaScript

Modificadores de las expresiones regulares
Los modificadores se utilizan para alterar la interpretación del patrón. Estos modificadores se colocan
inmediatamente después de la barra de cierre de la expresión regular ("/"). La tabla siguiente muestra los
modificadores de las expresiones regulares


CARÁCTER

Significado

i
g

m

Sin distinción entre mayúsculas y minúsculas
Correspondencia global, que significa que encuentra todas las
correspondencias de las cadenas y no solo la primera
Correspondencia de líneas múltiples

var pattern = new RegExp("http://");

var pattern = new RegExp(http://, "i");


Cuando se utiliza el constructor RegExp deben enviarse como argumentos del constructor, el patrón deseado
y el modificador especial para dicho patrón introducido como primer argumento. Este segundo argumento es
opcional. Veamos el siguiente ejemplo:

Usando modificadores:


La sintaxis de constructor se utiliza con mayor frecuencia cuando el patrón a comparar no se determina hasta
el momento de la ejecución. Podríamos permitir al usuario introducir la expresión regular y luego pasarla al
constructor RegExp() como argumento.

Caracteres especiales para la creación de patrones
Existen una serie de caracteres especiales utilizados en las expresiones regulares que sirven para definir
patrones. Estos se pueden agrupar en varias categorías, entre las que se pueden mencionar:
 Indicadores de posición
Son caracteres especiales que dan información sobre la posición en la que tiene que estar el patrón en la
cadena con la que se comparará. Los caracteres indicadores de posición utilizados en expresiones regulares de
JavaScript se muestran a continuación:


CARÁCTER

Significado

^
$

El patrón debe aparecer al comienzo de la cadena
El patrón debe aparecer al final de la cadena

var re = /http$/;
re.test("El protocolo es http");

var re = /^http/;
re.test("El protocolo es http");


Por ejemplo, el resultado de la evaluación de la expresión regular que se muestra en el siguiente segmento de
código dará un resultado de falso:



Pero si creamos la expresión regular con el símbolo $ el resultado será verdadero si escribimos:



 Códigos de escape
Las expresiones regulares de JavaScript utilizan códigos de escape para indicar caracteres que podrían
generar ambigüedad al utilizarlos dentro de la definición del patrón de una expresión regular. Cada carácter
de código de escape se especifica utilizando un carácter de barra invertida (\). Los códigos de escape
utilizados en JavaScript son un superconjunto de los utilizados en las cadenas.

El conjunto completo de caracteres de códigos de escape se muestran en la siguiente tabla:

Lenguajes Interpretados en el Cliente

2

Guía de práctica #6: Expresiones regulares con JavaScript

CÓDIGO

CORRESPONDENCIA CON

\f
\n
\r
\t
\v
\/
\\
\.
\*
\+
\?
\|
\(
\)
\[
\]
\{
\}

\OOO
\xHH

Avance de página
Nueva línea
Retorno de carro
Tabulador
Tabulador vertical
Barra inclinada
Barra invertida
Punto
Asterisco
Signo más
Signo de interrogación
Barra horizontal
Paréntesis de apertura
Paréntesis de cierre
Corchete de apertura
Corchete de cierre
Llave de apertura
Llave de cierre
Carácter ASCII representado por el valor octal
Carácter ASCII representado por el valor hexadecimal HH

\xHHHH Carácter Unicote representado por el valor hexadecimal HHHH


Por ejemplo, el resultado de la evaluación de la siguiente expresión regular dará como resultado falso:


var re = /http:\/\//;
re.test(“www.udb.edu.sv”);


Por el contrario la evaluación de la siguiente expresión regular dará verdadero:


var re = /http:\/\//;
re.test(“http://www.udb.edu.sv”);


 Cuantificadores de repetición
Estos caracteres permiten indicar la cantidad de veces que un elemento anterior al cuantificador de repetición
en la expresión, puede o debe aparecer. Entiéndase por elemento el carácter o conjunto de caracteres anterior.
Los cuantificadores de repetición se muestran en la siguiente tabla:


CARÁCTER
*

+

?

{m}

{m, n}

{m, }

Significado

Busca coincidencia con el elemento (carácter) anterior cero o más
veces.
Busca coincidencia con el elemento (carácter) anterior una o más
veces.
Busca coincidencia con el elemento (carácter) anterior cero o una
vez, pero no más.
Busca coincidencia con el elemento (carácter) anterior exactamente
m veces.
Busca coincidencia con el elemento (carácter) anterior un mínimo
de m veces y un máximo de n veces.
Busca coincidencia con el elemento (carácter) anterior m o más
veces.



Lenguajes Interpretados en el Cliente

3

Guía de práctica #6: Expresiones regulares con JavaScript

var re = /ab*c/;

var patron = /a(bc)+/;

re.test("ac");
re.test("abbc");
re.test("El abc del amor");

Observe los siguientes ejemplos:


Se obtendrá verdadero si se evalúa con las siguientes expresiones:



 Agrupamiento de caracteres
JavaScript permite agrupar caracteres utilizando paréntesis. Muchas veces se requiere que el elemento
anterior no sea un carácter específico sino un grupo de posibilidades de caracteres. Cualquier grupo de
secuencias de códigos de expresiones regulares encerrado entre paréntesis es considerado una unidad para
los operadores de las expresiones regulares. Por ejemplo:


Buscará correspondencias con cadenas que contengan una letra a, no necesariamente al comienzo, seguido de
una o más repeticiones de "bc".
En el caso de querer especificar en un patrón clases de caracteres como caracteres válidos se pueden mostrar
un conjunto de caracteres encerrados entre corchetes. Esto indicará que se acepta como coincidente cualquier
cadena que contenga alguno de esos caracteres. Por ejemplo:



Encontrará coincidencias con cadenas que contengan un número. Como "2227-3735", "Tenía 1", "1 gol", etc.
No encontrará coincidencia con: "Primero uno", "dos tres cuatro", etc.

Al querer establecer un conjunto consecutivo de caracteres demasiado grande para mostrarlos uno a uno. Se
puede utilizar el guión ("-") para indicar un rango de caracteres. Por ejemplo:


var patron = /[1234567890]/;

var patron = /[0-9]/;
var patron = /[a-zA-Z]/; //Busca correspondencia con cualquier carácter alfabético
var patron = /[a-zA-Z0-9]/;//Busca correspondencia con cualquier carácter alfanumérico

//Busca correspondencia con cualquier cadena que contenga número


Los corchetes también se pueden utilizar para describir clases de caracteres negativos. Estas clases especifican
caracteres que no pueden estar presentes. Una clase negativa se especifica anteponiendo el carácter
cincunflejo ("^") al inicio de la clase. Por ejemplo:


var patron = /[^a-zA-Z]+/; //Coincidirá con secuencias de uno o más caracteres no


//alfabéticos



NOTA IMPORTANTE: Recuerde que el circunflejo también se utiliza como indicador de posición. Usted
debe distinguirlo del uso como carácter negativo por el hecho de que en este último caso debe ir dentro de
los símbolos de corchetes.

Existen otras clases de caracteres, como el punto (".") que se utiliza para que se acepte cualquier carácter, con
excepción del salto de línea. También se puede utilizar la secuencia \s, para indicar que se acepta