Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

13. Expresiones regulares (II)

13.2 Sintaxis de las RegExp.

Texto a buscar

En la página anterior ya vimos cómo introducir el patrón o texto a buscar por la expresión regular, sin embargo las expresiones regulares tienen también otros elementos que amplian las posibilidades de ajustar un texto a un patrón determinado.

Cuantificadores

Los cuantificadores son signos que se ponen detrás de un determinado patrón de búsqueda, y que indican las veces que debe aparecer en el texto para ajustarse al patrón.

• /a+/ : La cadena debe contener el patrón (letra "a") una o más veces.
• /a*/ : El patrón (letra a) debe aparecer cero o más veces.
• /a?/ : El patón debe aparecer cero o una vez.
• /a{3}/ : El patón debe aparecer exactamente tres veces (en lugar del 3 puede ser cualquier otro número).
• /a{3,8}/ : El patón debe aparecer entre 3 y 8 veces (ambos inclusive).

Modificadores

Los modificadores o "flags" son unas letras con un significado especial que se ponen detrás de la expresión regular, y matizan la forma de buscar. Estos son los siguientes:

• g : /a/g ; Explora la cadena hasta el final.
• i : /a/i ; No distingue entre mayúsculas y minúsculas.
• m : /a/m ; Permite usar varios ^ y $ en la cadena.
• s : /a/s ; Incluye el salto de línea en el comodín punto .
• x : /a/x ; ignora los espacios en el patrón .

Si escribimos más de un modificador en una expresión regular, debemos ponerlos en el mismo orden que aparecen arriba, es decir, en orden alfabético.

Metodos del objeto RegExp

El objeto RegExp tiene varios métodos, pero también se pueden usar algunos métodos del objeto String para trabajar con expresiones regulares.

el metodo test().

Ya hemos visto en los ejemplos de la página anterior el método test. Este método busca el patrón en el texto y devuelve el valor booleano true si el texto se ajusta, si no es así devolverá false. Su sintaxis es:

buscar = patron.test("cadena")

Donde buscar es la variable donde se devuelve el valor (true o false); patron es la variable que contiene la expresión regular, y "cadena" es la cadena de texto en la que se busca; si la cadena se pasa de forma literal llevará las comillas, si la pasamos en una variable, no llevará comillas.

el metodo compile().

El método compile convierte el patrón en un formato interno para que la ejecución sea más rápida. Por ejemplo, esto permite un uso más eficiente de expresiones regulares en bucles.

Su sintaxis es la siguiente:

compilado = patron.compile(patron);

La variable compilado guardará la expresion regular ya compilada.

el metodo exec().

El metodo exec() busca la expresión en el texto, y devuelve el primer texto que concuerda con la expresión buscada. Si no encuentra ninguna coincidencia, entonces devuleve null. Su sintaxis es la siguiente:

buscar = patron.exec(texto);

Donde patron es la variable que contiene la expresión regular, y texto es la variable que contiene la cadena de texto. El resultado de este método es el trozo de cadena que se ajusta al patrón, y se guarda en la variable buscar.

Este método tiene además dos propiedades, la propiedad .index, la cual nos indica la posición en la que se encuentra la cadena buscada, y la propiedad .input, la cual devuelve la cadena completa en la que estamos realizando la búsqueda. La posición que indica la propiedad index es la del primer caracter encontrado en el trozo de cadena que coincide. este se empieza a contar a partir del 0.

posicion = patron.exec(texto).index;
textoCompleto = patron.exec(texto).input

Cuando la propiedad no encuentra la cadena, estos métodos no devuelven nada.

La siguiente página de ejemplo utiliza el método exec() para buscar una palabra en un texto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title> 
<style type="text/css">
#caja  { width: 400px; border: 1px black solid; float: right; }
</style>
<script type="text/javascript">
function elMetodo(){
         patron = /hidalgo/gi; //expresión regular.
         texto = document.getElementById("mitexto").innerHTML;
         respuesta = patron.exec(texto); //buscar mediante exec()
         elemento = document.getElementById("caja");
         elemento.innerHTML = "palabra buscada: "+ respuesta +"<br/> ";
         posicion = respuesta.index; //propiedad index: posición.
         elemento.innerHTML += "posición: "+ posicion +"<br/> ";
         textoCompleto = respuesta.input; //propiedad input: texto completo.
         elemento.innerHTML += "Texto en que se encuentra: "+ textoCompleto;
         }
</script>
</head>
<body>
<h1>Metodo exec para expresiones regulares.</h1>
<div id="caja">
</div>
<h4>Texto de ejemplo:</h4>
<p id="mitexto">En un lugar de la Mancha, de cuyo nombre no quiero acordarme, 
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, 
adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca 
que carnero, salpicón las más noches, duelos y quebrantos los sábados, 
lentejas los viernes, algún palomino de añadidura los domingos, consumían 
las tres partes de su hacienda.</p> 
<h4>Buscar la palabra "hidalgo"</h4>
<form action="#" name="elmetodo">
<p><input type="button" value="Metodo exec" onclick="elMetodo()" /></p>
</form>
</body>
</html>

para ver la esta página de ejemplo pulsa en el siguiente enlace:

Metodo exec en expresiones regulares.

Métodos del objeto String

Los siguientes métodos de la clase String pueden usarse para trabajar con las expresiones regulares. En ellos la expresión regular o patrón la escribiremos siempre como parámetro o argumento del metodo, es decir, dentro del paréntesis.

el metodo search().

Busca la expresión regular en la cadena de texto, si la encuentra devuelve un número indicando su posición (el del primer carácter), empezando a contar desde 0, si no la encuentra devuelve -1.

