mangleEmail()

I've written a Javascript function that transparently hides your e-mail address from spambots—provided that spambots don't execute Javascript. It doesn't impact the end user in most cases.

The Code

You'll probably need to scroll horizontally in order to see long lines in their entirety. If so, a scroll bar will be at the bottom of the code block.

function mangleEmail() {
  if(!document.getElementsByTagName) return; //be nice to old browsers

  //find out where we need to make replacements
  var mangleLocations = document.getElementsByTagName("span");
  var whichClass = "mangle-email"; //this class tells us where to add links
  var whichClassStrike = "mangle-email-strike"; //strikethrough class

  //e-mail address to mangle
  var part1 = '<a href=\"mai';
  var part2 = 'lto:';
  var part3 = 'username';
  var part4 = '@';
  var part5 = 'domain.com';
  var part6 = '\">';
  var part7 = '</a>';

  //loop through all <span>s
  for(var i = 0; i < mangleLocations.length; i++) {

    //find struck text
    if(mangleLocations[i].className == whichClassStrike) {
      mangleLocations[i].className = whichClass;
      mangleLocations[i].title = "";
    }

    //add the link
    if(mangleLocations[i].className == whichClass) {
      var mailtoText = mangleLocations[i].innerHTML;
      mangleLocations[i].innerHTML = part1 + part2 + part3 + part4 + part5 + part6 + mailtoText + part7;
    }
  }
}

Explanation (or, skip to the usage instructions)

My method of explaning this function is shamelessly copied from quirksmode.org. I'll procede section-by-section, repeating the relevant section, then putting the explanation below it.

function mangleEmail() {
  if(!document.getElementsByTagName) return; //be nice to old browsers

To begin with, we test to find out if the browser supports the key method. If it doesn't, the function ends, sparing us from Javascript error messages.

var mangleLocations = document.getElementsByTagName("span");
var whichClass = "mangle-email"; //this class tells us where to add links
var whichClassStrike = "mangle-email-strike"; //strikethrough class

//e-mail address to mangle
var part1 = '<a href=\"mai';
var part2 = 'lto:';
var part3 = 'username';
var part4 = '@';
var part5 = 'domain.com';
var part6 = '\">';
var part7 = '</a>';

Now we set up our variables. mangleLocations is an array containing all <span> elements in the document. The next variables, whichClass and whichClassStrike contain the stylesheet classes that will tell us which <span>s to add links to.

Be sure to set part3 to your e-mail address username and part5 to your e-mail domain. The purpose for these variables is to break up your e-mail address so that spambots won't recognize it as such. Of course, this depends on the assumption that spambots don't use execute Javascript. I'm sure that they don't.

//loop through all <span>s
for(var i = 0; i < mangleLocations.length; i++) {

Here's where the action begins. We'll loop through our array of <span> elements and consider them one by one.

//find struck text
if(mangleLocations[i].className == whichClassStrike) {
  mangleLocations[i].className = whichClass;
  mangleLocations[i].title = "";
}

First, we check for the class that whichClassStrike refers to. This class contains formatting that non-Javascript users will see if you need to point out that the code isn't working. I use a strikethrough. Since we know that Javascript works if we've gotten this far, we need to cancel this formatting, so we change the class to the one that whichClass points to. This class, im my implementation, doesn't have any style rules attached to it.

<span> elements that match whichClassStrike might also have an optional explanation as a title attribute. We set title to an empty string to hide it.

//add the link
if(mangleLocations[i].className == whichClass) {
  var mailtoText = mangleLocations[i].innerHTML;
  mangleLocations[i].innerHTML = part1 + part2 + part3 + part4 + part5 + part6 + mailtoText + part7;
}

Now, we store the text contained by every <span class="mangle-email"> in a temporary variable and construct our link around it.

How to Use this Function

Preparation

Put mangleEmail() either in an external Javascript file or within <script></script> tags in the <head> section of your HTML file and call it onload. I do the following, at the top of my Javascript file:

window.onload = init;

function init() {
  mangleEmail();
  //other functions to call onload go here
}

If you plan on using the strikethrough form, be sure to use some appropriate CSS code. I use:

span.mangle-email-strike {
  text-decoration:line-through;
  cursor:help;
}

Simple Form

To use this script in its simplest form, simply enclose the text you want to be linked in <span class="mangle-email">. If your browser supports mangleEmail(), this sentence should be a link to my e-mail address; otherwise, it will show up as normal text. You might want to toggle Javascript on and off in your browser to observe the effect.

Strikethrough Form

There might occasionally be a situation where the user would likely be confused by a not having a link if the function doesn't work—if the user has Javascript disabled or they're using a very old browser. For example, you might have a list of links, including using mangleEmail() to make a link labeled "E-mail me." The answer is to use <span class="mangle-email-strike">. Here's an example: If your browser supports mangleEmail(), this sentence should be a link to my e-mail address (without a tooltip); otherwise, it will show up as struckthrough text with—in most browsers—a tooltip explaining the problem. Again, the best way to understand this is to toggle Javascript on and off and observe the effect.