UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLGICOS COMPUTACIN

Nombre de la Practica: Lugar de Ejecucin: Tiempo Estimado: MATERIA: DOCENTES: GUIA DE LABORATORIO #6 Expresiones regulares con JavaScript Centro de cmputo 2 horas con 30 minutos Lenguajes Interpretados en el Cliente Inga. Blanca Iris Caas (G-01L), Inga. Issela Meja (Pilet Ricaldone), Tec. Jonathan Arvalo (Pilet Don Bosco)

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 informacin ingresada en campos de formularios. Utilizar expresiones regulares para reemplazar texto. Utilizar los mtodos 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 expresin regular permite especificar patrones de caracteres que sern comparados con cadenas de texto con el objeto de validar datos de entrada, realizar bsquedas y/o reemplazos. Entre las utilidades ms comunes de las expresiones regulares estn la comprobacin de datos introducidos en formularios, la creacin y el anlisis de cookies, la construccin y modificacin de cadenas de texto, etc. Las expresiones regulares permiten el reconocimiento y extraccin de casi cualquier tipo de datos de cadena con formato predecible como pueden ser direcciones URL, direcciones de correo electrnico, nmeros de telfono, nmeros de identificacin, cookies, etc. Creacin 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 patrn van colocados entre barras de divisin ("/" y "/"). Por ejemplo, para crear una expresin regular que coincida con una cadena que contenga http://, deberamos escribir: var pattern = /http:\/\//; En donde se han utilizado cdigos de escape para las barras de divisin.

1 / 14

Gua de prctica #6: Expresiones regulares con JavaScript Modificadores de las expresiones regulares Los modificadores se utilizan para alterar la interpretacin del patrn. Estos modificadores se colocan inmediatamente despus de la barra de cierre de la expresin regular ("/"). La tabla siguiente muestra los modificadores de las expresiones regulares CARCTER Significado i Sin distincin entre maysculas y minsculas g Correspondencia global, que significa que encuentra todas las correspondencias de las cadenas y no solo la primera m Correspondencia de lneas mltiples Cuando se utiliza el constructor RegExp deben enviarse como argumentos del constructor, el patrn deseado y el modificador especial para dicho patrn 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 patrn a comparar no se determina hasta el momento de la ejecucin. Podramos permitir al usuario introducir la expresin regular y luego pasarla al constructor RegExp() como argumento. Caracteres especiales para la creacin de patrones Existen una serie de caracteres especiales utilizados en las expresiones regulares que sirven para definir patrones. Estos se pueden agrupar en varias categoras, entre las que se pueden mencionar: Indicadores de posicin Son caracteres especiales que dan informacin sobre la posicin en la que tiene que estar el patrn en la cadena con la que se comparar. Los caracteres indicadores de posicin utilizados en expresiones regulares de JavaScript se muestran a continuacin: CARCTER Significado ^ El patrn debe aparecer al comienzo de la cadena $ El patrn debe aparecer al final de la cadena Por ejemplo, el resultado de la evaluacin de la expresin regular que se muestra en el siguiente segmento de cdigo dar un resultado de falso: var re = /^http/; re.test("El protocolo es http"); Pero si creamos la expresin regular con el smbolo $ el resultado ser verdadero si escribimos: var re = /http$/; re.test("El protocolo es http");

Cdigos de escape
Las expresiones regulares de JavaScript utilizan cdigos de escape para indicar caracteres que podran generar ambigedad al utilizarlos dentro de la definicin del patrn de una expresin regular. Cada carcter de cdigo de escape se especifica utilizando un carcter de barra invertida (\). Los cdigos de escape utilizados en JavaScript son un superconjunto de los utilizados en las cadenas. El conjunto completo de caracteres de cdigos de escape se muestran en la siguiente tabla:

Lenguajes Interpretados en el Cliente

Gua de prctica #6: Expresiones regulares con JavaScript CDIGO \f \n \r \t \v \/ \\ \. \* \+ \? \| \( \) \[ \] \{ \} \OOO \xHH \xHHHH CORRESPONDENCIA CON Avance de pgina Nueva lnea Retorno de carro Tabulador Tabulador vertical Barra inclinada Barra invertida Punto Asterisco Signo ms Signo de interrogacin Barra horizontal Parntesis de apertura Parntesis de cierre Corchete de apertura Corchete de cierre Llave de apertura Llave de cierre Carcter ASCII representado por el valor octal Carcter ASCII representado por el valor hexadecimal HH Carcter Unicote representado por el valor hexadecimal HHHH

Por ejemplo, el resultado de la evaluacin de la siguiente expresin regular dar como resultado falso: var re = /http:\/\//; re.test(www.udb.edu.sv); Por el contrario la evaluacin de la siguiente expresin regular dar verdadero: var re = /http:\/\//; re.test(http://www.udb.edu.sv);

Cuantificadores de repeticin
Estos caracteres permiten indicar la cantidad de veces que un elemento anterior al cuantificador de repeticin en la expresin, puede o debe aparecer. Entindase por elemento el carcter o conjunto de caracteres anterior. Los cuantificadores de repeticin se muestran en la siguiente tabla: CARCTER Significado * Busca coincidencia con el elemento (carcter) anterior cero o ms veces. + Busca coincidencia con el elemento (carcter) anterior una o ms veces. ? Busca coincidencia con el elemento (carcter) anterior cero o una vez, pero no ms. {m} Busca coincidencia con el elemento (carcter) anterior exactamente m veces. {m, n} Busca coincidencia con el elemento (carcter) anterior un mnimo de m veces y un mximo de n veces. {m, } Busca coincidencia con el elemento (carcter) anterior m o ms veces.

Lenguajes Interpretados en el Cliente

Gua de prctica #6: Expresiones regulares con JavaScript Observe los siguientes ejemplos: var re = /ab*c/; Se obtendr verdadero si se evala con las siguientes expresiones: re.test("ac"); re.test("abbc"); re.test("El abc del amor");

Agrupamiento de caracteres
JavaScript permite agrupar caracteres utilizando parntesis. Muchas veces se requiere que el elemento anterior no sea un carcter especfico sino un grupo de posibilidades de caracteres. Cualquier grupo de secuencias de cdigos de expresiones regulares encerrado entre parntesis 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 ms repeticiones de "bc". En el caso de querer especificar en un patrn clases de caracteres como caracteres vlidos 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 nmero. Como "2227-3735", "Tena 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 guin ("-") para indicar un rango de caracteres. Por ejemplo:
var patron = /[0-9]/; //Busca correspondencia con cualquier cadena que contenga nmero var patron = /[a-zA-Z]/; //Busca correspondencia con cualquier carcter alfabtico var patron = /[a-zA-Z0-9]/;//Busca correspondencia con cualquier carcter alfanumrico

Los corchetes tambin 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 carcter cincunflejo ("^") al inicio de la clase. Por ejemplo:
var patron = /[^a-zA-Z]+/; //Coincidir con secuencias de uno o ms caracteres no //alfabticos

NOTA IMPORTANTE: Recuerde que el circunflejo tambin se utiliza como indicador de posicin. Usted debe distinguirlo del uso como carcter negativo por el hecho de que en este ltimo caso debe ir dentro de los smbolos de corchetes. Existen otras clases de caracteres, como el punto (".") que se utiliza para que se acepte cualquier carcter, con excepcin del salto de lnea. Tambin se puede utilizar la secuencia \s, para indicar que se acepta cualquier carcter de espacio en blanco ( \t\n\r\f\v), \S para cualquier carcter que no sea espacio en blanco. \w, para cualquier carcter alfanumrico y \W, para cualquier carcter que no sea alfanumrico. \d, para cualquier carcter de dgito. \D para cualquier carcter que no sea dgito.

Lenguajes Interpretados en el Cliente

Gua de prctica #6: Expresiones regulares con JavaScript La siguiente tabla muestra un resumen de las clases de caracteres:

CDIGO [caracteres] [^caracteres] . \w \W \s \S \d \D \b \B [\b]

CORRESPONDENCIA CON Cualquier carcter indicado explcitamente o como un rango entre los corchetes Cualquier carcter que no sea ninguno de los indicados entre los corchetes representados explcitamente o como rango Cualquier carcter con excepcin del carcter de nueva lnea Cualquier carcter alfanumrico. Igual que [a-zA-Z0-9] Cualquier carcter que no sea alfanumrico. Igual que [^a-zA-Z0-9] Cualquier carcter de espacio en blanco. Lo mismo que [ \t\n\r\f\v] Cualquier carcter que no sea de espacio en blanco. Lo mismo que [^ \t\n\r\f\v] Cualquier carcter de dgito. Lo mismo que [0-9] Cualquier carcter que no sea dgito. Lo mismo que [^0-9] Un lmite de palabra. El espacio vaco entre un \w y \W Un lmite de caracteres que no sean palabras. El espacio vaco entre caracteres de palabras Barra horizontal

