It’s very common on websites today to find some method of “cloaking” your email address to protect it from spam bots and email scrapers. Some use images (a la Facebook, some (like my friend Rob) encrypt their email address to protect from spam bots, and yet others spell out the syntax.
While talking with my friend Rob, we wanted to write a quick unobtrusive jQuery snippet to grab all email address on a page with their syntax spelled out, and convert them back to proper email syntax (and even turn them into mailto: links.
So, we did:
$(".email").each(function(){
var ats, dots, address, i;
ats = [' (at) '];
dots = [' (dot) '];
address = $(this).html();
for ( i = 0; i < ats.length; i++ ) {
address = address.replace(ats[i], '@');
}
for ( i = 0; i < dots.length; i++ ) {
address = address.replace(dots[i], '.');
}
$(this).html('<a href="mailto:' + address + '">' + address + '</a>');
});
Check out a very basic example.
Make sure you’re wrapping the obscured email address in a <span/> element with a class name of email – then drop this snippet inside your $(document).ready() function. ¡Viola!
Some additional notes/caveats:
ats and dots are JSON arrays. This allows you to add multiple versions of syntax spelling (i.e. ” at “, ” [at] “, ” at “, etc.)email class can be assigned to any element in your HTML/XHTML document.
innerHTML of the nodes with the email class assigned will be replaced, so choose wisely. <span/>‘s come in handy here.
RSS feed for comments on this post. TrackBack URL
Jeffrey Herr says…
Thanks for the nudge. It was easy enough, but I guess I just wanted someone to do it for me! I used this approach on a SquareSpace website. Works great, and is flexible enough for me to choose my own obfuscation patterns to further thwart spammers… Appreciate it!
andy says…
That’s great! I’m glad it was helpful, thanks for sharing, too!
Beny says…
Useful. Thanx!
Andy says…
It’s been a year and a half, I tested the code and found out it doesn’t work with newer versions of jQuery, like 1.3.2 or 1.4.2. Spent a few hours to find a problem, but failed – would be great if you could rewrite it.
Thanks anyway, it worked for me for some time.
andy says…
@Andy I just updated the example to use 1.4.2 and it’s working well:
https://theandystratton.com/examples/email-conversion.html
George says…
Hi andy,
I use this script alot, but noticed it doesn’t work with email addresses with more than 1 dot. I’ve improvised.
$(".emailCloak").each(function(){
var ats, dots, address, i, foundDots;
ats = [ ' at ', ' (at) ', ' [at] ' ];
dots = [ ' dot ', ' (dot) ', ' [dot] ' ];
address = $(this).html();
for ( i = 0; i < ats.length; i++ ) {
address = address.replace(ats[i], '@');
}
for ( i = 0; i < dots.length; i++ ) {
foundDots = [];
foundDots = address.split(dots[i]);
for(var j=1; j<foundDots.length; j++) {
address = address.replace(dots[i], '.');
}
}
$(this).html('' + address + '');
});
(ps. this probably could have been done with a regex /g function, but I’m no good with regex).
andy says…
George, good call, thanks! I’ll take a look next chance I get!
Shane says…
Hey,
I’m really interested in using this on my squarespace blog… I’ve put the following in the “Extra Header Code” code injection point, but I get this error message: “Could not parse your site header code. Are you inserting invalid XML? Error: Error on line 12 of document : The content of elements must consist of well-formed character data or markup. Nested exception: The content of elements must consist of well-formed character data or markup.”
Can anyone help?
$(document).ready(function(){
$(“.email”).each(function(){
var ats, dots, address, i;
ats = [ ‘ at ‘, ‘ (at) ‘, ‘ [at] ‘ ];
dots = [ ‘ dot ‘, ‘ (dot) ‘, ‘ [dot] ‘ ];
address = $(this).html();
for ( i = 0; i < ats.length; i++ ) {
address = address.replace(ats[i], '@');
}
for ( i = 0; i < dots.length; i++ ) {
address = address.replace(dots[i], '.');
}
$(this).html('‘ + address + ‘‘);
});
});
Regards,
Shane.