Expresiones regulares en JavaScript

Las expresiones regulares son un mecanismo bastante potente con el cual se pueden manipular cadenas de caracteres, se pueden realizar búsquedas por patrón y reemplazos de cadena, consiste en establecer un patrón (Ejemplo: solo letras, solo números, palabra en específica, etc…) el cual luego se podrá utilizar ya sea para reemplazar una cadena o buscar el patrón dentro de la misma. Las expresiones regulares en JavaScript se basan en las de Perl, por lo que son muy parecidas. JavaScript provee dos formas de crear una expresión regular, a través de un objeto, el objeto RegExp, y a través de una sintaxis especialmente pensada para ello (Crear un String con el siguiente formato: «/<patrón>/».). A continuación una lista de los caracteres, los más usados, que pueden constituir una expresión regular en JavaScript:

Comodines	Significado	Ejemplo
\	Marca de carácter especial	/\.com/; Busca la cadena «.com».
^	Comienzo de una línea	/^a/; Cadenas que comienzan con ‘a’.
$	Final de una línea	/a$/; Cadenas que terminen con ‘a’.
.	Cualquier carácter (menos salto de línea)	/^….$/; Cadenas de 4 caracteres.
|	Indica opciones	/^a|^1/; Cadenas que comiencen con ‘a’ o con ‘1’.
()	Agrupar caracteres	/(abc123)/; Busca la cadena ‘abc123’;
[]	Conjunto de caracteres opcionales.	/[a-z]/; Busca una letra de la ‘a’ a la ‘z’.
Modificadores	Significado	Ejemplo
*	Repetir 0 o más veces	/1*234/; Buscaría: «234»,»1234″,»11234″,etc.
+	Repetir 1 o más veces	/1+234/; Buscaría: «1234»,»11234″,»111234″,etc.
?	1 o 0 veces	/h?ola/; Buscaría: «hola»,»ola».
{n}	Exactamente n veces	/1{2}234/; Buscaría: «11234»;
{n,}	Al menos n veces	/1{2,}234/; Buscaría: «11234»,»111234″,»1111234″,etc.
{n,m}	Entre n y m veces	/1{2,3}234/; Buscaría: «11234»,»111234″.
Especiales	Significado	Ejemplo
\d	Un dígito.	/\d/; Busca un dígito del ‘0’ al ‘9’.
\D	Alfabético.	/\D/; Busca cualquier caracter que no sea un número.
\w	Cualquier alfanumérico, equivalente a [a-zA-Z0-9_ ]	/\w/; Busca un caracter alfanumérico incluyendo el ‘_’.
\W	Opuesto a \w	/\W/; Busca cualquier caracter que no sea alfanumérico ni ‘_’.
\s	Carácter tipo espacio	/12\s34/; Buscaría «12 34».
\S	Opuesto a \s	/12\S34/; Buscaría «1234».
Flags	Significado	Modo de uso
g	Explora la cadena completa	Las Flags se utilizan al final del patrón después de cerrarlo con ‘/’, Ejemplos de uso:»/[a-z]/i»; Buscaría una letra mayúscula o minúscula. Ejemplo: «Hola»,»hola»,»HOLA»,etc…»/[a-z]*/ix»; Buscaría letras mayúsculas o minúsculas ignorando los espacios en la cadena. Ejemplo: «Ho la», «ho la», «HO LA»,etc…
i	No distinguir entre mayúsculas y minúsculas
m	Permite usar varios ^ y $ en el patrón
s	Incluye el salto de linea en el comodín ‘.’
x	Ignora los espacios en el patrón

Ahora aquí les dejo unas expresiones regulares y la forma de validar y reemplazar cadenas con JavaScript:

/* Funcion que reemplaza (borra) los espacios en blanco del inicio

 * y final de una cadena. Ejemplo de uso:

 *    la cadena »  hola  » al usar la función trim(»  hola  «);

 *     resultaría «hola».

 */

function trim(cadena){

    var expresionRegular = /^\s+|\s+$/g;

    return cadena.replace(expresionRegular, «»);
}

/* Función que valida si la cadena contiene solo números.

 *  Ejemplo de uso:

 *   Al usar validaSoloNumerico(«1234») : retorna True.

 *   Al usar validaSoloNumerico(«a123») : retorna False.

 */

function validaSoloNumerico(cadena){

    var patron = /^\d*$/;

    if(!cadena.search(patron))

      return true;

    else

      return false;
}

/* Función que valida si la cadena contiene solo números.

 *  Ejemplo de uso:

 *   Al usar validaSoloTexto(«abcd») : retorna True.

 *   Al usar validaSoloTexto(«1abc») : retorna False.

 */

function validaSoloTexto(cadena){

  var patron = /^[a-zA-Z]*$/;

  // En caso de querer validar cadenas con espacios usar: /^[a-zA-Z\s]*$/

  if(!cadena.search(patron))

    return true;

  else

    return false;
}

