JavaScript Email Link Creator

This short script enables you to automatically generate email links using JavaScript so spam bots cannot pick the email addresses up. It does so by searching your HTML document for HTML tags with a special class name, and then interpreting the HTML tags’ contents as email addresses written in plain English.

It turns something like john [underscore] smith [at] pookmail [dot] com into an actual email link. Unlike many other javascript solutions, those with JavaScript turned off still see the plain English version of your email address. Not the prettiest way to display it, but you still get the information across.

How it works
Get the source code
Optimizing for performance
Final requirements
Convert an email address

How it works

First, write an email address. Change the special characters in the email address like this:

. to [dot]
@ to [at]
- to [dash]
_ to [underscore]
+ to [plus]

I usually like to add spaces around the email [tags] to assist readability. An email address like:

[email protected]

Would end up like:

john [underscore] smith [dash] jr [at] pookmail [dot] com

This is plenty readable with the human eye. It’s not the best way to display an email address, but we can pretty it up with JavaScript. The next thing we do is encase your human-readable email address with an HTML tag — any tag will suffice — and give it a special class name.

<span class="emailText">
  john [underscore] smith [dash] jr [at] pookmail [dot] com
</span>

Many times when creating an email link, it’s usefull to prepopulate the Address field of the new message when the user’s default mail program opens up. You can do this by adding special title text to the tag that contains the email address.

<span class="emailText" title="Subject: Email Me!">
  john [underscore] smith [dash] jr [at] pookmail [dot] com
</span>

The last thing you need to do is call the createEmailLinks JavaScript function. This should usually be done in the onload event:

<body onload="createEmailLinks();">

window.onload = function() {
  createEmailLinks();
};

Get the source code

/*
 Author: Greg Burghardt
 greg [underscore] burghardt [at] yahoo [dot] com
 Copyright 2007, Greg Burghardt
 
 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU Lesser General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU Lesser General Public License
 along with this program; if not, write to the Free Software
 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 
 http://www.gnu.org/licenses/lgpl.txt
 */
function createEmailLinks(src) {
  if (document.getElementsByTagName) {
    if (!src) {
      src = document;
    }
    var email = '', subject = '';
    var els = src.getElementsByTagName('*');
    for (var i=0, end=els.length; i<end; i++) {
      if (els[i].className === 'emailText') {
        email = els[i].innerHTML;
        email = email.replace(/\[underscore\]/g, '_');
        email = email.replace(/\[dot\]/g, '.');
        email = email.replace(/\[dash\]/g, '-');
        email = email.replace(/\[plus\]/g, '+');
        email = email.replace(/\[at\]/g, '@');
        email = email.replace(/ /g, '');
        if (els[i].title !== '' && els[i].title.indexOf('Subject: ') > -1) {
          subject = els[i].title;
          subject = subject.substring(subject.indexOf('Subject: ')+9, subject.length);
          els[i].title = '';
        } else {
          title = '';
        }
        els[i].innerHTML = '<a href="mailto:'+email+'?subject='+subject+'">'+email+'</a>';
      }
    }
  }
}

Try it out! If you have JavaScript enabled, the following text is an email link: john [underscore] smith [dash] jr [at] pookmail [dot] com Browsers with JavaScript disabled, or it doesn’t support JavaScript will see plain text with the email special characters encoded, but still readable to humans.

Optimizing for performance

Since this script searches the entire Document Object Model of a page, it could become slow with a larger page. You can pass a node reference to an HTML tag and the createEmailLinks() function will only search for HTML tags inside of that DOM node. Many web sites have 3 columns. Let’s say your site will only need these links in the middle column, so you can pass a reference to the DIV or TD tag that contains your middle column, and the function will only search within that tag:

window.onload = function() {
  var myColumn = document.getElementById('myDiv');
  createEmailLinks(myColumn);
};

Final requirements:

Download the source, or copy it from above. Save it as email_link_parser.js. Then link to it in your HTML file:

<script type="text/javascript" src="email_link_parser.js"></script>

Then add the createEmailLinks() function call using one of the methods described above. Lastly, encase a plain English email address in an HTML tag with it’s class set to emailText and make sure the only thing in that HTML tag is the email address.

Back to examples home

Hosted by www.Geocities.ws