How to obfuscate, cloak or hide your email address from spammers in your website

Whenever you publish your email address on your website, it will be vulnerable to email harvesters and spammers.  What they usually do is they use their own software that "crawls" over millions of websites and search and scan the all the texts and look for those words containing the email patterns.



A a typical HTML code for an email link would look like this:

<a href="mailto:myEmail@myDomain.com">myEmail@myDomain.com</a> 

As a good practice, we have to make sure that email addresses that appear on your site are obfuscated or cloaked.  In this way, only people can read it but not by bots and other web-crawlers.

Email addresses can be made un-readable to these software by not putting the email address directly as plain text.  We can use the power of JavaScript to compose your email address.

I'll show you how we can do this by following these steps:

Step 1:   

Create an anchor element and assign an ID to it. In this example, let's call it as as email_link.
Do not put your email address in this link. Let the JavaScript do it for you.

<a id="email_link" /> 

Step 2:

Create your JavaScript snippet in your window.onload. If you are using jQuery, put it in your document.ready section.  Compose your email address by assigning it in email1 and email2 variables.  In this example, my email address is myEmail@myDomain.com.

    <script type="text/javascript">

    window.onload = function() {


    var email1 = ["m", "y", "E", "m","a","i","l"];
    var email2 = ["m","y","D","o","m","a","i","n",".","c","o","m"]; 

    var encodedEmail = email1.join("") + "@" + email2.join("");

    var email_link = document.getElementById("email_link");

    email_link.innerHTML=encodedEmail;
    email_link.setAttribute("href","mailto:" + encodedEmail);

    };

    </script>

For those who are using jQuery, you can use the snippet below.

    <script type="text/javascript">

    $(document).ready(function() {

    var email1 = ["m", "y", "E", "m","a","i","l"];
    var email2 = ["m","y","D","o","m","a","i","n",".","c","o","m"]; 

    var encodedEmail = email1.join("") + "@" + email2.join("");

    var email_link = $("#email_link");

    $("#email_link").text(encodedEmail);
    $("#email_link").attr("href","mailto:" + encodedEmail);

    });

    </script>

This is, of course, not a fool-proof solution.  Harvesters, bot makers and spammers enhance their skills  and do their own research on how to better harvest your email address.  This should just serve as your first line of defense.