Blog

Well it's about time I blogged again, so I thought I'd share a nice bit of code I wrote a while ago to get JavaScript to dynamically convert all my email addresses within a page to linked (or unlinked) proper address with the @ sign and everything.

The reason for not putting them as real email addresses in the first place is that spambots can scan through the page and retrieve emails automatically.

This is where the JavaScript comes in. Using JavaScript, we can set up an event to scan through the page once it's loaded and convert the email addresses to real, clickable email addresses. And since it's been done client-side with JavaScript, spambots won't be seeing them.

So with your emails in HTML like this:

<span class="email">mail [at] joelg [dot] co [dot] uk</span><br/>
<span class="email nolink">jgascoigne [at] hotmail [dot] com</span>

We can use this bit of JavaScript, using some MooTools features, to change them to real emails which are clickable by default and with the additional 'nolink' class become plain emails with no link.

The JavaScript looks like this:

/* convert all elements with class name 'email' to valid 
clickable email links, protected from email harvesters */

window.addEvent('domready', function() { // run the script once the page has loaded

	emailProtect();

});

function emailProtect() {
	var emailElements = $('content').getElements('.email'); // get all elements with class name 'email'
	for(i = 0; i < emailElements.length; i++) { // for each email element
		if(emailElements[i].hasClass('nolink')) {
			link=false;
		}
		else link=true;
		current = emailElements[i].innerHTML; // retrieve the innerHTML
		current = current.replace(/\[at\]/g, "@"); // convert occurences of [at] to the HTML entity for @
		current = current.replace(/\[dot\]/g, "."); // convert occurences of [dot] to the HTML entity for .
		current = current.replace(/ /g, ""); // remove spaces
		if(link) {
			emailElements[i].innerHTML = "<a href=\"mailto:" + current + "\">" + current + "</a>"; // set the innerHTML to a clickable email link
		}
		else {
			emailElements[i].innerHTML = current; // set the innerHTML to email
		}
	}
}

The end result:

mail [at] joelg [dot] co [dot] uk
jgascoigne [at] hotmail [dot] com

To use this code, simply include the above JavaScript, saved as emailprotect.js, and MooTools in the head of your page:

<script src="/js/mootools.v1.11.js" type="text/javascript"></script>
<script src="/js/emailprotect.js" type="text/javascript"></script>

If someone doesn't have JavaScript, they'll see the email in the long form. So it's completely unobtrusive, and it works well for me.

Feel free to use the code, alter it, do whatever you want. Grab the JavaScript here. Let me know if it's been useful, I'd love to hear from people.