Creacin de alternativas dentro de la expresin regular Cuando se desea crear una expresin regular en la que se quiera coincidencia con una, dos o ms alternativas, tal y como ocurre con un operador lgico O, es conveniente utilizar el operador "|", que se lee como O lgico, igual que en los operadores condicionales. Para entender el funcionamiento, imaginemos que queremos crear un patrn para que se obtenga coincidencia nicamente si la cadena comienza con http://, https:// o ftp://. Entonces debe utilizar un patrn como el siguiente: var patron = /^(http:\/\/|https:\/\/|ftp:\/\/)/; Las siguientes cadenas mostraran 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 mostrarn coincidencia: htp://www.hotmail.com htps://www.bancodinamico.com httpg://www.minegocio.com mail://www.udb.edu.sv Subexpresiones En expresiones regulares una subexpresin consiste en crear una expresin regular compuesta de varias secciones individuales delimitadas por parntesis. Cuando se tienen subexpresiones la expresin regular se compone de ms de un grupo de parntesis, de forma que cada subexpresin puede ser referida de forma individual utilizando propiedades estticas del objeto RegExp. El siguiente ejemplo ilustra el uso de las subexpresiones: var customer = "Ricardo 2227-3735"; var pattern = /(\w+) ([\d-]+)/; pattern.test(customer);

Lenguajes Interpretados en el Cliente

Gua de prctica #6: Expresiones regulares con JavaScript Para poder acceder de forma individual a cada una de las subexpresiones de la expresin regular anterior se hace uso de propiedades especiales utilizando la siguiente sintaxis: $1, $2, $3, , $9. Cada una de las propiedades anteriores recorre la expresin regular de izquierda a derecha, de modo que $1 accede a la subexpresin de ms a la izquierda (o la primera), $2, hace referencia a la segunda subexpresin ms a la izquierda (segunda), y as sucesivamente, hasta llegar a la ltima subexpresin. Para el caso del ejemplo anterior podramos 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: Segn la especificacin ECMA debera poder accederse a ms de 9 subexpresiones dentro de una misma expresin regular. Sin embargo, el soporte a esta caracterstica por parte de los navegadores no se puede asumir por defecto. Sera de probar en cada uno a ver hasta cuntas subexpresiones se puede tener acceso. La recomendacin es no hacerlo a ms de nueve; es decir, desde $1 hasta $9. Trabajar con expresiones regulares Cuando se trabaja con expresiones regulares en JavaScript, se utilizan los mtodos test y exec del objeto RegExp y los mtodos match, replace, search y split del objeto String. La utilidad de cada uno de estos mtodos se muestra en la siguiente tabla: CARCTER Significado exec Mtodo del objeto RegExp que realiza una bsqueda por una coincidencia en una cadena. El mtodo exec() devuelve un arreglo (array) con informacin diversa. Esta informacin puede ser accedida mediante propiedades referidas al objeto en el que se asigna la ejecucin del mtodo exec(). test Es el mtodo ms bsico del objeto RegExp realiza un anlisis en la cadena pasada como argumento para encontrar si hay coincidencia con el patrn definido. Este mtodo devuelve un valor lgico (true o false). match Mtodo del objeto String que realiza la bsqueda de una coincidencia dentro de una cadena. Retorna un arreglo con informacin o un valor nulo en caso de haber error. search Es un mtodo del objeto String que realiza una bsqueda de un patrn dentro de una cadena. Devuelve el ndice del carcter en el que empieza la primera subcadena coincidente. replace Este mtodo del objeto String devuelve una cadena que resulta de reemplazar el texto que coincide con el primer argumento (una expresin regular) dentro del segundo argumento (una cadena). Si se utiliza el modificador g se reemplazan todas las coincidencias en la cadena. De lo contrario slo se reemplaza la primera coincidencia. split Este mtodo del objeto String divide una cadena en subcadenas y las devuelve en un arreglo (array).

