jQuery Mailto Links Plugin: Version 1.1 ☆ kevinleary.net

jQuery Mailto Links Plugin: Version 1.1

Posted in jQuery by kevin on September 9, 2008

Another revised edition of the jQuery Mailto Plugin has arrived. This one includes in the following updates:

REGEX replacement
Updated status message
Simplified usage using a class rather than the rel attribute to target mailto: links.
Leaner code

Download

XHTML

1	<a href="info(at)kevinleary.net" class="email">info(at)kevinleary.net</a>

JavaScript / jQuery Plugin

jQuery.fn.mailto = function() {
	return this.each(function(){
		var email = $(this).html().replace(/\s*\(.+\)\s*/, "@");
		$(this).before('<a href="mailto:' + email + '" rel="nofollow" title="Email ' + email + '">' + email + '</a>').remove();
	});
};

Simple Usage

1	$('.email').mailto();

Above is the easiest way to setup this plugin. Of course, I prefer to add a little more logic to make things more intuitive.

Advanced Usage

if ($('a.email').length > 0){
	$.getScript('/path/to/jquery.mailto.js',function(){ 
		$('a.email').mailto();
	});
}

What this does is first check to see if there are any anchor links in the document that have a class of “email”. If there are, we’ll load in the jquery.mailto.js file, and run a function once it has been loaded. This function (or callback) runs the mailto() method on all email anchors.

Why use REGEX in this version?

I’ve used REGEX in place of replace() for this version because it renders the browser message to display emails correctly. With my previous versions some users could see “you[at]domain[dot]com” in the bottom left message of their browsers. REGEX takes care of this little mishap and displays the rendered email address.