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: Centro de cómputo
CICLO: 02/2014
Tiempo Estimado: 2 horas con 30 minutos
MATERIA: Lenguajes Interpretados en el Cliente
DOCENTES: Inga. Karens Lorena Medrano/Ing. Ricardo Ernesto Elías

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");
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:
var pattern = /http:\/\//;
En donde se han utilizado códigos de escape para las barras de división.

1 / 33
 Guía # 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 Sin distinción entre mayúsculas y minúsculas
g Correspondencia global, que significa que encuentra todas las
correspondencias de las cadenas y no solo la primera
m Correspondencia de líneas múltiples

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:
var pattern = new RegExp("http://");
Usando modificadores:
var pattern = new RegExp(http://, "i");

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

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:
var re = /^http/;
re.test("El protocolo es http");

Pero si creamos la expresión regular con el símbolo $ el resultado será verdadero si escribimos:
var re = /http$/;
re.test("El protocolo es http");

 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 # 6: Expresiones regulares con JavaScript

CÓDIGO CORRESPONDENCIA CON

\f Avance de página
\n Nueva línea
\r Retorno de carro
\t Tabulador
\v 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
\OOO Carácter ASCII representado por el valor octal
\xHH 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 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.
{m} Busca coincidencia con el elemento (carácter) anterior exactamente
m veces.
{m, n} Busca coincidencia con el elemento (carácter) anterior un mínimo
de m veces y un máximo de n veces.
{m, } Busca coincidencia con el elemento (carácter) anterior m o más
veces.

Observe los siguientes ejemplos:

var re = /ab*c/;

Lenguajes Interpretados en el Cliente 3

 Guía # 6: Expresiones regulares con JavaScript

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

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

 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:
var patron = /a(bc)+/;

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:
var patron = /[1234567890]/;

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 = /[0-9]/; //Busca correspondencia con cualquier cadena que contenga número
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

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 cualquier
carácter de espacio en blanco ( \t\n\r\f\v), \S para cualquier carácter que no sea espacio en blanco. \w, para
cualquier carácter alfanumérico y \W, para cualquier carácter que no sea alfanumérico. \d, para cualquier
carácter de dígito. \D para cualquier carácter que no sea dígito.

La siguiente tabla muestra un resumen de las clases de caracteres:

CÓDIGO CORRESPONDENCIA CON

[caracteres] Cualquier carácter indicado explícitamente o como un rango entre los corchetes
[^caracteres] Cualquier carácter que no sea ninguno de los indicados entre los corchetes
representados explícitamente o como rango
. Cualquier carácter con excepción del carácter de nueva línea
\w Cualquier carácter alfanumérico. Igual que [a-zA-Z0-9]

Lenguajes Interpretados en el Cliente 4

 Guía # 6: Expresiones regulares con JavaScript

\W Cualquier carácter que no sea alfanumérico. Igual que [^a-zA-Z0-9]

\s Cualquier carácter de espacio en blanco. Lo mismo que [ \t\n\r\f\v]
\S Cualquier carácter que no sea de espacio en blanco. Lo mismo que [^ \t\n\r\f\v]
\d Cualquier carácter de dígito. Lo mismo que [0-9]
\D Cualquier carácter que no sea dígito. Lo mismo que [^0-9]
\b Un límite de palabra. El espacio vacío entre un \w y \W
\B Un límite de caracteres que no sean palabras. El espacio vacío entre caracteres de
palabras
[\b] Barra horizontal

Creación de alternativas dentro de la expresión regular

Cuando se desea crear una expresión regular en la que se quiera coincidencia con una, dos o más alternativas,
tal y como ocurre con un operador lógico O, es conveniente utilizar el operador "|", que se lee como O lógico,
igual que en los operadores condicionales.
Para entender el funcionamiento, imaginemos que queremos crear un patrón para que se obtenga
coincidencia únicamente si la cadena comienza con http://, https:// o ftp://. Entonces debe utilizar un
patrón como el siguiente:
var patron = /^(http:\/\/|https:\/\/|ftp:\/\/)/;

Las siguientes cadenas mostrarían coincidencia:

http://www.google.com
https://www.ortoedu.com
http://www.ube.edu.sv
ftp://www.udb.edu.sv

En tanto que las siguientes cadenas no mostrarán coincidencia:

htp://www.hotmail.com
htps://www.bancodinamico.com
httpg://www.minegocio.com
mail://www.udb.edu.sv

Subexpresiones
En expresiones regulares una subexpresión consiste en crear una expresión regular compuesta de varias
secciones individuales delimitadas por paréntesis. Cuando se tienen subexpresiones la expresión regular se
compone de más de un grupo de paréntesis, de forma que cada subexpresión puede ser referida de forma
individual utilizando propiedades estáticas del objeto RegExp.
El siguiente ejemplo ilustra el uso de las subexpresiones:
var customer = "Ricardo 2227-3735";
var pattern = /(\w+) ([\d-]+)/;
pattern.test(customer);

Para poder acceder de forma individual a cada una de las subexpresiones de la expresión regular anterior se
hace uso de propiedades especiales utilizando la siguiente sintaxis: $1, $2, $3, …, $9. Cada una de las
propiedades anteriores recorre la expresión regular de izquierda a derecha, de modo que $1 accede a la
subexpresión de más a la izquierda (o la primera), $2, hace referencia a la segunda subexpresión más a la
izquierda (segunda), y así sucesivamente, hasta llegar a la última subexpresión.
Para el caso del ejemplo anterior podríamos escribir una sentencia como la siguiente para acceder a las dos
subexpresiones y mostrar los componentes de la cadena compuesta en la variable customer:
alert("$1 = " + RegExp.$1 + "\n$2 = " + RegExp.$2);

NOTA IMPORTANTE: Según la especificación ECMA debería poder accederse a más de 9 subexpresiones
dentro de una misma expresión regular. Sin embargo, el soporte a esta característica por parte de los

Lenguajes Interpretados en el Cliente 5

 Guía # 6: Expresiones regulares con JavaScript

navegadores no se puede asumir por defecto. Sería de probar en cada uno a ver hasta cuántas
subexpresiones se puede tener acceso. La recomendación es no hacerlo a más de nueve; es decir, desde $1
hasta $9.

Trabajar con expresiones regulares

Cuando se trabaja con expresiones regulares en JavaScript, se utilizan los métodos test y exec del objeto
RegExp y los métodos match, replace, search y split del objeto String. La utilidad de cada uno de estos
métodos se muestra en la siguiente tabla:

CARÁCTER Significado
exec Método del objeto RegExp que realiza una búsqueda por una
coincidencia en una cadena. El método exec() devuelve un arreglo
(array) con información diversa. Esta información puede ser
accedida mediante propiedades referidas al objeto en el que se
asigna la ejecución del método exec().
test Es el método más básico del objeto RegExp realiza un análisis en la
cadena pasada como argumento para encontrar si hay coincidencia
con el patrón definido. Este método devuelve un valor lógico (true
o false).
match Método del objeto String que realiza la búsqueda de una
coincidencia dentro de una cadena. Retorna un arreglo con
información o un valor nulo en caso de haber error.
search Es un método del objeto String que realiza una búsqueda de un
patrón dentro de una cadena. Devuelve el índice del carácter en el
que empieza la primera subcadena coincidente.
replace Este método del objeto String devuelve una cadena que resulta de
reemplazar el texto que coincide con el primer argumento (una
expresión regular) dentro del segundo argumento (una cadena). Si
se utiliza el modificador g se reemplazan todas las coincidencias en
la cadena. De lo contrario sólo se reemplaza la primera
coincidencia.
split Este método del objeto String divide una cadena en subcadenas y
las devuelve en un arreglo (array).

III. MATERIALES Y EQUIPO

Para la realización de la guía de práctica se requerirá lo siguiente:

No. Requerimiento Cantidad
1 Guía de práctica #6: Expresiones regulares con JavaScript 1
2 Computadora con Editor HTML y navegadores instalados 1
3 Memoria USB 1

IV. PROCEDIMIENTO

INDICACIONES. Cree una estructura de carpetas para almacenar en el servidor web los guiones o secuencias
de comando que desarrollará durante esta guía de práctica. Se sugiere que cree una estructura con una
carpeta llamada lic, dentro de la cual creará una carpeta para cada ejemplo del procedimiento, a las que puede
llamar ejemplo1, ejemplo2, …, ejemploN (donde N es un entero) y dentro de cada una de estas carpetas una

Lenguajes Interpretados en el Cliente 6

 Guía # 6: Expresiones regulares con JavaScript

para hojas de estilo con nombre css, otra para los guiones de JavaScript que puede llamar js, otra para las
imágenes, si las utiliza, a la que podrá llamar img y otra para las fuentes, si las utiliza, a la que llamará fonts.

Ejemplo #1: En el siguiente ejemplo se utilizan expresiones regulares para validar distintos tipos de datos
que es usual ingresar en ciertos formularios, como el DUI, NIT, tarjeta de crédito, carnet de la UDB y
número de teléfono de El Salvador. Al seleccionar el tipo de dato se solicita en un campo de texto de
formulario ingresar el valor correspondiente y al presionar el botón enviar se valida que el dato ingresado
sea del formato correcto de acuerdo al tipo de dato seleccionado en el campo select.
Guión 1: validacion.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Validador de datos</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/formstyle.css" />
<script type="text/javascript" src="js/validatedata.js"></script>
<!-- Para las versiones anteriores -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<form action="javascript:void(0)" name="frmdatos" id="dataform">
<h2 class="contact">Validador de datos</h2>
<span class="contact">
<label for="tipo">Seleccione el tipo de dato:</label>&nbsp;&nbsp;
</span>
<select name="seltipo" id="tipo">
<option value="dui" selected>DUI</option>
<option value="nit">NIT</option>
<option value="tarjeta">Tarjeta de crédito</option>
<option value="carnet">Carnet UDB</option>
<option value="telefono">Teléfono</option>
</select>
<span class="contact">
<label for="txtdato">Dato:</label>&nbsp;&nbsp;
</span>
<input type="text" name="txtdato" id="data" value="" maxlength="20"
placeholder="(Ingrese el dato)" /><br />
<input type="button" name="btnvalidar" id="validar" value="Validar" />
</form>
</div>
</body>
</html>

Guión 2: fonts.css
@font-face {
font-family: 'YanoneKaffeesatzRegular';
src: url('../fonts/YanoneKaffeesatz-Regular-webfont.eot');
src: url('fonts/YanoneKaffeesatz-Regular-webfont.eot?#iefix') format('embedded-
opentype'),
url('../fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
url('../fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
url('../fonts/YanoneKaffeesatz-Regular-webfont.svg#YanoneKaffeesatzRegular')
format('svg');
font-weight: normal;
font-style: normal;
}

Lenguajes Interpretados en el Cliente 7

 Guía # 6: Expresiones regulares con JavaScript

@font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/BebasNeue-webfont.eot');
src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/BebasNeue-webfont.woff') format('woff'),
url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Guión 3: formstyle.css
body, div, h1, form, fieldset, input, textarea {
margin: 0;
padding: 0;
border: 0;
outline: none;
}

html {
height: 100%;
}

body {
background: #A4EB90;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A4EB90),
color-stop(1, #55963F)
);
background-image: -o-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: -moz-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: -webkit-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: -ms-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: linear-gradient(to bottom, #A4EB90 0%, #55963F 100%);
font-family: sans-serif;
}

.wrapper{
background:#CCC;
width:800px;
margin: 16px auto;
padding: 10px 30px;
}

h2.contact {
background: url(../img/validatedata.png) no-repeat -16px -50px;
color: #ff5400;
font-family: 'YanoneKaffeesatzRegular';
font-size: 66px;
height: 105px;
padding-left: 150px;
}

span.contact {
color: #4b4b4b;
font-family: 'BebasNeueRegular', Arial;
font-size: 24px;
line-height: 36px;
margin-bottom: 15px;

Lenguajes Interpretados en el Cliente 8

 Guía # 6: Expresiones regulares con JavaScript

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

}

input[type="text"] {
width: 236px;
}

textarea {
width: 600px;
height: 275px;
}

label {
color: #ff5400;
}

input,
textarea,
select {
background-color: rgba(255, 255, 255, 0.4);
border: 5px solid rgba(122, 192, 0, 0.15);
padding: 10px;
font-family: 'Keffeesatz', Arial;
color: #4b4b4b;
font-size: 24px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 15px;
margin-top: -10px;
}

input:focus,
textarea:focus,
select:focus {
background-color: rgba(255,255,255,1);
border: 5px solid #ff5400;
}

input[type="button"] {
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #619702),
color-stop(0.62, #7ac000)
);
background: -moz-linear-gradient(
center bottom,
#619702 23%,
#7ac000 62%
);
border: none; cursor: pointer; color: #fff;
font-size: 24px;
background-color: #7ac000;
padding: 5px 36px 8px 36px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);

Lenguajes Interpretados en el Cliente 9

 Guía # 6: Expresiones regulares con JavaScript

border-top: 1px solid rgba(255, 255, 255, 0.6);

}

input[type="button"]:hover {
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #c34000),
color-stop(0.62, #ff5400)
);
background: -moz-linear-gradient(
center bottom,
#c34000 23%,
#ff5400 62%
);
color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #ff5400;
}

input[type="button"]:active {
top: 1px;
}

Guión 4: validatedata.js
function iniciar(){
var boton = document.getElementById("validar");
if(boton.addEventListener){
boton.addEventListener("click", validar, false);
}
else if(boton.attachEvent){
boton.attachEvent("onclick", validar);
}
}

function validar(){
var tipo = document.frmdatos.seltipo.options[frmdatos.seltipo.selectedIndex].value;
var dato = document.frmdatos.txtdato.value;
var valido = false;
var re = null;
//alert(dato + "|" + tipo);
if(dato == null || dato == "" || dato.length == 0){
alert("No se ha ingresado ningún valor en el campo de formulario");
return 0;
}
switch(tipo){
//El formato de DUI en El Salvador es ########-#
case "dui":
re = /^\d{8}-\d{1}$/;
if(re.test(dato)){
valido = true;
}
break;
//El formato del NIT en El Salvador es ####-######-###-#
case "nit":
re = /^[0-9]{4}-[0-9]{6}-[0-9]{3}-[0-9]{1}$/;
if(re.test(dato)){
valido = true
}
break;
//Solo aplica para tarjetas de crédito Visa y Master Card
//en las que el formato es ####-####-####-####
case "tarjeta":

Lenguajes Interpretados en el Cliente 10

 Guía # 6: Expresiones regulares con JavaScript

re = /^(\d{4}-){3}(\d{4}){1}$/;
if(re.test(dato)){
valido = true;
}
break;
//El formato en los carnets de la UDB es LL######
case "carnet":
re = /^[A-Z]{2}[0-9]{6}$/;
if(re.test(dato)){
valido = true;
}
break;
//El formato de número telefónico en El Salvador es ####-####
case "telefono":
re = /^\d{4}-\d{4}$/;
if(re.test(dato)){
valido = true;
}
break;
default:
alert("El tipo de dato seleccionado no puede ser procesado");
break;
}
if(valido == true){
alert("El valor " + dato + " de " + tipo + " ingresado es válido");
}
else if(valido == false){
alert("El valor " + dato + " de " + tipo + " ingresado es inválido");
}
}

//Asociando función que manejará el evento load al cargar la página

if(window.addEventListener){
window.addEventListener("load", iniciar, false);
}
else{
window.attachEvent("onload", iniciar);
}

Ejemplo#2: El siguiente ejemplo permite validar el tipo de archivo que se intenta subir a un servidor web,
mediante el uso de un campo de formulario de tipo file. El control se simula usando un elemento label y
ocultando el verdadero campo input type="file". La validación que se hace usando una expresión regular
que verifica el nombre del archivo y la extensión, para que sólo acepte archivos de imagen que se puedan
publicar en la web, como .jpg, .png y .gif.
Guión 1: validadorarchivos.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Validador de archivos</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/search.css" />
<link rel="stylesheet" href="css/button.css" />
<script type="text/javascript" src="js/setvalue.js"></script>
<!-- Para las versiones anteriores del IE9 -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>

Lenguajes Interpretados en el Cliente 11

 Guía # 6: Expresiones regulares con JavaScript

<h1>Validador de tipos de archivos</h1>

</header>
<section>
<article>
<div id="wrap">
<form name="frmfile" method="POST" action="javascript:void(0);">
<!-- Campo ficticio en el que se mostrará la ruta (path) del archivo -->
<input type="text" name="urlarchivo" id="url-archivo" />
<!-- label para simular el botón "seleccionar archivo" -->
<label class="cargar">Buscar</label>
<!-- Campo input type=file original -->
<input type="file" name="archivo" accept="image/*" id="archivo" /><br
style="clear:both;" /><br /><br />
<input type="button" name="subir" id="upload" value="Subir" class="bluebutton" />
</form>
</div><!--/ wrap -->
</article>
</section>
</body>
</html>

Guión 2: button.css
.bluebutton {
background-color:#3bb3e0;
font-family: 'Open Sans', sans-serif;
font-size:13px;
font-weight:Bold;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
margin-bottom: 30px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229)
100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229)
100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229)
100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229)
100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)));
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px
#999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px
#999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-ms-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
color:#fff;
}

Lenguajes Interpretados en el Cliente 12

 Guía # 6: Expresiones regulares con JavaScript

.bluebutton:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202)
100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202)
100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202)
100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202)
100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px
#999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-ms-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.bluebutton:before {
background-color:#2591b4;
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-ms-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.bluebutton:active::before {
top:50%;
margin-top:-12px;
-webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px
#1a80a6;
-moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
-o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
-ms-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}

Guión 3: search.css
* {

Lenguajes Interpretados en el Cliente 13

 Guía # 6: Expresiones regulares con JavaScript

margin: 0;
padding: 0;
}

html {
height: 100%;
}

body {
background: rgba(245,241,193,1);
background: -moz-linear-gradient(-45deg, rgba(245,241,193,1) 0%, rgba(230,192,145,1)
100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%,
rgba(245,241,193,1)), color-stop(100%, rgba(230,192,145,1)));
background: -webkit-linear-gradient(-45deg, rgba(245,241,193,1) 0%,
rgba(230,192,145,1) 100%);
background: -o-linear-gradient(-45deg, rgba(245,241,193,1) 0%, rgba(230,192,145,1)
100%);
background: -ms-linear-gradient(-45deg, rgba(245,241,193,1) 0%, rgba(230,192,145,1)
100%);
background: linear-gradient(135deg, rgba(245,241,193,1) 0%, rgba(230,192,145,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f1c1',
endColorstr='#e6c091', GradientType=1 );
}

