Kevin Leary is a Web User Interface Designer and Front End Developer specializing in standards compliant XHTML, CSS and JavaScript.

jQuery Safer Mailto Links Plugin

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

Download

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="info@kevinleary.net" rel="email" title="Email: info@kevinleary.net">info@kevinleary.net</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();
 
});

Resources

  • April 13, 2008
  • Filed Under jQuery

Comments

Say something