JavaScript Email Hiding

If you plainly show an email address on a website, it’s likely to be harvested by a spam spider. To get around that problem, I’ve been using the following JavaScript in the middle of a page:


<script type="text/javascript"> <!-- This script hides the email address from spiders -->
                <!-- Begin hide from old browsers
                username = "webmaster";
                site = "ibcboston.org";
                document.write(&#39;<a href="mailto:&#39; + username + &#39;@&#39; + site + &#39;">&#39;);
                document.write(username + &#39;@&#39; + site + &#39;</a>&#39;);
                // End -->
</script><noscript><div>webmaster _at_ ilfilosofo _dot_ org</div></noscript>

 
JavaScript-enabled browsers re-assemble the email address for their users, and humans without JavaScript can figure out the address shown between the <noscript> tags. This approach is clunky: you have to repeat little JavaScripts everywhere you have an email address, XHTML validators aren’t happy to see it, and it doesn’t abstract structure and behavior. So I wrote a short JavaScript function that looks for <span>s of class “hiddenemail.” For each span that it finds with class “hiddenemail,” it puts together into a mailto: link the <span>s within it that have classes of “name,” “domain,” and “tld” (tld = “top level domain”). Everything else, such as the “_at_” or “_dot_” it just ignores: you can put anything there to confuse spiders (but inform those without JavaScript enabled). Mark up your email address like so:
<span class="hiddenemail">
<span class="name">webmaster</span> _at_ 
<span class="domain">ilfilosofo</span> _dot_ <span class="tld">com</span>
</span>
And run the function below when the page loads (e.g. window.onload = revealEmails();)


//************************************************************************
function revealEmails() { //changes hidden email names within span tags to clickable addresses
//looks for span class of &#39;hiddenemail&#39;
//    inside that class it looks for span classes of &#39;name&#39;,&#39;domain&#39;, and &#39;tld&#39;
// from http://www.ilfilosofo.com/blog/2005/06/28/javascript-email-hiding/
//************************************************************************
    var x = document.getElementsByTagName(&#39;span&#39;);
    for (var i=0;i<x.length;i++) {
        var address;
        if (x[i].className == &#39;hiddenemail&#39;) {
            var y = x[i].getElementsByTagName(&#39;span&#39;);
                for (var j=0;j<y.length;j++) {
                    if (y[j].className == &#39;name&#39;) {
                        if (y[j].innerHTML !== null)
                        address = y[j].innerHTML + &#39;@&#39;;
                    }
                    if (y[j].className == &#39;domain&#39;) {
                        if (y[j].innerHTML !== null)
                        address = address + y[j].innerHTML + &#39;.&#39;;
                    }
                    if (y[j].className == &#39;tld&#39;) {
                        if (y[j].innerHTML !== null)
                        address = address + y[j].innerHTML;
                    }
                  }
                if ((x[i].innerHTML !== null) && (address !== null))
                x[i].innerHTML = &#39;<a href=&#39;mailto:&#39; + address + &#39;&#39;>&#39; + address + &#39;</a>&#39;;
        }
    }
}

 
By the way, some such as JavaScript guru Peter-Paul Koch think that classes are for CSS, not JavaScript. What I’m doing violates the separation of style and behavior, he would say. But I don’t see that. If you can use “id” for both CSS and JavaScript, why not “class”?

One Comment

  1. Why not simply use a different email address format inside the hrefs of links and use JS to rewrite into a conventional form?

    The author has little to do other than to reformulate email addresses and the page structure and styling is not impacted at all.

    Instead of … href=”mailto:name@domain.tld” … write href=”email:domain.tld!name” and the following suffices to make the necessary transformations (it also transforms any occurreneces of the mangled email address in the link innerHTML) :

    for (var m, x = document.getElementsByTagName ("a"), i = x.length; i--;)
    if (m = x[i].href.match (/email:(.+)!(.+)/i)) {
    x[i].href = 'mailto:' + m[2] + '@' + m[1];
    x[i].innerHTML = x[i].innerHTML.replace (m[1] + "!" + m[2], m[2] + '@' + m[1]);
    }

Post a Comment

Your email is never shared. Required fields are marked *

*
*

One Trackback