/* Contenedor */
#wrap {
height: auto;
margin: 24px auto;
width: 480px;
}

header h1 {
color: #352540;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
"AppleGothic", sans-serif;
font-size: 56px;
letter-spacing: .15em;
margin-top: 20px;
margin-bottom: 60px;
text-align: center;
text-shadow:
1px -1px 0 #767676,
-1px 2px 1px #737272,
-2px 4px 1px #767474,
-3px 6px 1px #787777,
-4px 8px 1px #7b7a7a,
-5px 10px 1px #7f7d7d,
-6px 12px 1px #828181,
-7px 14px 1px #868585,
-8px 16px 1px #8b8a89,
-9px 18px 1px #8f8e8d,
-10px 20px 1px #949392,
-11px 22px 1px #999897,
-12px 24px 1px #9e9c9c,
-13px 26px 1px #a3a1a1,
-14px 28px 1px #a8a6a6,
-15px 30px 1px #adabab,
-16px 32px 1px #b2b1b0,
-17px 34px 1px #b7b6b5,
-18px 36px 1px #bcbbba,
-19px 38px 1px #c1bfbf,
-20px 40px 1px #c6c4c4,

Lenguajes Interpretados en el Cliente 14

 Guía # 6: Expresiones regulares con JavaScript

-21px 42px 1px #cbc9c8,

-22px 44px 1px #cfcdcd,
-23px 46px 1px #d4d2d1,
-24px 48px 1px #d8d6d5,
-25px 50px 1px #dbdad9,
-26px 52px 1px #dfdddc,
-27px 54px 1px #e2e0df,
-28px 56px 1px #e4e3e2;
}

