Themeforest

Using jQuery to Hide Multiple Email Addresses From Spam Harvesters

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.

8 Comments

  • Hello,
    After reviewing the code, I went out and referenced the latest release of jQuery. This helped because it now works with IE9. This solution displays the emails but I cannot utilize the link to launch the user’s mail client. I saw you have solution for this elsewhere on this site but that only applied to one address. Can the two solutions be combined somehow? Again, thanks for your help

    • Hi – using jquery load you can retrieve specific content from the target file. So to use it with multiple email addresses you can set up the file listing the emails as:

      <span id="email-1"><a href="mailto:email1@email.com">email1@email.com</a></span>
      <span id="email-2"><a href="mailto:email2@email.com">email2@email.com</a></span>
      <span id="email-3"><a href="mailto:email3@email.com">email3@email.com</a></span>
      

      Then for the jQuery use:

      $(".email").each(function() {
          var var_email = $(this).text();
          $(this).load("/email_list.htm #"+var_email);
      });
      

      and for the actual email link in your web page use:

      <span class="email">email-1</span>
      <span class="email">email-2</span>
      <span class="email">email-3</span>
      
      • Hello Lee,

        Sorry for the delay…no sooner was I knee deep into this, I was pulled away from the project for a week or two but now I’m back on. I just checked back today and saw your answer. I appreciate the time you took to look over the question – I will give it a go and report back.

      • Tested the code. Works fine! Many Thanks!

  • Thanks for posting this solution. I was looking for exactly this kind of thing since my supervisor has particular requirements for our contact page content. I tried this code out and was very happy to see it work in Safari, Chrome X and Firefox 4 …Of course, OF COURSE it DID NOT work in IE9. Please note my frustration is with the browser and not with you. Anyway, the page loads, acknowledges the two span tags (they flash on screen then disappear) but IE never parses them to display the email addresses from the related page. *SIGH* Is there an IE tweak that will fix this? Again, thank you.

  • [...] This post was mentioned on Twitter by Email Spammers. Email Spammers said: Using jQuery to Hide Multiple Email Addresses From Spam Harvesters … http://bit.ly/a6oCIe [...]

  • [...] Continued here: Using jQuery to Hide Multiple Email Addresses From Spam Harvesters … [...]

  • [...] Using jQuery t&#959 H&#1110&#1281&#1077 Multiple Email Addresses Fr&#959m Spam Harvesters « De… [...]

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags