Hide Email with JavaScript / jQuery
Why should you hide your email address from site visitors? Don’t you want your visitors to email you?
Well, yes you do, but many webmasters make the mistake of prominently displaying there email address on each web page only to find that they are inundated with spam.
However you cannot simply remove your email address as your visitor also need a way of contacting you, so you need to consider ways to hide it from the email harvesting tools.
Many people protect their personal email by maintaining at least two email addresses: one that only friends and family have and another email address used for online orders or message boards posts. Online services (like Yahoo Mail and Hotmail) that offer free email addresses make that easy to do.
The trick is keeping the lines of communication open to human visitors, but closed to email spiders. Here are two reliable and easy methods to hide your email address using either JavaScript or jQuery. Both of them are very similar, so it is up to you which one you prefer.
jQuery method
Only additional requirement for this method is jQuery Library. If you don’t know what it is, read “What is jQuery” to find out!
At first you need to change all email addresses from usual format:
<a href="mailto:[email protected]">[email protected]</a>
to:
<span class="mailme">myemail at mydomain dot com</span>
Then put this code either in separate file (if so, don’t forget to include it in <head> section of your page) or in <head> part of your web page.
$(function(){
var spt = $('span.mailme');
var at = / at /;
var dot = / dot /g;
var addr = $(spt).text().replace(at,"@").replace(dot,".");
$(spt).after('<a href="mailto:'+addr+'" title="Send an email">'+ addr +'</a>')
.hover(function(){window.status="Send a letter!";}, function(){window.status="";});
$(spt).remove();
});
Example: myemail at mydomain dot com
If you are FireFox user and have Firebug extension installed, choose “Inspect” and put mouse pointer over the email link. You will see that <span class="mailme">myemail at mydomain dot com</span> is replaced with
<a href="mailto:[email protected]">[email protected]</a>
JavaScript method
window.onload = function() {
var at = / at /;
var dot = / dot /g;
var spans = document.getElementsByTagName("span");
var hm = spans.length;
for (c=0;c<hm;c++) {
if(spans[c].className==”mailme2″){
newcnt = spans[c].innerHTML.replace(at,”@”);
newcnt = newcnt.replace(dot,”.”);
spans[c].innerHTML = ‘<a href=”mailto:’+newcnt+’” title=”Send an email!”>’+newcnt+’</a>’;
}
}
}
Example: myemail at mydomain dot com
To avoid conflict with jQuery example above, in this example I have used another class for email span:
<span class="mailme2">myemail at mydomain dot com</span>
Tags: address, email, example, format, hide, JavaScript, jQuery, method
Related:
Posted in JavaScript, jQuery. 1,612 views
You can leave a response, or trackback from your own site.
Nice but only useful for a single email id per page.
The jquery can be modified to look for an id for each mail address to allow multiple emails per page. Mods as follows:
$(function(){
var spt = $(’span.mailme’);
…….
to this:
$(’span.mailme’).each(function(){
var spt = “#” + $(this).attr(”id”);
……
Don’t forget to add a uniqu id to each email span…..
I just created a plugin for jQuery based on this article. It handles multiple replacements without need for setting id’s. The title attributre is transferred to new element.
// markup
me at mydomain dot com
info at anotherdomain dot com
// code
$('span.email').mailme();
Hope you like it!
/Johan
http://plugins.jquery.com/project/Mailme