Lenguajes Interpretados en el Cliente

Gua de prctica #6: Expresiones regulares con JavaScript III. MATERIALES Y EQUIPO Para la realizacin de la gua de prctica se requerir lo siguiente: No. 1 2 3 Requerimiento Gua de prctica #6: Expresiones regulares con JavaScript Computadora con Editor HTML y navegadores instalados Memoria USB o disco flexible Cantidad 1 1 1

IV. PROCEDIMIENTO

Ejemplo #1: validacin.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Validar Telefono</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> h1 { text-align:center; font-family:"Bookman Old Style"; font-weight:800; font-size:18pt; color:Maroon; border:ridge 6px rgb(175,125,75); background-color:LightSalmon; } hr{ width:100%; height:8px; background-color:rgb(225,125,35); } fieldset{ margin-left:30%; margin-right:20%; background-color:Bisque; border:groove 2px Maroon; width:50%; } legend { font-family:"Bookman Old Style"; font-weight:600; font-size:10pt; color:Maroon; } label { font-family:"Century Gothic"; font-weight:500; font-size:10pt; color:SaddleBrown; } input,select { font-family:"Franklin Gothic Demi"; font-weight:400; font-size:10pt; color:Maroon;

Lenguajes Interpretados en el Cliente

Gua de prctica #6: Expresiones regulares con JavaScript

