Una expresión regular es un patrón que describe un conjunto de cadenas y que se puede utilizar para búsquedas dentro de una cadena o un archivo. Un usuario avanzado o un programador que desee obtener la máxima potencia de ciertas órdenes, debe conocer y manejar expresiones regulares. Las expresiones regulares se construyen de forma similar a las expresiones aritméticas, utilizando diversos operadores para combinar expresiones más sencillas. Las piezas fundamentales para la construcción de expresiones regulares son las que representan a un carácter simple. La mayoría de los caracteres, incluyendo las letras y los dígitos, se consideran expresiones regulares que se representan a sí mismos. La principal utilidad de las expresiones regulares es la de describir un conjunto de cadenas, lo que resulta de utilidad en editores de texto y aplicaciones para buscar y manipular texto. Además, otro uso es la validación de un formato específico en una cadena de caracteres dada, como por ejemplo fechas, correos electrónicos o identificadores.
En JavaScript existen dos formas de definir una expresión regular: mediante una cadena literal y mediante el constructor de objeto
RegExp. Una expresión regular se puede aplicar a diferentes cadenas mediante expReg.test(cadena), que devuelve true si cadena cumple expReg y false en caso contrario.Por ejemplo, en el siguiente código se comprueba si el usuario ha escrito correctamente una supuesta matrícula de vehículo que debe seguir el patrón código del país (una o dos letras), un espacio en blanco, numeración (cuatro dígitos), un espacio en blanco y letras (tres letras, empezando en BBB y acabando en ZZZ, sin considerar las vocales):
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Validación con expresión regular</title>
<script type="text/javascript">
function literal() {
var m = document.getElementById("matricula").value;
var expreg = /^[A-Z]{1,2}\s\d{4}\s([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]){3}$/;
if(expreg.test(m))
alert("La matrícula es correcta");
else
alert("La matrícula NO es correcta");
}
function objeto() {
var m = document.getElementById("matricula").value;
var expreg = new RegExp("^[A-Z]{1,2}\\s\\d{4}\\s([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]){3}$");
if(expreg.test(m))
alert("La matrícula es correcta");
else
alert("La matrícula NO es correcta");
}
</script>
</head>
<body>
<form id="miFormulario" action="" method="get">
<p>
Matrícula: <input type="text" id="matricula" />
<br />
<input type="button" value="Literal" onclick="literal()" />
<input type="button" value="Objeto" onclick="objeto()" />
</p>
</form>
</body>
</html<
Al usar la expresión regular con el objeto
RegExp, como se escribe dentro de una cadena es necesario escribir dos barras invertidas \\ para representar una barra invertida, ya que el carácter barra invertida se emplea para escapar los caracteres especiales. Cuando se emplea mediante una cadena literal no se debe escapar la barra invertida.Significado de cada elemento de la expresión regular del ejemplo:
^: el emparejamiento se debe realizar desde el principio de la cadena.[A-Z]: cualquier carácter entre la A mayúscula y la Z mayúscula.{1,2}: uno o dos caracteres.\s: un espacio en blanco.\d: un dígito.{4}: cuatro dígitos.\s: un espacio en blanco.([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]): cualquier carácter entre la B mayúscula y la Z mayúscula, excepto las vocales.{3}: tres caracteres.$: el emparejamiento se debe realizar hasta el final de la cadena.Con esta expresión regular podemos tener matrículas desde "A 1111 BBB" hasta "ZZ 9999 ZZZ".
Acceder al ejemplo
DOM (Document Object Model) es un API destinado a trabajar con documentos HTML y XML.
DOM genera una representación en forma de árbol de un documento y permite su manipulación (añadir un elemento nuevo, borrar un elemento, mover un elemento de sitio). Algunas funciones útiles del DOM:
document.getElementById(id): devuelve el elemento con el identificador indicado.elemento.getElementsByTagName(etiqueta): devuelve un array de elementos con la etiqueta indicada, los elementos se buscan a partir de elemento.document.createElement(etiqueta): crea un nuevo elemento según la etiqueta indicada.elementoPadre.appendChild(elementoNuevo): añade elementoNuevo a elementoPadre al final de su lista de elementos hijo.elementoPadre.insertBefore(elementoNuevo, elementoReferencia): añade elementoNuevo en la lista de elementos hijo de elementoPadre antes de elementoReferencia.El siguiente ejemplo muestra cómo se pueden añadir párrafos de texto nuevos a una página web con el texto que introduzca el usuario:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Validación con expresión regular y nuevo texto</title>
<script type="text/javascript">
function nuevoTexto() {
// Obtiene el div que tiene id="parrafos"
var d = document.getElementById("parrafos");
// Crea un nuevo elemento de tipo párrafo
var np = document.createElement("p");
// Inserta el texto en el contenido del nuevo párrafo
np.textContent = document.getElementById("texto").value;
// Añade el párrafo al final de los elementos que contenga el div
d.appendChild(np);
return false;
}
</script>
</head>
<body>
<form id="miFormulario" action="" method="get" onsubmit="return nuevoTexto()" >
<p>
Texto: <input type="text" id="texto" />
<br />
<input type="submit" value="Añade texto" />
</p>
</form>
<div id="parrafos">
<!-- Inicialmente vacío -->
</div>
</body>