Protect Email Addresses

Protect email addresses on your website from being harvested by spam bots and other programs roaming the internet hungry for email addresses.

Protecting Your Email Address in HTML

With all of the concern about bots crawling the web looking for email addresses, I came up with a more graceful way to get those email links people love so much. I read somewhere once that bots don't get an email out of the following text, and judging from experience, it seems to work because I don't receive spam at my email linked on this site.

  1. workwithme_at_dsmithweb.com

I like it because there are no images involved, and it's still readable even if JavaScript is disabled. Now to transform it into a link, we're going get our hands dirty and move into a little JavaScript.

First of all, here's the HTML we'll be working with:

  1. <span class="address">workwithme_at_dsmithweb.com</span>

And the JavaScript:

  1. var Convert = {
  2.   initialize: function() {
  3.     var spans = document.getElementsByTagName("span");
  4.     for (var i = 0; i < spans.length; i++) {
  5.       if(spans[i].getAttribute("class") == "address") {
  6.         string = spans[i].childNodes[0].nodeValue;
  7.         email = string.split("_")[0] + "@" + string.split("_")[2];
  8.         spans[i].innerHTML = '<a href="mailto:' + email + '">' + email + '</a>';
  9.       }
  10.     }
  11.   }
  12. }
  13. window.onload = Convert.initialize;

Navigation

Web Design Resources and Articles