Guía JavaScript 1.5:Expresiones Regulares
De MDC
Tabla de contenidos |
[editar] Crear una expresión regular
Hay dos maneras de crear una expresión regular:
- Utilizar una expresión regular literal, por ejemplo:
re = /ab+c/;
- Las expresiones regulares literales proveen la compilación de la expresión regular cuando el script se evalúa. Utilice estas, cuando la expresión regular vaya a permanecer constante, para un mejor funcionamiento.
- Invocar a la función constructora del objeto RegExp, por ejemplo:
re = new RegExp("ab+c");
- Utilizar la función constructora provee la compilación de la expresión regular en tiempo de ejecución. Debe utilizar la función constructora cuando no se sabe si el patrón de la expresión regular cambiará, o cuando no se conoce este patrón por estar tomándose de otra fuente, como la entrada del usuario.
[editar] Escribir un patrón de expresiones regulares
Un patrón de expresiones regulares está compuesto de caracteres simples, como /abc/; o una combinación de caracteres simples y especiales, como /ab*c/ o /Capítulo (\d+)\.\d*/. El último ejemplo incluye paréntesis, los cuales se usan como un dispositivo de memoria. La coincidencia con esta parte del patrón se recuerda para un uso posterior, como se describe en Usar coincidencias de subcadenas parentizadas.
[editar] Usar patrones simples
Los patrones simples se construyen con caracteres para los cuales se busca una coincidencia directa. Por ejemplo: /abc/ coincide con las combinaciones de caracteres en cadenas solamente cuando exactamente los caracteres 'abc' aparecen juntos y en ese orden. Una coincidencia se encontraría en las cadenas "Hi, do you know your abc's?" y "The latest airplane designs evolved from slabcraft." En ambos casos la coincidencia es con la subcadena 'abc'. No hay coincidencia con la cadena "Grab crab" porque no contiene la subcadena 'abc'.
[editar] Usar caracteres especiales
Cuando la búsqueda de una coincidencia requiere más que una coincidencia directa, como la búsqueda de una o más bes, o buscar un espacio en blanco, el patrón incluye caracteres especiales. Por ejemplo, el patrón /ab*c/ coincide con cualquier combinación de caracteres en la que una única 'a' seguida de cero o más 'b' (* significa 0 o más ocurrencias del elemento que le precede) e inmediatamente seguido de una 'c'. En la cadena "cbbabbbbcdebc," el patrón coincide con la subcadena 'abbbbc'.
La siguiente tabla muestra una lista completa de los caracteres especiales que pueden ser empleados en expresiones regulares.
| Caracter | Significado |
|---|---|
| \ | Alguno de los siguientes:
|
| ^ | Coincide al principio de la entrada. Si la bandera multilínea es configurada como verdadera, también coincide inmediatamente después de un caracter de salto de línea.
Por ejemplo, /^U/ no coincide con la 'U' en "una U", pero sí coincide con la primera 'U' en "Una U". |
| $ | Coincide al final de la entrada. Si la bandera multilínea es configurada como verdadera, también coincide inmediatamente antes de un caracter de salto de línea.
Por ejemplo, /t$/ no coincide con la 't' en "eater", pero sí lo hace en "eat". |
| * | Coincide con el caracter que le precede 0 o más veces.
Por ejemplo, /bo*/ coicide con 'boooo' en "A ghost booooed" y 'b' en "A bird warbled", pero no en "A goat grunted". |
| + | Coincide con el caracter que lo precede 1 o más veces. equivalente a {1,}.
Por ejemplo, /a+/ coincide con la 'a' en "candy" y todas las aes en "caaaaaaandy". |
| ? | Coincide con el caracter que lo precede 0 o 1 vez.
Por ejemplo, Si se utiliza inmediatamente después de alguno de los cuantificadores *, +, ?, o {}, transforma el cuantificador en no codicioso (coincidiendo con el mínimo número de elementos posibles), en contraposición al funcionamiento por defecto, en el que se comportan de forma codiciosa (concordando con el máximo número de elementos posibles). También utilizado en las instrucciones predictivas [lookahead assertions], descritas como x(?=y) y x(?!y) más abajo en esta tabla. |
| . | (El punto decimal) coincide con cualquier caracter simple excepto con el de nueva línea.
Por ejemplo, /.n/ coincide con 'an' y con 'on' en "nay, an apple is on the tree", pero no con 'nay'. |
| (x) | coincide con 'x' y recuerda la coincidencia. Son llamados paréntesis con memoria [capturing parentheses].
Por ejemplo, /(foo)/ coincide y recuerda 'foo' en "foo bar." La subcadena coincidente puede ser rellamada usando el vector de elementos resultante [1], ..., [n]. |
| (?:x) | Coincide con 'x' pero no recuerda la coincidencia. Son llamados paréntesis sin memoria [non-capturing parentheses]. La subcadena coincidente no puede ser rellamada usando el vector de elementos resultante [1], ..., [n]. |
| x(?=y) | Coincide con 'x' solo si 'x' está seguida de 'y'. Por ejemplo, /Jack(?=Sprat)/ coincide con 'Jack' sólo si es seguido de 'Sprat'. /Jack(?=Sprat|Frost)/ coincide con 'Jack' sólo si es seguido de 'Sprat' o 'Frost'. Sin embargo, ni 'Sprat' ni 'Frost' forman parte de la coincidencia resultante. |
| x(?!y) | Coincide con 'x' sólo si 'x' no está seguida de 'y'. Por ejemplo, /\d+(?!\.)/ coincide con un número sólo si este no está seguido de un punto decimal. La expresión regular /\d+(?!\.)/.exec("3.141") coincide con 141 pero no con 3.141. |
| x|y | Coincide con 'x' o 'y'.
Por ejemplo, /green|red/ coincide con 'green' en "green apple" y 'red' en "red apple." |
| {n} | Donde n es un entero positivo. Coincide exactamente con n ocurrencias del caracter que lo precede.
Por ejemplo, /a{2}/ no coincide con la 'a' en "candy," pero si coincide con todas las aes en "caandy," y las primeras dos aes en "caaandy." |
| {n,} | Donde n es un entero positivo. Coincide con al menos n ocurrencias del caracter que le precede.
Por ejemplo, /a{2,} no coincide con la 'a' en "candy", Pero coincide con todas las aes en "caandy" y en "caaaaaaandy." |
| {n,m} | Donde n y m son enteros positivos. Coincide con al menos n ocurrencias y como mucho con m del caracter que le precede.
Por ejemplo, /a{1,3}/ no coincide con nada en "cndy", pero sí con la 'a' en "candy," las primeras dos aes en "caandy," y las primeras tres aes en "caaaaaaandy". Nótese que al buscar coincidencia con "caaaaaaandy", la coincidencia es "aaa", a pesar de que la cadena original tuviese más aes. |
| [xyz] | Un conjunto de caracteres. Coincide con cualquiera de los caracteres que están entre corchetes. Puede especificar un rango de caracteres usando un guón.
Por ejemplo, [abcd] es lo mismo que [a-d]. Esto debería coincidir con la 'b' en "brisket" y la 'c' en "ache". |
| [^xyz] | Un conjunto de caracteres complementado o negado. Coincide con cualquier cosa que no esté encerrada entre los corchetes. Puede especificar un rango de caracteres usando un guión.
Por ejemplo, [^abc] es lo mismo que [^a-c]. Inicialmente coincidiría con 'r' en "brisket" y la 'h' en "chop." |
| [\b] | Coincide con el carácter de retroceso (backspace). (No confundir con \b.) |
| \b | Coincide con un límite de palabra, como el espacio o el carácter de nueva línea. (No confundir con [\b].)
Por ejemplo, /\bn\w/ coincide con 'no' en "noonday";/\wy\b/ coincide con 'ly' en "possibly yesterday." |
| \B | Coincide con un caracter que no sea límite de palabra.
Por ejemplo, /\w\Bn/ coincide con 'on' en "noonday", y /y\B\w/ coincide con 'ye' en "possibly yesterday." |
| \cX | Donde X es un caracter de control. Coincide con un caracter de control en una cadena.
Por ejemplo, /\cM/ coincide con control-M en una cadena. |
| \d | Coincide con un dígito. Es equivalente a [0-9].
Por ejemplo, /\d/ o /[0-9]/ coincide con '2' en "B2 is the suite number." |
| \D | Coincide con un caracter que no sea un dígito. Es equivalente a [^0-9].
Por ejemplo, /\D/ o /[^0-9]/ coinciden con 'B' en "B2 is the suite number." |
| \f | Coincide con un avance de forma [form-feed]. |
| \n | Coincide con un avance de línea [linefeed]. |
| \r | Coincide con un retorno de carro. |
| \s | Coincide con un único caracter de espaciado, incluyendo el espacio, tabulado, form feed, line feed. es equivalente a [ \f\n\r\t\v\u00A0\u2028\u2029].
Por ejemplo, /\s\w*/ coincide con ' bar' en "foo bar." |
| \S | Coincide con un único caracter que no sea de espaciado. Es equivalente a
[^ \f\n\r\t\v\u00A0\u2028\u2029]. Por ejemplo,/\S\w*/ coincide con 'foo' en "foo bar." |
| \t | Coincide con un tabulado. |
| \v | Coincide con un tabulado vertical. |
| \w | Coincide con cualquier caracter alfanumérico incluido el subrayado. Es equivalente a [A-Za-z0-9_].
Por ejemplo, /\w/ coincide con 'a' en "apple," '5' en "$5.28," y '3' en "3D." |
| \W | Coincide con cualquier caracter no alfanumérico ni subrayado. Es equivalente a [^A-Za-z0-9_].
Por ejemplo, /\W/ o /[^$A-Za-z0-9_]/ coincide con '%' en "50%." |
| \n | Donde n es un entero positivo. Referencia a la última coincidencia del grupo n de parentesis de la expresión regular (contando parentesis izquierdos).
Por ejemplo, /apple(,)\sorange\1/ coincide con 'apple, orange,' en "apple, orange, cherry, peach." |
| \0 | Coincide con el caracter NUL. No debe seguirse con ningún dígito. |
| \xhh | Coincide con el caracter que tiene código hh (dos digitos hexadecimales) |
| \uhhhh | Coincide con el caracter que tiene como código hhhh (cuatro dígitos hexadecimales). |
Tabla 4.1: Caracteres especiales en expresiones regulares.
[editar] Usar paréntesis
Los paréntesis que rodean cualquier parte de un patrón de expresión regular causan que la parte de la subcadena coincidente se recuerde. Una vez recordada, la subcadena puede ser llamada para otro uso, como se describe en Usar coincidencias de subcadenas parentizadas.
Por ejemplo, el patrón /Chapter (\d+)\.\d*/ muestra caracteres especiales y caracteres adicionales de escape e indica que parte del patrón debe ser recordada. Coincide precisamente con los caracteres 'Chapter ' seguidos de uno o más caracteres numéricos (\d significa cualquier caracter numérico y + significa 1 o más veces), seguidos por un punto decimal (el cual es un caracter especial; anteponer \ al punto decimal significa que el patrón debe buscar el caracter '.' literalmente), seguido por un caracter numérico 0 o más veces (\d significa caracter numérico, * significa 0 o más veces). Además, los paréntesis se usan para recordar la primera ocurrencia de caracteres numéricos.
Este patrón se encuentra en "Open Chapter 4.3, paragraph 6" y '4' es recordado. El patrón no se encuentra en "Chapter 3 y 4", porque esta cadena no tiene un '.' despues del '3'.
Para coincidir una subcadena sin que la parte coincidente se recuerde, en los paréntesis comience el patrón con ?:.. Por ejemplo, (?:\d+) coincide con uno o más caracteres numéricos, pero no recuerda los caracteres coincidentes.
- Ejecutar una busqueda global, discriminar mayúsculas y minúsculas y considerar entrada multilínea
- Usar coincidencias de subcadenas parentizadas
- Ejemplos de expresiones regulares
[editar] Trabajar con expresiones regulares
Las expresiones regulares se usan con los métodos test y exec de la clase RegExp y con los métodos de String match, replace, search y split. Estos métodos se explican en detalle en Referencia de JavaScript 1.5.
| Método | Descripción |
|---|---|
| exec | Un método de RegExp que ejecuta una búsqueda de una coincidencia en una cadena. Devuelve un vector de información. |
| test | Un método de RegExp que prueba si existe una coincidencia en una cadena. Devuelve verdadero o falso. |
| match | Un método de String que realiza la búsqueda de una coincidencia en una cadena. Devuelve un arreglo de información, o null si no hay coincidencia. |
| search | Un método de String que prueba si existe una coincidencia en una cadena. Devuelve la posición de la coincidencia, o -1 si la búsqueda falla. |
| replace | Un método de String que realiza una búsqueda de una coincidencia en una cadena y remplaza la subcadena coincidente con la subcadena de reemplazo. |
| split | Un método de String que emplea una expresion regular, o una cadena constante para partir la cadena en un arreglo de subcadenas. |
Tabla 4.2: Métodos que usan expresiones regulares
Cuando quiera saber si un patrón se encuentra en una cadena, utilice el método test o search; Para más información (pero una ejecución más lenta) utilice los métodos exec o match y si la coincidencia se encuentra, estos métodos devuelven un arreglo y actualizan propiedades del objeto de expresión regular asociado y también del objeto de expresiones regulares predefinido, RegExp. Si la búsqueda falla, el método exec devuelve null (lo que se puede interpretar como false).
En el siguiente ejemplo, el script utiliza el método exec para buscar una coincidencia en una cadena.
<SCRIPT type="text/javascript">
myRe = /d(b+)d/g;
myArray = myRe.exec("cdbbdbsbz");
</SCRIPT>
Si no se necesita acceder a las propiedades de la expresión regular, un camino alternativo de crear myArray es con este script:
<SCRIPT type="text/javascript">
myArray = /d(b+)d/g.exec("cdbbdbsbz");
</SCRIPT>
Si quiere construir una expresión regular a partir de una cadena, aún quedan alternativas en este script:
<SCRIPT type="text/javascript">
myRe = new RegExp ("d(b+)d", "g");
myArray = myRe.exec("cdbbdbsbz");
</SCRIPT>
Con estos scripts, la coincidencia se realiza y devuelve el arreglo y actualiza las propiedades mostradas en la siguiente tabla.
| Objeto | Propiedad o índice | Descripción | En este ejemplo |
|---|---|---|---|
| myArray | La cadena coincidente y todas las subcadenas recordadas. | ["dbbd", "bb"] | |
| index | El índice de la coincidencia en la cadena de entrada, tomando como primer índice de ésta el 0. | 1 | |
| input | La cadena original. | "cdbbdbsbz" | |
| [0] | Los últimos caracteres emparejados. | "dbbd" | |
| myRe | lastIndex | El índice a partir del cual realizar la siguiente búsqueda. (Esta propiedad se establece sólo si la expresión regular usa la opción g, descrita en Ejecutar una búsqueda global, discriminar mayúsculas/minúsculas y considerar entradas multilínea. | 5 |
| source | El texto del patrón. Se actualiza cuando la expresión regular se crea, no cuando se ejecuta. | "d(b+)d" |
Tabla 4.3: Resultados de la ejecución de expresiones regulares.
Como se muestra en la segunda forma del ejemplo, puede utilizar una espresión regular creada con un objeto inciador sin asignarlo a una variable. Si lo hace, sin embargo, cada ocurrencia es una nueva expresión regular. Por esta razón, si utiliza esta forma sin asignar a una variable, no podrá acceder posteriormente a las propiedades de esta expresión regular. Por ejemplo, imagine que tiene este script:
<SCRIPT type="text/javascript">
myRe = /d(b+)d/g;
myArray = myRe.exec("cdbbdbsbz");
document.writeln("El valor del último índice es " + myRe.lastIndex);
</SCRIPT>
Este script muestra:
el valor del último índice es 5
Sin embargo, si tuviese este script:
<SCRIPT type="text/javascript">
myArray = /d(b+)d/g.exec("cdbbdbsbz");
document.writeln("El valor del último índice es " + /d(b+)d/g.lastIndex);
</SCRIPT>
Mostraría:
El valor del último ínidice es 0
Las ocurrencias de /d(b+)d/g en las dos instrucciones son diferentes objetos de expresiones regulares y por lo tanto tienen diferentes valores para su propiedad lastIndex. Si necesita acceder a las propiedades de una expresión regular creada con un objeto iniciador, debería primero asignarle a una variable.
[editar] Usar coincidencias de subcadenas parentizadas
La inclusión de paréntesis en un patrón de expresión regular causa que la sub coincidencia correspondiente sea recordada. Por ejemplo, /a(b)c/ coincide los caracteres 'abc' y recuerda el caracter 'b'. Para reinvocar estas coincidencias de subcadenas parentizadas, utilice el arreglo de elementos [1], ..., [n].
El número de posibles subcadenas parentizadas es ilimitado. El arreglo retornado mantiene todas aquellas coincidencias que fueron encontradas. Los siguientes ejemplos ilustran como usar las coincidencias de subcadenas parentizadas.
Ejemplo 1.
El siguiente script utiliza el método replace para intercambiar las palabras en la cadena. Para el texto de reemplazo, el script utiliza $1 y $2 en el reemplazo para denotar la primera y la segunda coincidencias de subcadenas parentizadas.
<script type="text/javascript"> re = /(\w+)\s(\w+)/; str = "John Smith"; newstr = str.replace(re, "$2, $1"); document.write(newstr); </script>
Esto imprime "Smith, John".
Ejemplo 2.
Nota: en la función getInfo, el método exec es invocado utilizando la notación cortocircuitada () que trabaja en Firefox pero no en la mayoría de los otros navegadores.
<html>
<script type="text/javascript">
function getInfo(field){
var a = /(\w+)\s(\d+)/(field.value);
window.alert(a[1] + ", your age is " + a[2]);
}
</script>
Ingrese su primer nombre y su edad y luego presione Enter.
<form>
<input type="text" name="NameAge" onchange="getInfo(this);">
</form>
</html>
[editar] Ejecutar una búsqueda global, discriminar mayúsculas y minúsculas y considerar entrada multilínea
Las expresiones regulares poseen tres banderas [flags] opcionales que permiten una búsqueda global y una búsqueda que discrimine si el texto está en mayúsculas o minúsculas. Para indicar una búsqueda global, utilice la bandera g. Para indicar una búsqueda que discrimine la diferencia entre mayúsculas y minúsculas, utilice la bandera i. Para indicar una búsqueda multilínea, utilice la bandera m. Estas banderas pueden ser utilizadas separadamente o en conjunto en cualquier orden y están incluidas como parte de una expresión regular.
Para incluir una bandera con una expresión regular, utilice la siguiente sintaxis:
re = /patrón/banderas
re = new RegExp("patrón", ["banderas"])
Nótese que las banderas son una parte integral de una expresión regular. Éstas no pueden ser añadidas o removidas más tarde.
Por ejemplo, re = /\w+\s/g crea una expresión regular que busca por uno o más caracteres seguidos por un espacio y busca por esta combinación a lo largo de la cadena.
<script type="text/javascript"> re = /\w+\s/g; str = "fee fi fo fum"; myArray = str.match(re); document.write(myArray); </script>
Esto despliega ["fee ", "fi ", "fo "]. En este ejemplo, usted puede reemplazar la línea:
re = /\w+\s/g;
con:
re = new RegExp("\\w+\\s", "g");
y obtener el mismo resultado.
La bandera m es utilizada para especificar que una cadena de entrada multilínea deberá ser tratada como múltiples líneas. Si la bandera m es utilizada, ^ y $ coinciden al inicio o al final de una línea dentro de una cadena de entrada en vez de comenzar o terminar en la cadena completa.
[editar] Ejemplos
Los siguientes ejemplos muestran algunos usos de expresiones regulares.
[editar] Cambiando el orden en una cadena de Entrada
El siguiente ejemplo ilustra la formación de una expresión regular y el uso de string.split() y string.replace(). Esta corrige una cadena de entrada que está formateada irregularmente y que contiene nombres (nombre apellido) separados exactamente por espacios en blanco, tabulados y un punto y coma. Finalmente, esta reversa el orden de los nombres (apellido nombre) y ordena la lista.
<script type="text/javascript">
// La cadena nombres contiene múltiples espacios y tabulados,
// y puede tener espacios entre nombres y apellidos.
var nombres = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
var salida = new Array(
"---------- Cadena original <br><br>",
nombres + "<br><br>");
// Prepara dos patrones de expresiones regulares y un arreglo para almacenamiento.
// Separa la cadena en elementos de un arreglo.
// patrón: posibles espacios en blanco (\s*), luego un punto y coma (;), luego posibles espacios en blanco (\s*)
var patron = /\s*;\s*/;
// Divide la cadena en piezas separadas por el patrón anterior y
// almacena las piezas en un arreglo llamado Listanombres
var Listanombres = nombres.split(patron);
// nuevo patrón: uno o más caracteres luego espacios luego caracteres.
// Utilice paréntesis para "memorizar" porciones del patrón.
// Las porciones memorizadas son referidas más tarde.
var patron = /(\w+)\s+(\w+)/; //la variable patron ahora es actualizada con el nuevo patrón
// Nuevo arreglo para mantener los nombres que son procesados.
var ListaSorteadaPorNombres = new Array();
// Despliega el arreglo de nombres y publica el nuevo arreglo
// con nombres separados por coma, por apellidos.
//
// El método replace remueve cualquier cosa que coincida con el patrón
// y la reemplaza con las segundas porciones memorizadas de la cadena memorizada
// seguidos por una coma, espacio seguido por la primera porción memorizada.
//
// Las variables $1 y $2 se refieren a las porciones
// memorizadas mientras coteja con el patrón.
salida.push("---------- Despues de dividir por una expresión regular<br>");
var i, longitud;
for (i = 0, longitud = Listanombres.length; i < longitud; i++)
{
salida.push(Listanombres[i] + "<br>");
ListaSorteadaPorNombres[i] = Listanombres[i].replace(patron, "$2, $1")
}
// Despliegue del nuevo arreglo.
salida.push("---------- Nombres reversados<br>");
for (i = 0, longitud = ListaSorteadaPorNombres.length; i < longitud; i++)
{
salida.push(ListaSorteadaPorNombres[i] + "<br>")
}
// ordenar por apellido, luego desplegar el arreglo ordenado.
ListaSorteadaPorNombres.sort();
salida.push("---------- Ordenada<br>");
for (i = 0, longitud = ListaSorteadaPorNombres.length; i < longitud; i++)
{
salida.push(ListaSorteadaPorNombres[i] + "<br>")
}
salida.push("---------- Fin<br>");
document.write(salida.join("\n"));
</script>
[editar] Utilizando Caracteres Especiales para Verificar Entradas
En el siguiente ejemplo, un usuario ingresa un número telefónico. Cuando el usuario presiona Enter, el script chequea la validez del número. Si el número es válido (coincide con la secuencia de caracteres especificados por la expresión regular), el scrip despliega una ventana de agradecimiento al usuario agradeciéndolo y confirmando su número. Si el número es inválido, el script despliega una ventana informando al usuario que el número telefónico no es válido.
La expresión regular busca por cero o un paréntesis \(?, seguido por tres dígitos \d{3}, seguido por cero o ningún paréntesis cerrado \)?, seguido por un guión, un slash, o punto decimal y cuando lo encuentra, recuerda el caracter ([-\/\.]), seguido por tres dígitos \d{3}, seguido por las coincidencias memorizadas de un guión, slash, o punto decimal \1, seguido de cuatro dígitos \d{4}.
El evento Change activado cuando el usuario presiona Enter configura el valor de RegExp.input.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;
function probarInformación(Entrada_teléfono)
{
var OK = re.exec(Entrada_teléfono.value);
if (!OK)
{
window.alert(RegExp.input + " es un número de teléfono sin código de área!");
}
else
{
window.alert("Gracias, su número telefónico es " + OK[0]);
}
}
</script>
</head>
<body>
<p>Ingrese su número telefónico (con código de área) y luego presione Enter.</p>
<form action="">
<input name="teléfono" onchange="probarInformación(this);">
</form>
</body>
</html>