/* Ocultamos el input file */

input[type="file"] {
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
margin: 0;
padding:0;
left:0;
}

/* Al label lo convertimos en "boton" (en apariencia) */

label.cargar {
background-color: #8E789B;
color: #fff;
cursor: pointer;
display: block;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
height: 30px;
font-size: 18px;
float: left;
line-height: 1.6em;
text-align: center;
width: 100px;
}

label.cargar:hover {
background-color: #9C60b3;
cursor: pointer;
filter: alpha(opacity = 75);
-ms-filter: "alpha(opacity=75)";
font-weight: bold;
opacity: 0.75;
}

input[type="text"] {
background: #ececec;
border: 3px ridge #633069;
border-radius: 6px;
float: left;
height: 18px;
padding: 3px 5px;
width: 320px;
}

Lenguajes Interpretados en el Cliente 15

 Guía # 6: Expresiones regulares con JavaScript

Guión 4: setvalue.js
function init(){
var fileinput = document.getElementById("archivo");
var upload = document.getElementById("upload");
if(fileinput.addEventListener){
fileinput.addEventListener("change", function(){
setvalue(document.frmfile.archivo);
}, false);
}
else if(fileinput.attachEvent){
fileinput.attachEvent("onchange", function(){
setvalue(document.frmfile.archivo);
});
}
if(upload.addEventListener){
upload.addEventListener("click", function(){
submitFile(document.frmfile.archivo);
}, false);
}
else if(upload.attachEvent){
upload.attachEvent("onclick", function(){
submitFile(document.frmfile.archivo);
});
}
}

function submitFile(upload){
var archivo = document.frmfile.archivo.value;
if(archivo == null || archivo == "" || archivo.length == 0){
alert("No se ha seleccionado ningún archivo para subir al servidor.");
return false;
}
if(imgURL(upload.value)){
alert("El archivo " + upload.value + " es un archivo de imagen válido.");
return true;
}
alert("El archivo no es del tipo requerido.");
return false;
}

function setvalue(fileInput){
if(imgURL(fileInput.value)){
document.frmfile.urlarchivo.value = fileInput.value;
}
else {
alert("El archivo que intenta subir no es del tipo requerido");
return false;
}
}

function imgURL(url){
var re;
if(/[Ff]irefox/.test(navigator.userAgent)){
re = /^[0-9a-zA-Z ... ]+\.(jpg|png|gif)$/i;
}
else{
re = /(?:[\w]\:|\\)(\\[a-z_\-\s0-9\.]+)+\.(jpg|png|gif)$/i;
}
if(re.test(url)){
return true;
}
return false;
}

Lenguajes Interpretados en el Cliente 16

 Guía # 6: Expresiones regulares con JavaScript

if(window.addEventListener){
window.addEventListener("load", init, false);
}
else{
window.attachEvent("onload", init);
}

Ejemplo #3: El siguiente ejemplo muestra cómo ir contando palabras que se ingresan en un campo textarea
y mostrar mientras se escribe en un campo de texto de solo lectura
Guión 1: contadorpalabras.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Contador de palabras</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/font.css" />
<link rel="stylesheet" href="css/formstyle.css" />
<script type="text/javascript" src="js/wordcount.js"></script>
<!-- Para las versiones anteriores del IE9 -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>
<header>
<h1>Contador de palabras</h1>
</header>
<section>
<article id="formarea">
<form name="frmpalabras">
<fieldset>
<label for="message">Mensaje:</label>
<textarea name="mensaje" id="message" placeholder="Ingrese un
mensaje"></textarea><br />
<label for="count">Conteo:</label>
<input type="text" name="conteo" id="count" readonly="readonly" value="0" />
</fieldset>
</form>
</article>
</section>
</body>
</html>