/* Función que valida si el correo es tiene un formato valido.

 *  Ejemplo de uso:

 *   Al usar validaCorreoElectronico(«aa@aa.cl») : retorna True.

 *   Al usar validaCorreoElectronico(«aa@@aa.cl») : retorna False.

 *   Al usar validaCorreoElectronico(«@aa.cl») : retorna False.

 *   Al usar validaCorreoElectronico(«aa@.cl») : retorna False.

 *   Al usar validaCorreoElectronico(«aa@cl») : retorna False.

 *   Al usar validaCorreoElectronico(«aa@aa») : retorna False.

 *   etc…

 */

function validaCorreoElectronico(correoElectronico){

    var patron = /^([a-z]+[a-z1-9._-]*)@{1}([a-z1-9\.]{2,})\.([a-z]{2,3})$/;

    if(!correoElectronico.search(patron))

      return true;

    else

      return false;
}

Espero les sirva esta pequeña guía.

---

Esteban Olate

Manejo de nodos DOM con JavaScript

Gracias a DOM se logran generar páginas Web más dinámicas y de mayor complejidad. Consiste en un conjunto de utilidades que nos permite manipular nuestra página como si fuera un árbol de nodos, donde cada nodo representa a una etiqueta XHTML de nuestra página. Los lenguajes de programación (Como Java, PHP,JavaScript,etc…) permiten manipular estos nodos, es decir, crearlos, modificarlos y eliminarlos. A continuación veremos cómo implementar el uso de nodos DOM en JavaScript.

JavaScript proporciona un objeto, que hace referencia a nuestra página web actual, llamado «document», el cual posee una serie de atributos y métodos que podemos utilizar simplemente escribiendo «document.<nombreMetodo o nombreAtributo>». Para el manejo de nodos DOM JavaScript proporciona una serie de métodos y atributos de los cuales los más usados son los siguientes:

document.getElementById(<id>);	Retorna nodo según su id, si no encuentra retorna «undefined».
document.createElement(<tag>);	Crea un nodo de tipo elemento según el tag ingresado.
document.createTextNode(<texto>);	Crea un nodo de tipo texto con el texto ingresado.
<nodo>.hasChild();	Retorna «true» si el nodo tiene nodo/s hijos, de lo contrario retorna «false».
<nodo>.parentNode();	Retorna el nodo padre del nodo actual.
<nodo>.appendChild(<nodo>);	Agrega un nodo hijo al nodo actual.
<nodo>.removeChild(<nodo>);	Elimina el nodo recibido por parametro del nodo actual.
<nodo>.removeAttribute(<atributo>);	Elimina el atributo ingresado del nodo actual.
<nodo>.setAttribute(<atributo>,<valor>);	Asigna atributo al nodo actual.
<nodo>.childNodes;	Retorna arreglo con todos los nodos hijos del nodo actual.

Ahora un ejemplo que utiliza algunos de estos métodos, para el cual usaremos dos archivos:

funcionesEjemplo.js:

function crearDiv(){

  //Obtenemos el nodo que hace referencia al elemento ‘body’

  var nodoDestino = document.body;

  //Creamos un elemento div

  var div = document.createElement(«div«);

  //Asignamos un id y le damos algo de estilo css para visualizarlo mejor

  div.setAttribute(«id»,»divPrueba»);

  div.setAttribute(«style»,»background-color:#ccc; height:50px; width:300px;»);

  //Agregamos el elemento creado al ‘body’

  nodoDestino.appendChild(div);
}

function agregaTexto(texto){

  //Obtenemos el nodo anteriormente creado

  var div = document.getElementById(«divPrueba»);

  //Consultamos si la búsqueda retorno undefined

  if(div == undefined)

    alert(«No has creado el div…»);

  else

    //Creamos un nodo de texto y lo agregamos al div

    div.appendChild(document.createTextNode(texto));

}

function cambiarColorLetra(){

  var div = document.getElementById(«divPrueba»);

  if(div == undefined)

    alert(«No has creado el div…»);

  else

    //Modificamos el estilo para cambiar el color de letra

    div.setAttribute(«style»,»background-color:#ccc; height:50px; width:300px; color:green;»);

}

function eliminarNodo(idNodo){

  //Buscamos el nodo y verficamos su retorno

  var nodo = document.getElementById(idNodo);

  if(nodo == undefined)

    alert(«No has creado el div…»);

  else{

    //Obtenemos el nodo padre

    var padre = nodo.parentNode;

    //Removemos el nodo desde el nodo padre

    padre.removeChild(nodo);

  }

}

index.html:

<html>

  <head>

    <title>Manejo nodos DOM con JavaScript</title>

    <!– Incorporamos nuestro script –>

    <script language=»javascript» src=»funcionesEjemplo.js»></script>

  </head>

  <body>

    <input type=»button» value=»Crear div» onclick=»crearDiv();»>

    <input type=»button» value=»Agregar texto» onclick=»agregaTexto(‘Texto de prueba’);»>

    <input type=»button» value=»Cambiar color letra» onclick=»cambiarColorLetra();»>

    <input type=»button» value=»Eliminar div» onclick=»eliminarNodo(‘divPrueba’);»>

  </body>
</html>

Espero haber sido claro y que les ayude…

---

Esteban Olate

Hola mundo AJAX (usando metodos POST y GET)

Anteriormente les mostraba cómo crear un objeto de AJAX válido para diferentes navegadores. Ahora veremos la implementación con dos ejemplos básicos. Para realizar esto debemos contar con los siguientes tres archivos.

scriptAJAX.js:

function crearAjax(){

   var objetoAjax=false;

   if(navigator.appName=="Microsoft Internet Explorer")

     objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");

   else

     objetoAjax = new XMLHttpRequest();

   return(objetoAjax);
}

function llamadaAJAX(metodo){

  //Creamos nuestro objeto

  var ajax=crearAjax();

  //Preguntamos si es válido

  if(ajax){

    //Preguntamos si el método es POST

    if(metodo == "post"){

      //Llamada al archivo mediante POST

      ajax.open("POST","archivo.php");

      //Se cambian las cabeceras de nuestro objeto AJAX para poder enviar datos

      ajax.setRequestHeader("Content-Type",

                            "application/x-www-form-urlencoded");

      /* Enviamos datos, si se quiere agregar más se debe colocar el símbolo ‘&’

        al comienzo de cada nuevo dato */

      ajax.send("valor='post'");

    }

    //Preguntamos si el método es GET

    if(metodo == "get"){

      /*  Llamada al archivo mediante GET, en esta ocasión los datos son

          enviados atraves de la URL, por lo que ya no es necesario cambiar

          cabeceras ni enviar nada en el método ‘send()’ */

      ajax.open("GET","archivo.php?valor=get");

      ajax.send(null);

    }

    /* Con esta función controlamos los estados de nuestro objeto AJAX,

       pueden ser estados 1,2,3,4,200,etc..  */

    ajax.onreadystatechange = function(){

      //Preguntamos si nuestro objeto se encuentra en el estado 4 (Cargado)

      if(ajax.readyState==4){

        // Dejamos la respuesta en una variable, de tipo nodo texto (DOM)

        var respuesta = document.createTextNode(ajax.responseText);

        //Obtenemos una referencia al div respuesta

        var div = document.getElementById("resultado");

        //Agregamos el nodo de texto al div

        div.appendChild(respuesta);

      }

    }

  }
}

index.html:

<html>

  <head>

    <title>Hola mundo AJAX!</title>

    <!– Incorporamos el script a nuestra página –>

    <script type="text/javascript" language="javascript" src="scriptAJAX.js"></script>

  </head>

  <body>

    <input type="button" value="Llamada GET" onclick="llamadaAjax('get');" />

    <br />

    <input type="button" value="LLamada POST" onclick="llamadaAjax('post');" />

    <br />

    <div id="resultado" name="resultado"></div>

  </body>

</html>

archivo.php:

<?php

  // Preguntamos si llego una variable llamada ‘valor’ mediante POST

  if(isset($_POST["valor"])){

    // Enviamos mensaje para POST

    echo "Hola mundo! por POST";

  }

  // Preguntamos si llego una variable llamada ‘valor’ mediante GET

  if(isset($_GET["valor"])){

    // Enviamos mensaje GET

    echo "Hola mundo! por GET";

  }
?>

Espero haya quedado claro cómo utilizar los métodos POST y GET con AJAX.

---

Esteban Olate

Creando objeto AJAX

La integración de AJAX ha logrado que nuestros sitios Web sean más agiles a la hora de desplegar información o manipular acciones sin esas molestas recargas. Ahora les mostrare como crear con AJAX con una pequeña función JavaScript válida para la variedad de navegadores más usados, quiero decir para iExplorer y todos los demás…

Código:


function crearAjax(){


  /* Declarando variable a retornar con nuestro objeto, retornaremos "false"

   * en caso de algún error

   */


  var objetoAjax=false;


  //Preguntando si nuestro querido usuario aún usa Internet Explorer


  if(navigator.appName=="Microsoft Internet Explorer")


    objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");


  //De lo contrario está usando otro navegador, por supuesto uno mejor


  else


    objetoAjax = new XMLHttpRequest();


  //Retornamos nuestro objeto


  return(objetoAjax);
}

Esta función es válida para las últimas versiones de iExplorer (8,9) y para navegadores como Firefox, Opera, Chrome, y similares.

---

Esteban Olate