HTML-Advisor
Mostly practical advices

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:myemail@mydomain.com">myemail@mydomain.com</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:myemail@mydomain.com">myemail@mydomain.com</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: , , , , , , ,

Related:

Posted in JavaScript, jQuery. 1,612 views
You can leave a response, or trackback from your own site.

2 Comments

Leave a comment

Note for spammers! Don't waste your time - all comments being moderated!