A few months ago we wrote about using jQuery and AJAX to hide your email address from spam harvesters. Although very effective it can get a little confusing if managing multiple email addresses throughout your website.

A simple solution can be set up, which allows you to use just a single file containing all of your website’s email addresses and just a few lines of jQuery.

1. Create Your Email List

In a HTML document create a list of your email addresses by placing each one inside a span tag and assigning an ID – see example below:

<span id="email-1">somebody@xxxxxxxxxx.com</span>
<span id="email-2">another@xxxyyyyxxxxx.com</span>

2. Add The jQuery Code

Now in the head of your web page add the following jQuery code:

<script type="text/javascript">
$(document).ready(function() {
	$(".email").each(function() {
		var var_email = $(this).html();
		$(this).load("email_list.html #"+var_email).append(var_email);
	});
});
</script>

In our example we have called the email file – email_list.html – you will need to change the above code to match your file name.

Using the Code in Your Web Page

To use this code all you need to do is wherever you would like an email address to appear is to include a span tag with the class “email” and inside the span tag write the ID of the email address you would like to insert. From our 2 example emails above we would therefore use the following:

<span class="email">email-1</span>
<span class="email">email-2</span>

The following source code:

<p>Suspendisse quis blandit justo <span class="email">email-1</span>. In laoreet pharetra condimentum. Donec at venenatis quam <span class="email">email-2</span>.</p>

Which is how it would appear to spam harvesters, would then appear on your web page to your visitors as:

Suspendisse quis blandit justo somebody@xxxxxxxxxx.com. In laoreet pharetra condimentum. Donec at venenatis quam another@xxxyyyyxxxxx.com.

Posted on Thursday, April 15th, 2010 under Website Coding, jQuery