Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 30
Visitas el mes pasado: 58
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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.
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.
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:
^
y $
en la cadena.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.
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.
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.
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.
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