Home > Tutorials > HTML/CSS/JS Tutorials > Auto Generate Spam-Safe Email Links Using Javascript

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:

<span class="emailText" title="Subject: My Subject">
 mike [at] rapidpurple [dot] com
</span>

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<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>';
      }
    }
  }
}

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:

<body onload="createEmailLinks();">

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.

About Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Check Also

How To Populate A DIV via an HTML SelectBox, PDO, and jQuery

Imagine you have a database full of information, and you want to let users browse ...

Like every other website, this site uses cookies to analyze our traffic. Cookies may also be utilized by our advertisers and partners. By using this website you agree to the use of said cookies. More Information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings, continuing to navigate past this message, or you click "Accept" below then you are consenting to the use of cookies on the Rapid Purple website.

Close