Quick and painless Email spam protection using jQuery

11 September

Quick and painless Email spam protection using jQuery

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


$(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>');
});

Example 1

<!-- Example 1 :: Just a simple link with the class of email -->
<a href="com" id="email_one" title="email me">safer email link</a>



Example 2

<!-- Example 2 :: Inside a span with jut some simple info that will get converted to the email -->
<span>/yourname2|yourcompany2:net</span>

TAGS: Web Development, General