Home Utilities Javascript Email Address Protection

Using jQuery

Use jQuery to protect your email addresses from being harvested off your website by spammers. Most automated email leeching programs scan your webpage source code searching for MAILTO tags and properly formatted email addresses. By generating your email address with javascript after the page has loaded, these programs aren't able to easily identify and collect your email addresses.

Add the following jQuery: 
<script>
function createMailtoLinks(){
	$('A[data-u][href=""]').each(function(){
		var i = $(this);
		i.attr('href', 'mai'+'lto:'+i.data('u')+'@'+i.data('d'));
		if (i.html()==''){ i.html(i.data('u')+'@'+i.data('d')); }
	});
}
$(function(){
	createMailtoLinks();
});
</script>

NOTE: The reason I have it as a function is so that I can reuse it on ajax-loaded data.

Then protect your email address by calling it by using this syntax: 
<-- use your own anchor text -->
<a href="" data-u="username" data-d="domain.com">anchor text</a>

<-- leave anchor text blank to auto-generate -->
<a href="" data-u="username" data-d="domain.com"></a>

This results in regular "empty" AHREF tags. If javascript is enabled, the MAILTO links are generated.

anchor text

username@domain.com

 

 

Inline document.write method (deprecated)

Note: This is the code I wrote back in 2008, but is uses document.write, but it became problematic with other javascript libraries as well as sacrificed performance.

Use javascript to protect your email addresses from being harvested off your website by spammers. Most automated email leeching programs scan your webpage source code searching for MAILTO tags and properly formatted email addresses. By displaying your email address with javascript, these programs aren't able to easily identify and collect your email address.

Add the following javascript to your page: 
<script>
function DisplayMail(Server, Login, Display){
	if ((Display.length == 0) || (Display.indexOf('@')+1)) {
	document.write('<a href=' + '"mai' + 'lto:' + Login + '@' + Server + '">' + Login + '@' + Server + '<\/a>'); }
	else  {
	document.write('<a href=' + '"mai' + 'lto:' + Login + '@' + Server + '">' + Display + '<\/a>'); }
}
Then protect your email address by calling it by using this syntax: 
DisplayMail('domain.com', 'username', 'display text')

Leave the "display text" field empty and the script will display the email address. Here are a couple of examples:

Email address only: ( ) 
<script>
DisplayMail('domain.com', 'username', '');
</script>
Email address with display text ( ) 
<script>
DisplayMail('domain.com', 'username', 'Send Email');
</script>
Email address with HTML non-text anchor ( ) 
<script>
DisplayMail('domain.com', 'username', ' Send Email');
</script>
Email address with display text and pre-populated subject (Alternate display text is required) ( ) 
<script>
DisplayMail('domain.com?Subject=Website+response', 'username', 'Send Email');
</script>

Additional Note: I also have this available as a ColdFusion UDF (User-Defined Function) that allows email addresses to be protected by simply coding EmailProtect("username@domain.com",""). Write me at and let me know if you are interested in the source.

Another good technique can be found at:
http://www.dynamicdrive.com/emailriddler/