Auto Generate Spam-Safe Email Links Using Javascript

Back in 2007 Greg Burghardt published an article on the now-defunct Geocities featuring an extremely creative way to automatically generate email links while keeping your actual email address hidden from spam bots/crawlers. In fear that this function would get lost I have decided to republish it here on the Rapid Purple blog.

First off – some understanding on how this works. Greg’s function allows you to type out your email address using works to replace any special characters. For example [email protected] would be written as some [dot] email [at] rapidpurple [dot] com.

Here is the full code legend:

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

Greg’s script will automatically convert this into a working email link – however in order to properly tell Javascript where to look for this coded text, you will need to enclose your coded email with the emailText class, like so:

 mike [at] rapidpurple [dot] com

Now, you will need the actual Javascript function that does all the work.

/*
 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 -1) {
          subject = els[i].title;
          subject = subject.substring(subject.indexOf('Subject: ')+9, subject.length);
          els[i].title = '';
        } else {
          title = '';
        }
        els[i].innerHTML = ''+email+'';
      }
    }
  }
}

Finally you need to run the newly created createEmailLinks(); function once the page loads. The easiest way to do so is by adding an onLoad argument to your opening tag:

Now put everything together and you have a spam-bot safe and fully functional email link. Furthermore browsers that have Javascript turned off will simply see plain text with the email special characters encoded – something that’s generally readable by everyone.

Check out the fully functional demo on Codepen.

If you find that this function is taking way too long to run – since it is scanning the ENTIRE DOM of a page – there’s a solution to that. 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);
};

So there you have it! A simple Javascript function to keep all the emails on your website safe & secure from spam bots & crawlers.