Expresiones regulares en JavaScript

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

El uso de expresiones regulares en JavaScript es una buena manera de prevalidar el formato de ciertos datos en el lado del cliente, sin necesidad de recurrir a llamadas al servidor. Sin embargo, la forma de hacerlo es adecuada, también, en entorno de API’s de Node JS (aunque el uso de Node JS no será objeto de estudio en este artículo, dado que es un tema tan amplio que requeriría su propia serie de artículos, que le dedicaremos en su momento).

En este artículo vamos, pues, a mostrar como hacer uso de las RegExp en JavaScript. Veremos que podemos manejar los datos a evaluar por programación clásica o por jQuery. Finalizaremos con una breve reflexión acerca de la (limitada) programación orientada a objetos de JavaScript. Vamos a ello.

USANDO JAVASCRIPT PLANO

Esta es la forma más simple, antigua y rudimentaria de uso de expresiones regulares, pero también perfectamente válida para códigos simples. Supongamos que tenemos un campo de texto en la página, llamado CampoCorreo, destinado a que el usuario introduzca un correo electrónico. Lo que queremos es que, por ejemplo, al envío del formulario (evento onSubmit) se ejecute una función que valide la dirección de correo para comprobar si se ajusta a formato y, en caso de no hacerlo, no permita enviar el formulario. La función de nuestro ejemplo se va a llamar ValidarCorreo, y el código podría quedar así:

Lo primero en lo que debemos fijarnos es en la línea 16, donde se define una variable que contiene la expresión regular. Esta NO es una cadena, por lo que no se acota con comillas simples ni dobles. De hecho, las expresiones regulares en JavaScript se acotan con barras inclinadas, una al principio, y otra al final, cómo vemos en la línea mencionada. Con esto se crea un objeto que contiene la expresión regular, a través del cual la emplearemos.

En la línea 19 vemos como se emplea el método test() de la expresión regular. Este recibe, cómo argunmento, el dato que queremos validar. Devuelve true, si el dato se ajusta al patrón definido en la RegExp, o false, si no lo hace. De hecho, salvo por el aviso de error, el condicional empleado podría haber quedado reducido a una línea:

return ExpresionCorreo.test(document.getElementById('CampoCorreo').value);

Los métodos que se pueden emplear para trabajar con expresiones regulares aparecen detallados a continuacion:

EL MÉTODO test()

Cómo hemos visto, este método se emplea para cotejar la validez de un dato con una expresión regular. El método se aplica a la propia expresión, pasándole, como argumento, el dato que queremos cotejar. Devuelve true si el dato encaja en el patrón de la expresión regular, o false, en caso contrario.

EL MÉTODO exec()

La sintaxis de este método es la misma que la del anterior. Devuelve una matriz en la que el primer elemento (con índice 0) contiene el primer fragmento del dato a evaluar que coincide con la expresión regular; el segundo elemento de la matriz (con la clave index) contiene la posición de dicho fragmento dentro del dato a evaluar; el tercer elemento (con la clave input) contiene el dato a evaluar. Supongamos el siguiente código:

Cómo ves, tenemos una expresión regular muy simple, hecha para localizar una secuencia de dos dígitos. Después, tenemos una cadena, en la que, si nos ponemos a buscar, existen tres secuencias de dos dígitos (19, 98, 80), pero al método exec() sólo “le interesa” la primera. Y ese es el resultado que obtenemos en consola:

["19", index: 5, input: "alfa 1980"]

Si no se produce una coincidencia obtenemos, como resultado, un valor null.

EL MÉTODO match()

Funciona igual que el anterior, aunque su sintaxis camba el orden de los términos:

DatoParaEvaluar.match(ExpresionRegular);

Sin embargo, si terminamos la expresión regular con el flag g (global), cuenta todos los fragmentos del dato a evaluar que coincidan con la expresión regular. Observa el siguiente código:

El resultado en consola será:

(2) ["19", "84"]

Observa que no cuenta tres apariciones del patrón, cómo cabría pensar en principio (19, 98 y 84), sino dos (19 y 84). Esto es porque, una vez encontrada la primera aparición del patrón (19), se empieza a buscar a partir de la siguiente posición en el dato a evaluar.

EL MÉTODO search()

Este método devuelve la posición de la primera coincidencia del patrón en el dato a buscar, o -1, si no hay tal coincidencia. La sintaxis es:

DatoParaEvaluar.search(Expresión);

EL MÉTODO replace()

Este método nos permite sustituir parte de una cadena, que se ajuste a una expresión regular, por otra cosa. Por ejemplo, supongamos el siguiente código:

El resultado que vemos en la consola es el siguiente:

Este periodo está entre 1900 y 1910.
Este periodo está entre 2000 y 2010.

Como ves, en la cadena original se ha buscado la secuencia 19 (de forma global, por el flag g) y se ha sustituido por 20.

USANDO jQuery

Hoy en día (y durará muchos años) jQuery es una tecnología que todo el mundo emplea en los desarrollos JavaScript. Por supuesto, este framework no podía permanecer ajeno al uso de las expresiones regulares. Sin embargo, no se trata de que jQuery implemente métodos o funcionalidades específicos para el uso de RegExp (que no es el caso), sino de que lo usemos para referenciar los datos que vamos a evaluar:

Observa las líneas resaltadas, para ver qué es lo que hemos hecho.

POO

Desde el punto de vista de la programación orientada a objetos (en la medida limitada en que se usa en JavaScript este concepto), debemos considerar las expresiones regulares como lo que realmente son: objetos de la clase RegExp, del mismo modo que las cadenas son objetos de la clase String. Por lo tanto, no es que vayamos a aportar en este párrafo nada nuevo. Realmente lo que queremos es hacer una reflexión sobre el hecho de que, tanto cuando manejamos cadenas, como cuando manejamos expresiones regulares, en realidad estamos tratando con objetos de clases predefinidas en JavaScript. Por lo tanto, es, simplemente, una cuestión de concepto teórico, más que de aprender ya nada nuevo a este respecto.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *