OK, maybe title should actually be "Prevent email address harvesting with jQuery". But anyway - I came up with a technique for our company web site today which will hopefully prevent some of the email addresses that we publish being picked up by email address-harvesting bots. The idea is that an email address is put on the website using the following obfuscation:

<span class='email'>joebloggs [at] example [dot] com</span>

And then transformed by JavaScript into:

<a href='mailto:joebloggs@example.com'>joebloggs@example.com</a>

It's a progressive enhancement in that the content is still quite legible by people with JavaScript turned off. Here's the jQuery script that does it:

$(function() {
   $('.email').each(function() {
      var $email = $(this);
      var address = $email.text()
         .replace(/\s*\[at\]\s*/, '@')
         .replace(/\s*\[dot\]\s*/g, '.');
         + address +'');

I'm perhaps being naïve about how email addresses are collected these days, and maybe embedding email addresses in images is a better approach - but this was quick and simple and worth a try.


Comment by Luke

I was reading a little bit lately, and I recall seeing somewhere that putting your e-mail into the page as "foo [at] bar [dot] com" doesn't really protect you at all - Google(and I assume other search engines as well) strips out the special characters, and means that all you need to search for is "at bar dot com" to find valid e-mail addresses that users have attempted to secure using this method.

As a quick test, try searching "at gmail dot com" - you'll see that on the first page alone, there are a few e-mail addresses. If you try searching using "[at] gmail [dot] com", you'll notice that you get the exact same results - because Google strips out the special characters.

Just my two cents.

Comment by mcloide

It's a nice concept and I think it can be improved. I don't usually let emails on page, but every time that I need to do it I'm using PHPThumb to convert the email string into a image.