April 13, 2008byKevin Leary

There is a newer version of this post available called jQuery Mailto Links Plugin: Version 1.1

Recently I realized that jQuery plugins are the way to go for building re-usable, modular code snippets. As a result I have revisited the jQuery Safe Mailto’s function, building a jQuery Plugin to replace it.

Working Example

info[at]kevinleary[dot]net

XHTML seen by Spam Spiders

1

<a href="info[at]kevinleary[dot]net" rel="email">info[at]kevinleary[dot]net</a>

All instances of “[at]“ will be replaces with “@”;
Likewise, [dot] will be replaced with “.”

XHTML generated by JavaScript

1

<a href="[email protected]" rel="email" title="Email: [email protected]">[email protected]</a>

Plugin Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

jQuery.fn.safeMailTo = function() {
	return this.each(function(){
 
		var mailtoHref = $(this).attr('href');
		mailtoHref = mailtoHref.replace(mailtoHref,"mailto:" + mailtoHref);
		mailtoHref = mailtoHref.replace("[at]","@");
		mailtoHref = mailtoHref.replace("[dot]",".");
 
		var mailtoText = $(this).text();
		mailtoText = mailtoText.replace("[at]","@");
		mailtoText = mailtoText.replace("[dot]",".");
		$(this).text(mailtoText);
 
		var mailtoTitle = mailtoHref.replace("mailto:","Email: ");
		$(this).attr('title',mailtoTitle);
 
		$(this).click(function(){
			window.location.href = mailtoHref;
			return false;
		});
	});
};

Usage

  1. Include the latest version of jQuery into the HEAD section of the document.
  2. Include jquery.mailto.js into the HEAD section of the document.
  3. Add the .safeMailTo() method onto the selector you wish to modify

Example Implementation

1
2
3
4
5
6

$(document).ready(function(){
 
	// Mailto Plugin
	$("a[rel='email']").safeMailTo();
 
});

Download

Resources