Ocultar email con Jquery

Desgraciadamente, existen por ahí robots que se dedican a buscar direcciones de correo para enviarles spam.

Hay muchos modos de evitar esto. Alguna gente escribe los emails como nombre[at]dominio.com. Hay otras técnicas como cambiarlos por imágenes, entre otras. Pero a mi modo de ver, la mejor manera de evitar esto es ocultar la dirección de correo con Javascript. En este caso, vamos a ver como con 5 líneas de código podemos conseguir esto, gracias a Jquery.

Para evitar esto, tenemos un plan. Normalmente, un enlace a un email tiene esta forma:


<a href="mailto:nombre@dominio.com">nombre@dominio.com</a>

Nuestro objetivo, es escribir en nuestro html algo como esto:


<a data-email="nombre,dominio.com" href="#"></a>

y que después se transforme automáticamente en un enlace como el de arriba, al cargarse la página. Esto debería ser suficiente para engañar a la mayor parte de robots fisgones, ya que prácticamente ninguno puede entender Javascript y mucho menos Jquery.

Bueno, al turrón. Para hacer esto:

  1. Recorremos todos los enlaces (<a>) que tienen atributo “data-email”.
  2. Cogemos el contenido del atributo data-email.
  3. Cambiamos la coma por una @, y almacenamos el email en memoria.
  4. Reconstruimos el enlace con su mailto y su email.
  5. Cambiamos cada email por su versión procesadita y lista para clickear.

El código sería el siguiente:


// Esperamos a que el documento esté listo
$(document).ready(function() {
    //cogemos todos los anchors (<a>) de la página que tienen data-email
    $('a[data-email]').each(function(index, value) {
        var email = $(this).attr('data-email'); //cogemos el email
        email = email.replace(",",'@'); //cambiamos la coma por una @
        $(this).attr('href','mailto:' + email); //ponemos el atributo href="mailto:..."
        $(this).html(email); //ponemos el texto correspondiente en el enlace
    }); //cerramos each
}); // cerramos document ready

Este código funciona, pero podemos optimizarlo más aún, así:


$(function() {
    $('a[data-email]').each(function(index, value) {
        var email = $(this).attr('data-email').replace(",",'@');
        $(this).attr('href','mailto:'+email).html(email);
    }); // fin each
}); // fin document ready

Ahora ya sólo tienes que cambiar tus enlaces tipo <a href=”mailto:nombre@dominio.com”> por otros tipo <a data-email=”nombre,dominio.com” href=”#”></a>, y listo!

 



Share :

Deja una respuesta