Guión 2: wordcount.js
function init(){
var textarea = document.getElementById("message");
var inputtext = document.getElementById("count");
if(textarea.addEventListener){
textarea.addEventListener("keyup", function(){
wordcount(this, document.frmpalabras.conteo);
}, false);
}
else if(textarea.attachEvent){
textarea.attachEvent("onkeyup", function(){
wordcount(this, document.frmpalabras.conteo);
});
}
if(inputtext.addEventListener){

Lenguajes Interpretados en el Cliente 17

 Guía # 6: Expresiones regulares con JavaScript

inputtext.addEventListener("keyup", function(){
wordcount(document.frmpalabras.mensaje, this);
});
}
else if(inputtext.attachEvent){
inputtext.attachEvent("onkeyup", function(){
wordcount(document.frmpalabras.mensaje, this);
});
}
}

function wordcount(w,x){
var y = w.value;
var r = 0;
a = y.replace(/\s/g,' ');
a = a.split(' ');
for(z=0; z<a.length; z++){
if(a[z].length > 0) r++;
}
x.value = r;
}

if(window.addEventListener){
window.addEventListener("load", init, false);
}
else{
window.attachEvent("onload", init);
}

Guión 3: font.css
@font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic.eot');
src: url('../fonts/League_Gothic.woff') format('woff'),
url('../fonts/League_Gothic.otf') format('opentype'),
url('../fonts/League_Gothic.svg#LeagueGothic') format('svg');
}

Guión 4: formstyle.css
* {
border: 0;
margin: 0;
outline: none;
padding: 0;
}

html {
height: 100%;
}

