I used to scramble email addresses embedded into web pages so the spam harvesters wouldn’t snag them by searching the source code for the mailto: tag. Then I came across this great and simple way of using JQuery’s Ajax functionality to do the trick.

Basically the concept is to summon the email address using an Ajax function so that it displays in the specified location on your web page. The email address itself is kept in a separate file. Therefore it’s not part of the source code that the spambots cruise through to snag email addresses. Here’s how it works:

First Step: The External File

This step is simple. Create an HTML page with only one item in the body section… the email address! That’s going to look like this:

mailto:email@mydomain.com

Step Two: The JQuery Code

This is also simple since it’s one function. Here’s the JQuery code:

Let’s explain a little on how this is going to work within your page. The element we’re looking for in your target web page is the item with the .email class name. Once JQuery locates that it’s going to load the content in the parentheses which in this case is our external file that we named email_address.htm (code posted above). Essentially JQuery, as soon as the document is ready, finds the .email class item and loads that content into it. The location where this will be inserted can be located anywhere on your page. Here’s the HTML tag you will need for that to happen:

Step Three: The Target HTML

This is very simple. Place this tag where you want the email address to display:

JQuery will insert the email file between those two span tags and keep it out of the hands of those nasty spammers