su sintaxis es la siguiente:

buscar = texto.search(patron)

Donde texto es la variable que contiene el texto donde se busca, y patron es la expresión regular. La variable buscar contendrá el número en el que se encuentra la primera coincidencia (empezando a contar por el 0), si no hay coincidencia en la cadena, éste será -1.

el metodo split().

Este método transforma la cadena en un array, la expresión regular indica cual es el delimitador que separa los elementos del array. por ejemplo, con la siguiente expresion regular /\s/ cada vez que se encuentra un espacio se crea un nuevo elemento del array, con lo que el array contendria las palabras de la cadena. Su sintaxis es parecida a la del método anterior:

miarray = texto.split(patron)

el metodo replace().

Este método devuelve la cadena original, en la que se ha remplazado las coincidencias encontradas por la expresión regular, por otro texto pasado también como argumento. Por lo tanto a este método le pasaremos dos argumentos. que serán la expresión regular, y la cadena a remplazar. Su sintaxis es la siguiente:

nuevoTexto = texto.replace(patron,remplazo);

Donde la variable texto es el texto en el que se explora, patron contiene la expresión regular, y remplazo es la variable que contiene el nuevo texto que se va a poner en lugar del encontrado por la expresión regular.

Propiedades del objeto RegExp.

Las siguientes propiedades se usan con el objeto RegExp y no con cualquier expresión regular concreta, por tanto se escribirán de la forma: RegExp.propiedad; son de sólo lectura, por lo que no las podemos modificar directamente, sin embargo se actualizan automáticamente cada vez que se emplea un método con un objeto regular, ya sea con los métodos de RegExp o con los métodos de String; correspondiendo la cadena explorada a la obtenida tras el último método empleado. las propiedades son:

$1 ... $9

índices que contienen las partes agrupadas con paréntesis en el patrón de búsqueda.

input

RegExp.input: Cadena que se ha explorado.

lastMatch

RegExp.lastMatch: Última coincidencia encontrada.

multiline

RegExp.multiline: Variable booleana que indica si la cadena explorada incluye saltos de línea.

lastParent

RegExp.lastParent: Última coincidencia encontrada con un patrón entre paréntesis.

leftContext

RegExp.leftContext: Desde el principio de la cadena hasta la coincidencia hallada.

rightContext

RegExp.rightContext: Desde la coincidencia hasta el final de la cadena.

En la siguiente página de ejemplo se remplazan algunos elementos de una cadena mediante el método replace(), y se muestran las propiedades anteriores.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Metodo replace() y propiedades.</title> 
<style type="text/css">
p { font-family: arial; font-size:0.9em; }
#caja { border: 1px black solid; width: 500px; float: right; }
</style>
<script type="text/javascript">
window.onload = function(){ 
elemento = document.getElementById("texto");
texto = elemento.innerHTML;
texto1 = texto;
ver = document.getElementById("caja");
}
function restablecer() { // restablecer texto a su estado original
         elemento.innerHTML = texto1;
         texto = texto1;
         }
function cambiar1() { //resaltar letra "e" en rojo
         var expresion1 = /e/gi;
         nuevo1 = "e".fontcolor("#ff0000");
         texto = texto.replace(expresion1,nuevo1);
         elemento.innerHTML = texto;
         }
function cambiar2() { //Cambiar artículos por guión bajo
         var expresion2 = / el | la | los | las /gi;
         nuevo2 = " __ ";
         texto = texto.replace(expresion2,nuevo2);
         elemento.innerHTML = texto;
         }	
function cambiar3() { // remplazar espacios en blanco por guion
         var expresion3 = /\s/gi;
         nuevo3 = "-";
         texto = texto.replace(expresion3,nuevo3);
         elemento.innerHTML = texto;
         }	 
</script>
</head>
<body>
<h1>Expresiones Regulares</h1>
<h2>Texto de ejemplo</h2>
<p id="texto">En un lugar de la Mancha, de cuyo nombre no quiero acordarme, 
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, 
adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca 
que carnero, salpicón las más noches, duelos y quebrantos los sábados, 
lentejas los viernes, algún palomino de añadidura los domingos, consumían 
las tres partes de su hacienda.</h2>
<div id="caja"> </div>
<p onclick="restablecer()">Restablecer texto a su estado original</p>
<p onclick="cambiar1()">Resaltar letra "e"</p>
<p onclick="cambiar2()">Remplazar articulos determinados por guión bajo.</p>
<p onclick="cambiar3()">Remplazar espacios por guión</p>
<h3>Propiedades del objeto regExp:</h3>
<p onclick="ver.innerHTML = RegExp.input"> 
   Cadena explorada: <b>input</b></p>
<p onclick="ver.innerHTML = RegExp.lastMatch">
   Última coincidencia encontrada: <b>lastMatch</b></p>
<p onclick="ver.innerHTML = RegExp.multiline">
   Indica si la cadena tiene saltos de línea: <b>multiline</b></p>  
<p onclick="ver.innerHTML = RegExp.leftContext">
   desde el principio hasta la coincidencia: <b>leftContext</b></p>
<p onclick="ver.innerHTML = RegExp.rightContext">
   desde la coincidencia hasta el final: <b>rightContext</b></p>
</body>
</html>

Para ver esta página de ejemplo en tu navegador pulsa en el siguiente enlace:

Método replace() y propiedades.

En la siguiente página veremos algunas de las expresiones regulares más habituales que suelen usarse para comprobar datos.

RegExp habituales.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com