Proteger Email de los Spammers con Javascript [2]

Podemos aplicar una operación javascript para varios elementos de enlace que contenga un correo de email que deseemos proteger. Los elementos a proteger deberán contener la clase "e-l".

El elemento HTML debe de ser como el siguiente:

<p><a class="e-l" href="#" data-ep1="adanjr" data-ep2="altoweb" data-ep3="com.mx"></a></p>

Y el código javascript debe ser agregado al final del body, y debe de contener lo siguiente:

<script type="text/javascript">
        var enlaces = document.getElementsByClassName('e-l');
        var total_enlaces = enlaces.length;
        for (var i = 0; i < total_enlaces; i++) {
            var parte1 = enlaces[i].getAttribute('data-ep1');
            var parte2 = enlaces[i].getAttribute('data-ep2');
            var parte3 = enlaces[i].getAttribute('data-ep3');
            var nuevaDireccion = parte1 + '@@' + parte2 + "." + parte3;

            enlaces[i].setAttribute('href', 'mailto:' + nuevaDireccion);
            enlaces[i].innerHTML = nuevaDireccion;
        }   
    </script>

http://www.altoweb.com.mx

Proteger Email de los Spammers con una función en Javascript

La función en javascript es la siguiente:

  <script type="text/javascript">
        function construirEnlace(usuario,dominio_inicio,dominio_fin){
            document.write('<a class="e-l" href="mailto:'+ usuario +'@' + dominio_inicio +'.'+ dominio_fin + '">'
                                    + usuario +'@@' + dominio_inicio +'.'+ dominio_fin +'</a>');
        } 
    </script>

Y en el HTML va lo siguiente:

<p><script type="text/javascript">construirEnlace('adanjr','altoweb','com.mx');</script></p>

http://www.altoweb.com.mx

Proteger Email de los Spammers con Entidades de Caracteres

El email se puede proteger también mediante la codificación con entidades de caracter. Para esto podemos usar la siguiente página www.altoweb.com.mx/Herramientas/CodificarEmail.

Solo introduces tu email, das clic en el botón y te codifica tu email en el cuadro de abajo. El resultado lo integras a tu sitio web y te mostrará el email de manera correcta.

http://www.altoweb.com.mx

Proteger Email de los Spammer con propiedades unicode

Esto va en el CSS de la página:   

 <style type="text/css" media="screen">
        .e-l {
            unicode-bidi: bidi-override; direction:rtl;
            text-align: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;            
        }
    </style>

Y en el html se agrega el email invertido:

<p class="e-l">xm.moc.bewotla@rjnada</p>

El resultado muestra el email correctamente y no seleccionable:

http://www.altoweb.com.mx

Proteger email de los spammers con Pseudo clases de CSS

Esto va en el CSS: 

<style type="text/css" media="screen">
        .e-l:before { content: attr(data-user)'@'; }
        .e-l:after { content: attr(data-domain);  }
</style>

Y esto en el HTML en donde desee mostrar el email:

<p class="e-l" data-user="adanjr" data-domain="altoweb.com.mx"></p>

Resultado:

www.altoweb.com.mx