badboy.media.design

As spam bots are harvesting email addresses from websites, people are trying all kinds of tricks to hide them. Most of these tricks involve writing the email address in a way that humans can understand it, but bots can’t, such as:

yourname(at)yoursite.com

While this can provide quite efficient protection, it removes an important accessibility feature: clicking it. It forces the user to understand the correct address, to copy & paste it into the mail client, and only then he can send the message. It’s a necessary evil.

What about a method that preserves the clicking capability while also hiding the address from spam bots? How can this be achieved? Simple, just by using some Javascript magic.
Spam bots cannot perform operations on the DOM tree so we can use this to our advantage. The first step is defining the place where the email address will be displayed — a div or a span can be used (probably you will wish to display it as an inline item, so the span tag seems more appropriate):

<span id="emailCloak" />

An id is required so we can easily identify the email placeholder within the page.

Let’s slow down a bit and think about the users that don’t have javascript enabled. All they will see is an empty span — that means nothing. Not good. So we’ll just have to rely on one of the old-fashioned methods described in the first paragraph:

yourname(at)yoursite.com

Now that we covered our back we can go on and start the magic. What we have to do is replace this fake email address with the real one and attach it to a mailto: link too. Here’s how:

function emailCloak() {
if (document.getElementById) {
var user = "badboy";
var website = "badboy.ro";
var newText = user+"@"+website;
placeholder = document.getElementById("emailCloak");
var oldText = placeholder.firstChild;
var a = document.createElement("a");
a.href="mailto:" mce_href="mailto:" +newText;
var address = document.createTextNode(newText);
a.appendChild(address);
placeholder.replaceChild(a,oldText);
}
}
window.onload = emailCloak;

How does it work? You set your email address in two parts, just to be sure that it is not fully spelled out anywhere, not even in the source of your javascript file. The first part is the username and the second is the server address. Assemble the full address as newText, create a link and place the email inside it. The last step is to simply replace the old text inside the declared span tag with the new link, and voila. You now have your fully readable and clickable email address without worrying about spam.

Don’t forget to load the cloaking function when your page loads and that’s it. Users with javascript enabled will benefit from this, and users without javascript will notice no change.

See the full working example here.

Update: Following suggestions that it would be nice if the script would support multiple email addresses, Octavio Heredia developed an improved version that magically works for any email address as long as it sits inside a <span class="emailCloak" /> and is written in the form of user(at)website.

See the example here.