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 https://austinmatzko.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

Hans PUFAL wrote on April 17, 2008 at 10:32 pm

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]); }

One Trackback

Il Filosofo » New WordPress Plugin: Hide Emails from Spambots on August 11, 2006 at 10:57 am

[…] Over a year ago I showed how I like to hide email addresses using JavaScript. A recent project made it convenient to wrap that into a WordPress plugin. […]

Austin Matzko's Blog

One Comment

Post a Comment

One Trackback