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: 27
Visitas el mes pasado: 59
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
Las expresiones regulares permiten comprobar si una cadena de texto se ajusta a
un determinado tipo de estructura o patrón. Su principal misión en javascript es
comprobar si los datos de los formularios están escritos conforme a lo que
se pide. Su forma puede parecer un tanto extraña al principio, ya que utilizan
un lenguaje distinto, hecho a base de signos no muy habituales. Por otra parte también
permiten buscar y remplazar texto, lo cual si bien se puede hacer mediante
los métodos de la clase String
, aquí podemos reemplazar no sólo un
texto concreto, sino un determinado patrón de texto.
Las expresiones regulares no son exclusivas del lenguaje javascript, otros lenguajes de programación también las usan, de hecho javascript las ha importado de ellos, por lo que son muy similares tanto en Java, como en PHP y otros lenguajes.
El objeto RegExp
tiene varios métodos que veremos más adelante, con ellos,
una vez escrita la expresion regular, podemos comprobar, buscar, o reemplazar los
elementos del texto que tengan similitud o coincidencia.
Las expresiones regulares tienen una sintaxis propia, esto es lo que suele
hacerlas algo complicadas, ya que no es igual que el resto de elementos de
javascript. Para empezar cualquier expresión regular debe estar encerrada entre
los caracteres / ... /
:
expresion = / ...codigo_expresion .../
Al guardar la expresión regular en una variable, ésta se convierte en
un objeto del tipo RegExp
. También podemos crear la
expresión regular mediante el método general para crear objetos:
expresion = new RegExp(..codigo_expresion...)
En este caso no debemos poner el código entre barras inclinadas.
El caso más simple es comprobar si una determinada cadena de texto está contenida en otra:
expresion = /martes/
Esta expresión comprobará si la cadena "martes" está contenida en otra.
Al aplicar un método de búsqueda devolverá verdadero si la cadena
contiene martes
, se dice entonces que la cadena se
ajusta al patrón, y devolverá falso si no lo contiene.
Vamos a poner ejemplos a cada paso, que aunque no sean muy prácticos, nos servirán para ver como funcionan estos códigos.
Para ello utilizaremos el método test()
, el cual se
emplea de la siguiente manera:
resultado = expresionRegular.test("texto a comprobar")
La variable resultado
devolverá el valor booleano true
si la cadena contiene la expresión al menos una vez, y false
si
no la contiene.
Veamos el ejemplo para la expresión anterior.
texto1 = "Los martes voy al gimnasio."; texto2 = "Los miércoles voy a clase de inglés."; buscar = /martes/; alert(buscar.test(texto1)); //devuelve true alert(buscar.test(texto2)); //devuelve false
Si pruebas el script anterior verás que primero sale una ventana de alerta que pone "true" y después sale otra ventana que pone "false". lo cual quiere decir que el primer texto se ajusta al patrón, y el segundo no.
Sin embargo si lo que se quiere buscar es un grupo de caracteres, estos irán encerrados entre corchetes.
expresion = /[aeiou]/
Esta expresión buscará cualquiera de las vocales en el texto y en ese caso se ajustará al patrón. Los corchetes definen caracteres que debe contener la cadena. Probemos con un ejemplo similar al anterior:
texto1 = "a = 4.65"; texto2 = "b = 17.3"; buscar = /[aeiou]/; alert(buscar.test(texto1)); //devuelve true alert(buscar.test(texto2)); //devuelve false
Como en el ejemplo anterior, en éste el primer texto se ajusta al patrón, al tener una vocal, y el segundo no, al no contener vocales.
Sin embargo los elementos dentro del corchete pueden formar grupos homogéneos, tales como cifras consecutivas o letras consecutivas del alfabeto, en ese caso ponemos la primera y la última y un guión en medio, es decir:
/[a-f]/
, es lo mismo que poner /[abcdef]/
/[1-5]/
, es lo mismo que poner /[12345]/
Si queremos incluir el guión dentro de la expresión anterior lo pondemos poner al
final: /[a-f-]/
, o también al principio, pero con una barra inclinada al revés
para indicar que es un carácter de escape: /[\-a-f]/
.
Los caracteres de escape tienen aquí la misma función que en los textos, poder escribir ciertos símbolos que sirven para el código.
El siguiente ejemplo comprueba si el texto tiene alguno de los números del 1 al 5:
texto1 = "Pedro tiene 62 años"; texto2 = "Pablo tiene 67 años"; buscar = /[1-5]/; alert(buscar.test(texto1)); //devuelve true alert(buscar.test(texto2)); //devuelve false
Como en los ejemplos anteriores el primer texto cumple las condiciones de la expresión regular (tener algún numero entre el 1 y el 5), y el segundo no lo cumple.
Para los casos más habituales hay unos caracteres especiales que indican si la cadena tiene un determinado tipo de caracteres:
false
si sólo contiene caracteres
alfanuméricos. false
si sólo contiene dígitos.false
si sólo contiene caracteres que
definen espacios en blanco.Veamos algunos ejemplos con estos caracteres especiales.
texto1 = "María cumple 12 años"; texto2 = "María cumple doce años"; buscar = /\d/; alert(buscar.test(texto1)); //devuelve true alert(buscar.test(texto2)); //devuelve false
Aquí el primer texto se ajusta al patrón al contener cifras, el segundo, al no contenerlas, no se ajusta.
En este otro ejemplo se comprueba si lo que hay escrito es una cadena de texto alfanumérica:
texto1 = "Hoy es lunes"; texto2 = " "; buscar = /\w/; alert(buscar.test(texto1)); //devuelve true alert(buscar.test(texto2)); //devuelve false
el signo /./ indica cualquier caracter, con lo que se suele usar para comprobar que la cadena no está vacía, tal como muestra este ejemplo:
texto1 = "Hoy es lunes"; texto2 = ""; buscar = /./; alert(buscar.test(texto1)); //devuelve true alert(buscar.test(texto2)); //devuelve false
Aquí el segundo texto devuelve false
al estar la cadena vacía.
Como se ve el punto es un caracter especial, por lo que si queremos buscar un
punto en la cadena deberemos ponerlo con una barra inclinada inversa delante:
/\./
, así buscaremos si la cadena contiene algún punto.
los signos ^
al principio de la expresión regular y $
al final indican que la cadena de texto debe coincidir completamente con la
expresión regular, es decir , comprueba que la cadena se ajusta completamente
al patrón en lugar de comprobar si lo contiene. Así por ejemplo, si queremos
comprobar si una cadena es un número escribiremos: /^\d$/, como en el
siguiente ejemplo:
texto1 = "casa"; texto2 = "Mi casa es grande"; buscar = /^casa$/; alert(buscar.test(texto1)); //devuelve true alert(buscar.test(texto2)); //devuelve false
Aquí en el segundo texto devuelve false
a pesar de que
contiene la palabra buscada, esto es porque lo que se busca es que
el texto coincida completamente con el patrón dado, y no que lo contenga.
En la siguiente página seguiremos viendo otros elementos de las expresiones regulares.
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