Quick and painless Email spam protection using jQuery

Posted on Sep 11, 2008 by Rich to Web Development

I recently went to one of my favorite blogs and saw that the author had posted up a neat little trick to help prevent spammers and bots from crawling your site to gain those oh so valuable emails and begin to send you and everyone else who has an email on your site – spam. It’s a spammy spam world of emails and we as programmers need to try to prevent this.

We all know some clients want their emails on their websites.

Our scenario scene begins in the middle of an email conversation:

> Open scene

Us: “What about a contact form?”

Client: “No. I want people to be able to click on it and open up outlook.”

Us: “But some users may not have outlook. what if the user users gmail for example?”

Client: “Well I just want my email on there.” “well then ok.”

> End scene

So although we would try to persuade our clients not to list e-mails on the site, the old saying goes, “the client is always right.”

Well maybe with this little script, we can possibly come to an arrangement and help prevent this spamtrocity (Yes, I just made this word up) from occurring. I used jQuery to do the magic and I offered two different pieces, because to be honest, I just wanted to.

See it live

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// First type see comment for example #1
el = $('#email_one');
el.each(function(){
el.attr('href','mailto:' + el.attr('href').replace('|','@').replace('/','').replace(':','.'));
el.attr('title',el.attr('href').replace('|','@').replace('/','').replace(':','.').replace('mailto.','Email: '));
});
// Second type see comment for example #2
$('#email_two').html('<a href="mailto:'+$('#email_two').html().replace('|','@').replace('/','').replace(':','.')+'" title="Email: '+$('#email_two').html().replace('|','@').replace('/','')+'">'+$('#email_two').html().replace('|','[at]').replace('/','')+'</a>');
});
</script>
</head>
<body>
<p>Example 1</p>
<!-- Example 1 :: Just a simple link with the class of email -->
<a href="/yourname|yourcompany:com" id="email_one" title="email me">safer email link</a>
<br/><br/><br/>
<p>Example 2</p>
<!-- Example 2 :: Inside a span with jut some simple info that will get converted to the email -->
<span id="email_two">/yourname2|yourcompany2:net</span>
</body>
</html>

Tags: jQuery, jQuery examples, jQuery HTML, jQuery tutorial, spam

2 Responses to "Quick and painless Email spam protection using jQuery"

Comment By: selkblog

May 31st, 2010 at 12:02 am

we possess to b concious active it:), Good to see more people writing about jquery spam protection.

Comment By: manu

January 19th, 2012 at 7:33 pm

Thanks for sharing that useful bit of code!
I think you are a bit harsh on your client, I can see some valid arguments for having true email links instead of (or in addition to) contact forms:
- The sender can keep a record of what he has sent (as well as the date), so he can verify easily when he made contact.
- In the case of a technical delivery issue, a regular email system will return a report, so you can know that the message didn’t get through.
So I think it’s a matter of good netiquette for a company to provide a plain contact email address.