background-color:Wheat; } .botonOff { background-color:Moccasin; font-family:"Century Gothic"; font-weight:800; font-size:10pt; color:SaddleBrown; border:outset 3px Maroon; } .botonOn { background-color:Brown; font-family:"Century Gothic"; font-weight:800; font-size:10pt; color:PeachPuff; border:outset 3px LightSalmon; } </style> <script language="JavaScript" type="text/javascript"> <!-function validateField(flag,field) { var pat,res,tipocampo; if(field == null || field == "" || field.length == 0){ alert("No se ha ingresado ningn valor en el campo de formulario"); return 0; } switch(flag){ case '1': pat = /^[A-Za-z]{2,}([ ]{1}[A-Za-z]{2,})*$/; res = pat.test(field); tipocampo = "nombre"; break; case '2': pat = /^([(]{1}[0-9]{1,4}[)]{1})?(\d){4}[-]{1}(\d){4}$/; res = pat.test(field); tipocampo = "telfono"; break; case '3': pat = /^[0-9]{8}-[0-9]{1}$/; res = pat.test(field); tipocampo = "DUI"; break; case '4': //Usted implementar la validacin para una URL //en la discusin de resultados de esta gua de prctica break; case '5': pat = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; res = pat.test(field); tipocampo = "correo electrnico"; break; } if(!res){ alert("El campo " + field + " no es un campo de " + tipocampo + " vlido"); } else{ alert("El campo " + field + " se ajusta con el tipo de campo " + tipocampo); } } //--> </script> </head>

Lenguajes Interpretados en el Cliente

Gua de prctica #6: Expresiones regulares con JavaScript

<body> <h1>Validaci&oacute;n de campos de formularios</h1><hr> <form name="form1" method="post" action=""> <label for="campo">Campo a validar: </label> <input type="text" name="campo" id="campo" maxlength="30" size="30"><br> <label for="selcampo">Tipo de campo: </label> <select name="selcampo"> <option value="1">Nombre</option> <option value="2">Tel&eacute;fono</option> <option value="3">DUI</option> <option value="4">URL</option> <option value="5">Correo electr&oacute;nico</option> </select><br> <input type="button" name="btnComprobar" id="btnComprobar" value="Comprobar" onclick="validateField(document.form1.selcampo.value, document.form1.campo.value); return false;"> </form> </body> </html>

Ejemplo #2: password.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Comprobar contrase&ntilde;as</title> <style type="text/css"> p{ font-family:Verdana; font-size:12px; border:groove 2px Indigo; background-color:Lavender; padding:15px; } h1{ text-align:center; text-decoration:underline; font-family:Impact; border:outset 6px brown; background-color:Wheat; } </style> <script type="text/javascript"> <!-function espacio_blanco(campo) { var espacio = false; var cont = 0; while (!espacio && (cont < campo.length)) { if (campo.charAt(cont) == " ") espacio=true; cont++; } return espacio; } function campovacio(campo){ var vacio = false; if (campo=='')

Lenguajes Interpretados en el Cliente

Gua de prctica #6: Expresiones regulares con JavaScript

vacio=true; return vacio; } function validatePass(campo) { var RegPassword = /[a-zA-Z0-9]{8,15}$/; var Message= 'Password correcto'; var cespacio=espacio_blanco(campo); var cvacio=campovacio(campo); alert(RegPassword.test(campo)); if (cespacio){ alert ("El password no puede contener espacios en blanco"); } else{ if (cvacio){ alert('El campo esta en blanco'); } else{ if (!(RegPassword.test(campo))) { alert('El password contiene caracteres especiales o no coincide con el tamao correcto del campo '); } else alert(Message); } } } </script> </head> <body> <h1>Comprobando passwords</h1> <form action="#" method="post" name="frmpw"> <p><input type="password" name="pw" size="15" maxlength="15"> <input name="button" type="button" value="Probar" onclick="validatePass(document.frmpw.pw.value)";> </p> <p> Entre 8 y 15 caracteres, puede digitar n&uacute;meros y letras, y no caracteres especiales</p> </form> </body> </html>

puede contener

Ejemplo#3: contarpalabras.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Contador de palabras</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color:rgb(150,200,100); font-family:Helvetica; color:rgb(240,240,33); } .btnlightstyle { background-color:rgb(150,75,75); font-family:Helvetica; font-weight:600; font-style:italic;

Lenguajes Interpretados en el Cliente

10

Gua de prctica #6: Expresiones regulares con JavaScript

font-size:11pt; color:rgb(240,240,33); } .btndarkstyle { background-color:rgb(50,25,25); font-family:Helvetica; font-weight:600; font-style:normal; font-size:11pt; color:rgb(255,255,66); } </style> <script language="JavaScript" type="text/javascript"> // Funcin que nos va a contar el nmero de caracteres y //de palabras del area de texto de un formulario function wordCount() { var numeroCaracteres = 0; var numeroPalabras = 0; // Obtenemos el valor introducido en el rea de texto. textoArea = document.frmtexto.area.value; // Se eliminan los caracteres en blanco del inicio y del final. // Como no tenemos funciones del tipo trim, rtrim y ltrim usamos // expresiones regulares inicioBlanco = /^\s+/; // El ^ indica al principio de la cadena y \s indica //cualquier caracter de espacio en blanco finBlanco = /\s+$/; // El $ indica al final de la cadena y \s indica //cualquier caracter de espacio en blanco variosBlancos = /\s+/g; // El global (g) es para obtener todas las posibles //combinaciones textoArea = textoArea.replace(inicioBlanco,""); textoArea = textoArea.replace(finBlanco,""); textoArea = textoArea.replace(variosBlancos," "); // Volver a escribir el texto depurado en el rea de texto document.frmtexto.area.value = textoArea; // Se crea un array con las diferentes palabras. Teniendo en cuenta que // la separacin entre palabras es el espacio en blanco. textoAreaDividido = textoArea.split(" "); // El nmero de caracteres es su longitud numeroCaracteres = textoArea.length; numeroPalabras = textoAreaDividido.length; // Se muestra la cantidad de palabras contadas, teniendo en cuenta si hay que // escribir en plural o en singular. tC = (numeroCaracteres==1)?" carcter":" caracteres"; tP = (numeroPalabras==1)?" palabra":" palabras"; alert (numeroCaracteres + ": " + tC +"\n" + numeroPalabras + ": " + tP); } </script> </head> <body> <form name="frmtexto" id="frmtexto"> Digite un texto:<br /> <textarea name="area" cols="20" rows="10" onFocus="this.value=''"> Introduzca el texto en esta rea </textarea><br /> <input type="button" name="btnContar" id="btnContar" value="Contar las palabras" class="btndarkstyle" onClick="wordCount();" onMouseOver="this.className = 'btnlightstyle'" onMouseOut="this.className = 'btndarkstyle'"> </form> </body> </html>

Lenguajes Interpretados en el Cliente

11

Gua de prctica #6: Expresiones regulares con JavaScript Ejemplo #4: busqueda.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Busqueda en lista</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/javascript"> // Definir el array con los datos var lista = new Array('Aerobic', 'Ajedrez', 'Atletismo', 'Balonmano', 'Beisbol', 'Badminton', 'Baloncesto', 'Boxeo', 'Ciclismo', 'Equitacin', 'Esgrima', 'Footing', 'Ftbol', 'Gimnasia artstica', 'Gimnasia rtmica', 'Lanzamiento de disco', 'Lanzamiento de jabalina', 'Natacin', 'Patinaje', 'Pentatln', 'Tenis', 'Tenis de mesa', 'Salto alto', 'Salto largo', 'Voleibol', 'Waterpolo'); function cargarLista() { // Cargamos el combo for (x=0;x<lista.length;x++) document.frmsearchsport.lstsports[x] = new Option(lista[x]); } function cargarTexto(elemento){ document.frmsearchsport.txtsport.value = elemento; } function buscar() { limpiarLista(); // Se obtiene el valor del texto var texto = document.frmsearchsport.txtsport.value; // Crear la expresin regular var expr = new RegExp("^" + texto,"i"); // Recorrer la lista. Si la expresin 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; } </script> </head> <body onLoad="cargarLista();"> <form id="frmsearchsport" name="frmsearchsport"> <fieldset style="background-color:rgb(225,175,200);"> <legend>Bsqueda de deportes:</legend> <label for="txtsport">Buscar:</label> <input type="text" id="txtsport" name="busca" size="24" onKeyUp="buscar();"><br/> <label for="lstsports">Listado:</label> <select id="lstsports" name="lstsports" size="12" onDblClick="cargarTexto(this.options[this.selectedIndex].text);"> </select> </fieldset> </form> </body> </html>

Lenguajes Interpretados en el Cliente

12

Gua de prctica #6: Expresiones regulares con JavaScript V. DISCUSION DE RESULTADOS 1. En el ejercicio 1 del procedimiento no est implementada la validacin para una direccin URL, ni para una direccin IP. Realice la expresin regular para estos tipos de campo y agregue el cdigo necesario en el case correspondiente en el cdigo fuente para que se pueda validar tambin una URL y una direccin IP introducida por el usuario en el campo del formulario mostrado. Tome en cuenta para el ejercicio para validar debe contener cualquiera de los siguientes formatos: http://www.nombre.com https://www.nombre.com Haga que aparezca el mensaje de alerta apropiado si la URL o la direccin IP es vlida o no. 2. Crear un script el cual debe contener un formulario con las siguientes entradas de datos: a. Carnet b. Nombres c. Apellidos d. Fecha de nacimiento Y se debe de realizar las siguientes validaciones, el carnet debe de ser en el siguiente formato: CA090909 (2 letras y 6 nmeros), el nombre y apellidos no deben de contener caracteres especiales ni nmeros, y la fecha debe de ser en el siguiente formato: 12/12/2000 VI. ANALISIS DE RESULTADOS 1. 2. Investigue sobre el constructor RegExp y colocar como mnimo 3 ejemplos. Siguiendo el ejemplo del ejercicio 4, cree un script que le permita buscar palabras de un diccionario para mostrar su definicin en un rea de texto. La definicin deber cargarse en el rea de texto al hacer clic sobre un botn denominado mostrar definicin. 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 continuacin. Como mnimo deber presentar unas 50 palabras con sus definiciones. Utilice palabras con la mayor parte de letras del alfabeto espaol.

Lenguajes Interpretados en el Cliente

13

Gua de prctica #6: Expresiones regulares con JavaScript VI. BIBLIOGRAFIA Powell, Thomas / Schneider, Fritz. JavaScript Manual de Referencia. 1ra Edicin. Editorial McGraw-Hill. 2002. Madrid, Espaa. Flanagan, David. JavaScript La Gua Definitiva. 1ra Edicin. Editorial ANAYA Multimedia. 2007. Madrid, Espaa. McFedries, Paul. JavaScript Edicin Especial. 1ra Edicin. Editorial Prentice Hall. 2002. Madrid, Espaa. Lpez Quijado, Jos. Domine JavaScript. 2da Edicin. Editorial Alfaomega RAMA. Mayo 2007. Mxico D.F. http://developer.mozilla.org/es/docs/Gu%C3%ADa_JavaScript_1.5:Expresiones_Regulares.

Lenguajes Interpretados en el Cliente

14