body {
background: #1e2021; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e2021 1%, #4a4e54 50%, #0c0309 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#1e2021),
color-stop(50%,#4a4e54), color-stop(100%,#0c0309)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /* Opera
11.10+ */
background: -ms-linear-gradient(-45deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /* IE10+
*/

Lenguajes Interpretados en el Cliente 18

 Guía # 6: Expresiones regulares con JavaScript

background: linear-gradient(135deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e2021',
endColorstr='#0c0309',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
font-family: 'LeagueGothicRegular',Arial,Helvetica,"Liberation Sans";
}

h1 {
font-size: 48px;
color: #9ab;
text-transform: uppercase;
text-align: center;
margin: 16px auto;
text-shadow: 1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; /* end of 4 level deep dark shadow */
/* CSS3 Transform Effect */
-webkit-transform: scale(1.2); /* Safari & Chrome */
-moz-transform: scale(1.2); /* Firefox */
-o-transform: scale(1.2); /* Opera */
}

#formarea {
background: #c9d0de; border: 1px solid #e1e1e1;
-moz-box-shadow: 0px 0px 8px #444;
-webkit-box-shadow: 0px 0px 8px #444;
margin: 20px auto;
padding: 20px 10px;
width: 430px;
}

label {
float: left;
clear: left;
margin: 11px 20px 0 0;
width: 100px;
text-align: right;
font-size: 16px;
color: #445668;
text-transform: uppercase;
text-shadow: 0px 1px 0px #f2f2f2;
}

input {
width: 260px;
height: 35px;
padding: 5px 20px 0px 20px;
margin: 0 0 20px 0;
background: #546a7f; /* Old browsers */
background: -moz-linear-gradient(-45deg, #546a7f 0%, #5e768f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#546a7f),
color-stop(100%,#5e768f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* IE10+ */
background: linear-gradient(135deg, #546a7f 0%,#5e768f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#546a7f',
endColorstr='#5e768f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Lenguajes Interpretados en el Cliente 19

 Guía # 6: Expresiones regulares con JavaScript

-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;
-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif;
font-size: 16px;
color: #f2f2f2;
text-transform: uppercase;
text-shadow: 0px -1px 0px #334f71;
}

input::-webkit-input-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}

input:-moz-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}

textarea {
width: 260px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0;
background: #546a7f; /* Old browsers */
background: -moz-linear-gradient(-45deg, #546a7f 0%, #5e768f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#546a7f),
color-stop(100%,#5e768f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* IE10+ */
background: linear-gradient(135deg, #546a7f 0%,#5e768f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#546a7f',
endColorstr='#5e768f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;
-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif;
font-size: 16px;
color: #f2f2f2;
text-transform: uppercase;
text-shadow: 0px -1px 0px #334f71;
}

textarea::-webkit-input-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}

textarea:-moz-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}

input:focus,
textarea:focus {
background: #668099; /* Old browsers */
background: -moz-linear-gradient(-45deg, #668099 0%, #728eaa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#668099),
color-stop(100%,#728eaa)); /* Chrome,Safari4+ */

Lenguajes Interpretados en el Cliente 20

 Guía # 6: Expresiones regulares con JavaScript

background: -webkit-linear-gradient(-45deg, #668099 0%,#728eaa 100%); /*

Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #668099 0%,#728eaa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #668099 0%,#728eaa 100%); /* IE10+ */
background: linear-gradient(135deg, #668099 0%,#728eaa 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#668099',
endColorstr='#728eaa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Ejemplo #4: El siguiente ejemplo permite ingresar un deporte en una caja de texto y mientras ingresa el
nombre del deporte, si está presente en el cuadro de lista, comienza a mostrar las coincidencias filtrando en
el momento en el cuadro de lista. Adicionalmente se puede hacer doble clic en el cuadro de lista cuando
todavía no se ha terminado de escribir el nombre del deporte e inmediatamente llena el cuadro de texto
donde se estaba ingresando el nombre del deporte. Para esto se utilizan manejadores de evento en la caja
de texto con keyup y dblclick en el cuadro de lista.
Guión 1: busqueda.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Deportes olímpicos</title>
<meta charset="utf-8" />
<link rel='stylesheet'
href='http://fonts.googleapis.com/css?family=Montserrat:400,700'>
<link rel="stylesheet" href="css/formstyle.css" />
<script type="text/javascript" src="js/busqueda.js"></script>
</head>
<body>
<div class="box-wrap">
<form id="frmsearchsport" name="frmsearchsport">
<fieldset id="box-form">
<legend>¿Qué deportes olímpico te gusta más?</legend>
<label for="txtsport">Ingresa un deporte:</label>
<input type="text" id="txtsport" name="busca" size="24"><br/>
<label for="lstsports">Listado:</label>
<select name="lstsports" id="lstsports" size="24">
</select>
</fieldset>
</form>
</div>
</body>
</html>

Guión 2: búsqueda.js
//Definir la matriz o arreglo con los datos
var lista = new Array('Aerobic', 'Ajedrez', 'Atletismo', 'Balonmano', 'Béisbol',
'Badminton',
'Baloncesto', 'Boxeo', 'Ciclismo', 'Equitación', 'Esgrima',
'Footing',
'Fútbol', 'Gimnasia artística', 'Gimnasia rítmica', 'Judo',
'Lanzamiento de disco',
'Lanzamiento de jabalina', 'Levantamiento de pesas', 'Lucha',
'Natación',
'Natación sincronizada', 'Patinaje', 'Pentatlón', 'Remo', 'Salto
alto',
'Salto largo', 'Tenis', 'Tenis de mesa', 'Tiro con arco',
'Voleibol', 'Waterpolo'
);

//Función iniciar desde donde se controlarán los manejadores de evento

//a utilizar

Lenguajes Interpretados en el Cliente 21

 Guía # 6: Expresiones regulares con JavaScript

function iniciar(){
//Creando el controlador de evento para el evento
//doble clic sobre los elementos del cuadro de lista
var lista = document.getElementById("lstsports");
//Cargando los datos en el cuadro de lista al cargar la página
cargarLista();
if(lista.addEventListener){
lista.addEventListener("dblclick", function(){
cargarTexto(this.options[this.selectedIndex].text);
}, false);
}
else if(lista.attachEvent){
lista.attachEvent("ondblclick", function(){
cargarTexto(this.options[this.selectedIndex].text);
});
}
//Capturando el campo de texto sobre el que se ingresan los deportes
//mediante pulsasión de tecla
var texto = document.getElementById("txtsport");
if(texto.addEventListener){
texto.addEventListener("keyup", buscar, false);
}
else if(texto.attachEvent){
texto.attachEvent("onkeyup", buscar);
}
}

function cargarLista() {
// Cargamos el combo
for(x=0;x<lista.length;x++)
document.frmsearchsport.lstsports[x] = new Option(lista[x]);
}

function cargarTexto(elemento){
if(elemento!=null && elemento!=undefined && elemento!="")
document.frmsearchsport.txtsport.value = elemento;
}

function buscar() {
limpiarLista();
// Se obtiene el valor del texto
var str = document.frmsearchsport.txtsport.value;

// Crear la expresión regular

var expr = new RegExp("^" + str,"i");
// Recorrer la lista. Si la expresión regular es OK
y = 0;
for(x=0;x<lista.length;x++) {
if(expr.test(lista[x])) {
document.frmsearchsport.lstsports[y] = new Option(lista[x]);
y++;
}
}
}

function limpiarLista() {
for(x=document.frmsearchsport.lstsports.length;x>=0;x--)
document.frmsearchsport.lstsports[x] = null;
}

//Asociando función que manejará el evento load al cargar la página

if(window.addEventListener){
window.addEventListener("load", iniciar, false);

Lenguajes Interpretados en el Cliente 22

 Guía # 6: Expresiones regulares con JavaScript

}
else if(window.attachEvent){
window.attachEvent("onload", iniciar);
}

Guión 3: formstyle.css
* {
margin: 0;
padding: 0;
}

body {
background:url(../img/bg-body.png);
font-family: 'Montserrat', sans-serif;
font-size: 16px;
height: 100%;
}

.box-wrap {
margin: 20px;
min-height: 460px;
position: relative;
}

fieldset {
background: url(../img/bg-form.png);
margin: 0 auto;
padding: 12px 16px;
height: auto;
width: 40%;
}

legend {
background: rgba(98,125,77,1);
background: -moz-linear-gradient(left, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(98,125,77,1)),
color-stop(100%, rgba(31,59,8,1)));
background: -webkit-linear-gradient(left, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: -o-linear-gradient(left, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: -ms-linear-gradient(left, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: linear-gradient(to right, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d',
endColorstr='#1f3b08', GradientType=1 );
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-o-border-radius: 16px;
-ms-border-radius: 16px;
border-radius: 16px;
color: #fcecfc;
padding: 12px 8px;
}

label {
color: #222;
float: left;
font-size: 1em;
font-weight: bold;
margin: 6px;
text-shadow: 0px 2px 3px #555;
width: 180px;
}

Lenguajes Interpretados en el Cliente 23

 Guía # 6: Expresiones regulares con JavaScript

input[type='text'] {
background-color: #F5F5F8;
border: 1px solid #C9CAD1;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-o-border-radius: 3px 3px 3px 3px;
-ms-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
color: #333;
font-size: 1.2em;
height: 28px;
margin: 13px 0;
padding: 12px;
width: 96%;
}

select {
border: 1px solid #c9cad1;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
margin: 11px 0px;
color:#333;
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
-webkit-appearance: none;
background:#f5f5f8 url(../img/downarrow.png) no-repeat 328px 19px;
padding:12px;
width:96%;
}

Ejemplo #5: El siguiente ejemplo permite encontrar dentro de un documento todos los elementos que
existen que son de una clase seleccionada mediante un campo select de formulario. Cuando ha ingresado
en un elemento de tipo texto el nombre del elemento en el que desea buscar o indicando que buscará en
todos los elementos por la clase. Se utiliza una expresión regular, en este caso con el constructor new
RegExp() por el hecho de que el patrón de expresión regular se determina hasta que el usuario da clic en el
botón encontrar del formulario; es decir, la expresión regular no es fija.
Guión 1: testpage.html
<!DOCTYPE html>
<html lang="es">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/modernform.css" />
<script type="text/javascript" src="js/findclass.js"></script>
</head>
<body>
<section>
<article>
<div class="samurai ninja">
</div>
<div class="ninja samurai">
</div>
<div></div>
<span class="samurai ninja viking"></span><br />
<div class="container">
<section class="tabblue">
<ul class="tabs blue">
<li>
<input type="radio" name="tabs blue" id="tab1" checked="">
<label for="tab1">Recuento de clases</label>

Lenguajes Interpretados en el Cliente 24

 Guía # 6: Expresiones regulares con JavaScript

<div id="tab-content1" class="tab-content">

<p>
Qué clase desea buscar en el documento.
</p>
<form name="frmclass" id="classname">
<span class="tabaddon"><i class="fa fa-user fa-2x"></i></span>
<input type="text" name="txtname" id="txtname" list="tags"
placeholder="(Ingrese una clase)" required class="field" />
<datalist id="tags">
<option value="ninja" class="field"></option>
<option value="samurai" class="field"></option>
<option value="viking" class="field"></option>
</datalist>
<span class="tabaddon"><i class="fa fa-degree fa-2x"></i></span>
<select name="selelement" id="selelement" required>
<option disabled="" selected="">(Seleccione una etiqueta)</option>
<option value="*">TODOS</option>
<option value="div">DIV</option>
<option value="span">SPAN</option>
</select>
<div class="btn">
<input type="button" name="btnSend" id="btnSend" value="Encontrar"
/>
</div>
</form>
</div>
</li>
</ul>
</section>
</div>
</article>
</section>
</body>
</html>

Guión 2: findclass.js
function iniciar(){
var classname, tag="";
var btnfind = document.getElementById("btnSend");
if(btnfind.addEventListener){
btnfind.addEventListener("click", function(){
//Es de suponer que el valor del campo de texto y del campo select del
formulario
//estará establecido cuando se haga clic sobre el botón Encontrar
classname = document.frmclass.txtname.value;
tag =
document.frmclass.selelement[document.frmclass.selelement.selectedIndex].value;
alert("Se han encontrado " + findClassInElements(classname, tag) + " elementos
" + tag.toString() + " con la clase " + classname);
}, false);
}
else if(btnfind.attachEvent){
btnfind.attachEvent("onclick", function(){
//Es de suponer que el valor del campo de texto y del campo select del
formulario
//estará establecido cuando se haga clic sobre el botón Encontrar
classname = document.frmclass.txtname.value;
tag =
document.frmclass.selelement[document.frmclass.selelement.selectedIndex].value;
alert("Se han encontrado " + findClassInElements(classname, tag) + " elementos
" + tag.toString() + " con la clase " + classname);
});

Lenguajes Interpretados en el Cliente 25

 Guía # 6: Expresiones regulares con JavaScript

}
}

function findClassInElements(className, type){

//Detectar el elemento sobre el que se realizará la búsqueda de la clase.
//Pude ser un elemento en particular o todos los elementos
var elems = document.getElementsByTagName(type || "*");
//En este caso el patrón de la expresión regular incluirá una variable,
//por lo tanto estará obligado a usar el contructor RegExp.
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
var results = new Array();
//El ciclo recorre toda la página comprobando en el elemento enviado a la función
//si la clase está presente o no en dicho elemento. Si lo está se guarda dentro
//de la matriz o arreglo results.
for(var i=0, length=elems.length; i<length; i++){
if(regex.test(elems[i].className)){
results.push(elems[i]);
}
}
//Se devuelve el total encontrado
return results.length;
}

//Asociando función que manejará el evento load al cargar la página

if(window.addEventListener){
window.addEventListener("load", iniciar, false);
}
else if(window.attachEvent){
window.attachEvent("onload", iniciar);
}

Guión 3: modernform.css
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
@import url(http://fonts.googleapis.com/css?family=Raleway:100,200,300);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #FFFFFF;
color: #fff;
font-family: 'Lato',Arial,sans-serif;
text-align: left;
}

header {
border-bottom: 1px solid #EDEFF0;
color: #009EE0;
font-family: 'Lato',Arial,sans-serif;
height: 100px;
line-height: 100px;
margin: 0 auto;
max-width: 100%;
position: relative;
text-align: center;

Lenguajes Interpretados en el Cliente 26

 Guía # 6: Expresiones regulares con JavaScript

h1 {
color:#2d2b2c;
font-size: 2.625em;
font-weight: 300;
line-height: 1.3;
line-height:100px;
margin: 0;
}

small {
bottom: 25px;
color: #EF0C72;
font-size: 18px;
font-weight: bold;
position: relative;
}

.container {
float: left;
height: 481px;
padding: 20px 0;
width: 100%;
}

section {
position: relative;
height: 442px;
margin-left: 50%;
left: -197px;
width: 394px;
}

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

/* Anulando estilos de campos de formulario cuando se obtenga el foco */

:focus {outline:none}

.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor:pointer;
}

.fa:hover{
-moz-transform:scale(1.2); /* Firefox */
-ms-transform:scale(1.2); /* IE 9 */
-o-transform:scale(1.2); /* Opera */

Lenguajes Interpretados en el Cliente 27

 Guía # 6: Expresiones regulares con JavaScript

-webkit-transform:scale(1.2); /* Safari and Chrome */

transform:scale(1.2);
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;

/* makes the font 33% larger relative to the icon container */

.fa-2x {
font-size: 20px;
line-height:40px;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-user:before {
content: "\f13b";
}
.fa-envelope:before {
content: "\f007";
}
.fa-lock:before {
content: "\f113";
}
.fa-facebook:before {
content: "\f02e";
}
.fa-twitter:before {
content: "\f099";
}
.fa-degree:before {
content: "\f13c";
}

.tabs h1 {
font-size: 32px;
font-family: 'Roboto';
margin-bottom:15px;

}
.tabs p {
font-size: 14px;
line-height: 20px;
margin-bottom: 8px;
}

/* Each Tab CSS to make Radio button Work*/

/* Blue Color Tab - If you want to used blue tab, just used following css*/

/******************** START ********************/

.tabs.blue {
float: left;
list-style: none;
position: relative;
text-align: left;
width: 394px;
}

.tabs.blue li {
float: right;

Lenguajes Interpretados en el Cliente 28

 Guía # 6: Expresiones regulares con JavaScript

display: block;
}

.tabs.blue input[type="radio"] {
left: -9999px;
position: absolute;
top: -9999px;
}

.tabs.blue label {
display: block;
padding: 14px 31px;
font-size: 16px;
font-weight: normal;
cursor: pointer;
position: relative;
top: 5px;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.tabs.blue .tab-content {
z-index: 2;
display: none;
overflow: hidden;
width: 100%;
font-size: 17px;
line-height: 25px;
padding: 15px;
position: absolute;
top: 53px;
left: 0;
}

.tabs.blue [id^="tab"]:checked + label {

padding-top: 17px;
top: 5px;

.tabs.blue [id^="tab"]:checked ~ [id^="tab-content"] {

display: block;
}

/* TAB COLOR SCHEME FOR BLUE */

.tabblue .tabs label {
background: #16b3f5;
}

.tabblue .fa:hover{
color:#009EE0;
}

.tabblue .tabs label:hover {

background: #009EE0;
}

.tabblue .tabs .tab-content {

background: #009EE0;
}

Lenguajes Interpretados en el Cliente 29

 Guía # 6: Expresiones regulares con JavaScript

.tabblue .tabs [id^="tab"]:checked + label {

background: #009EE0;
}

.tabblue .tabs input[type="button"] {

background:#3a57af;
color: #f0f3f6;
}

.tabblue .tabs input[type="button"]:hover {

background:#c4f1fe;
color: #060930;
}

.tabblue .tabaddon {
color: #16B3F5;
}

/******************** END ********************/

/* TAB Form */
.tabs input[type="text"],
.tabs input[type="number"],
.tabs input[type="date"],
.tabs input[type="password"],
.tabs input[type="email"],
.tabs select {
border: medium none;
color: #757575;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
padding: 10px;
width: 89%;
}

/* Estilos para los input type=radio del género */

.tabs .accounttype input[type="radio"] {
visibility: hidden;
}

.tabs .accounttype label.radio {

cursor: pointer;
display: inline-block;
margin-bottom: 15px;
overflow: visible;
position: relative;
text-indent: 20px;
}

.tabs .accounttype label.radio:before {

background: #778899;
-ms-border-radius: 100%;
-o-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 10%;
content:'';
position: absolute;
top: 16px;
left: 6px;
height: 20px;
width: 20px;

Lenguajes Interpretados en el Cliente 30

 Guía # 6: Expresiones regulares con JavaScript

.tabs .accounttype label.radio:after {

background: transparent;
border: 3px solid #ffffff;
border-top: none;
border-right: none;
content: '';
height: 0.25em;
left: 10px;
opacity: 0;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
width: 0.5em;
}

.tabs .accounttype input[type="radio"]:checked + label:after {

opacity: 1;
}

/* Estilos del elemento select de carrera */

.tabs select {
float:left;
width: 89%;
}

.tabs select.last {
margin-right:0px;
}

.tabs .btn {
float: left;
margin-top: 15px;
width: 100%;
}

.tabs .btn em{

font-size:12px;
}

.tabs input[type="button"]{
display:block;
float:right;
cursor:pointer;
border-top: 2px solid #a3ceda;
border-left: 2px solid #a3ceda;
border-right: 2px solid #4f6267;
border-bottom: 2px solid #4f6267;
padding: 10px 20px !important;
font-size: 14px !important;
background-color: #c4f1fe;
font-weight: bold;
color: #2d525d;
text-decoration:none;
}

.tabs input[type="button"]:hover{
-webkit-transition: 0.5s;

Lenguajes Interpretados en el Cliente 31

 Guía # 6: Expresiones regulares con JavaScript

-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

.tabs h4{
font-style:italic;
text-align:center;
margin-bottom:10px;
font-weight:normal;
}

.tabaddon {
background: none repeat scroll 0 0 #FFFFFF;
border-right: 1px solid #ebebeb;
float: left;
height: 40px;
text-align: center;
width: 40px;
}

.tabs .social {
float:left;
margin-bottom:10px;
width:100%;
}
.tabs .social a {
color:#FFF;
float:left;
font-size:14px;
padding: 10px 65px 10px 30px;
text-decoration:none;
}

.tabs .social .fa{

margin-right:25px;
}

.tabs .social .facebook{

background: none repeat scroll 0 0 #3B5998;
}

.tabs .social .facebook:hover{

background:#3e5fa4;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.tabs .social .twitter{

background: none repeat scroll 0 0 #16B3F5;
}

.tabs .social .twitter:hover{

background:#34bbf4;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;

Lenguajes Interpretados en el Cliente 32

 Guía # 6: Expresiones regulares con JavaScript

V. DISCUSION DE RESULTADOS

1. Realice un validador de expresiones regulares para los siguientes casos: a) direcciones IPv4 (tome en
cuenta que las direcciones IP llegan como máximo hasta 255.255.255.255), b) direcciones web (URLs)
tomando en cuenta protocolos como http, https y ftp y que las direcciones como
//html5shiv.googlecode.com/svn/trunk/html5.js también son válidas, y c) direcciones de correo
electrónico. La implementación debe ser exactamente igual que el problema número 1 en el que se
selecciona el tipo de validación que queremos y un campo de texto a la par donde se ingresa esa
dirección.

Haga que aparezca el mensaje de alerta apropiado si la URL o la dirección IP es válida o no.
2. Siguiendo el ejemplo del ejercicio 3, cree un script que le permita buscar palabras de un diccionario para
mostrar su definición en un área de texto. La definición deberá cargarse en el área de texto al hacer doble
clic sobre la palabra deseada en el cuadro de lista o al hacer clic en un botón denominado mostrar
definición. Como el cuadro de lista contendrá muchas palabras deberá utilizar un cuadro de texto para
filtrar las palabras a medida se vaya escribiendo en el cuadro de texto. Puede utilizar una interfaz como la
que se muestra a continuación. Como mínimo deberá presentar unas 80 palabras con sus definiciones.
Utilice palabras con la mayor parte de letras del alfabeto español.

VI. BIBLIOGRAFIA

 Powell, Thomas / Schneider, Fritz. JavaScript Manual de Referencia. 1ra Edición. Editorial McGraw-Hill.
2002. Madrid, España.
 Flanagan, David. JavaScript La Guía Definitiva. 1ra Edición. Editorial ANAYA Multimedia. 2007. Madrid,
España.
 McFedries, Paul. JavaScript Edición Especial. 1ra Edición. Editorial Prentice Hall. 2002. Madrid, España.
 López Quijado, José. Domine JavaScript. 2da Edición. Editorial Alfaomega RAMA. Mayo 2007. México
D.F.
 http://developer.mozilla.org/es/docs/Gu%C3%ADa_JavaScript_1.5:Expresiones_Regulares.

Lenguajes Interpretados en el Cliente 33