Una cosa que no vimos en el ciclo de DAI, al menos el año que yo cursaba, fue a validar datos de un formulario con expresiones regulares en Javascript. Ciertamente es algo bastante sencillo y que uno puede aprender por su cuenta, pero si estás en el mismo caso que yo la primera vez que tuve que usar una seguramente lo siguiente te sea de ayuda.
Primero emprecemos por definir «expresión regular»: Se trata de un patrón que nos permite buscar coincidencias dentro de una cadena de texto. Estos patrones pueden utilizarse con los metodos exec y text del objeto RegExp, y con los metodos match, replace, search y split del objeto String.
En Javascript las expresiones regulares se basan en las de Perl, de forma que son muy muy parecidas. Para crear una expresión regular podemos usar el constructor del objeto RegExp, pero es mas conveniente utilizar una sintaxis especialmente pensado para ello, como la del siguiente ejemplo:
var patron = /A[0-9]/
La otra opción sería creando un objeto RegExp con la cadena del patrón, usando el constructor del objeto:
var patron = new RegExp(«A[0-9]»)
En ambos casos creamos el mismo objeto RegExp, que comprobaría si la cadena que analizamos está formada por una A seguida de un número entre 0 y 9.
Obviamente necesitamos de una serie de caracteres especiales para construir la expresión regular, que serían los siguientes:
- \ -> Indica que el siguiente caracter normal debe ser considerado como especial. También se utiliza como caracter de escape para los caracteres especiales.
- ^ -> Indica el comienzo de una línea.
- $ -> Indica el final de una línea.
- * -> Encuentra coincidencia del caracter que le precede cuando aparece una o varias veces o, también, cuando no aparece . Se explica mejor con un ejemplo. Si utilizáis el patró /uno*/ este hayaría coindidencias con «uno», «unooo» y con «un» .
- + ->Igual que el * pero cuando el caracter aparece 1 o más veces. (Vamos, que en caso de que no aparezca el caracter precedente no vería coincidencia).
- ? -> Igual que el *, pero cuando el caracter aparece ninguna o 1 vez.
- . ->Se utiliza para encontrar cualquier caracter que no sea un caracter de nueva línea.
- (X) -> Encuentra coincidencias con el caracter ‘X’ (sea este un caracter normal cualquiera), y recuerda el patrón para su posterior utilización
- X|Y -> Encuentra coincidencia si aparece el caracter ‘X’ o el caracter ‘Y’.
- {n} -> Encuentra coincidencia si hay exactamente n apariciones del caracter que precede.
- {n, } -> Encuentra coincidencia si hay al menos n apariciones del caracter que precede.
- {n,m} ->Encuentra coincidencia si hay como mínimo n y com máximo m apariciones del caracter que precede.
- [xyz] -> Representa un conjunto de caracteres individuales. Por ejemplo [aeiou] encontraría coincidencia con cualquiera de las vocales en minúscula, [123] encontraría coincidencia si apareciera cualquiera de los tres números. Utilizando un guión «-» podemos establecer un rango. Es decir [0-9] encontraría coincidencias si apareciera cualquier número entre 0 y 9, o [A-Z] lo encontraría con cualquier letra mayúscula.
- [^xyz] -> Encuentra coincidencias con aquellos caracteres que no aparezcan en el conjunto. Al igual que en el caso anterior, con el ‘-‘ se puede definir un rango.
- \b -> Encuentra coincidencia con el límite de las palabras. Es decir, si buscáramos /\boca/ encontraría coindidencias en la frase «jugemos a la oca» pero no en «ahí hay una roca» o «me duele la boca».
- \d -> Busca cualquier dígito. Equivale a [0-9]
- \D -> Busca cualquier caracter que no sea un dígito.
- \w -> Busca cualquier caracter alfanumérico. Equivalente a [a-zA-Z0-9_].
- \W -> Busca cualquier caracter no alfanumérico
- \s -> Busca un espacio
- \t -> busca una tabulación
Os iba a poner una lista de ejemplos de expresiones regulares recurrentes. Pero la verdad creo que mejor os dejo este enlace a otro WordPress donde he visto buenos ejemplos para validar formatos de teléfonos, fechas, horas, números de tarjeta de crédito… Y si queréis validar un DNI, os remito a esta entrada que hice ayer mismo. (Si me váis a comentar que está mal sangrado… ya lo se, pero al meter el código como comentario se cargó la tabulación del Notepad++, si lo copiáis al Visual Estudio o al Aptana y usáis la corrección de sangrado automática ya os lo pone más bonito y legible)