Dev

Email Cloaker

Simple JavaScript ofuscation to
beat them spammy email scrappers

Fun fact – If you’re using actual email addresses on your web projects, then you will fall victim to those pesky email harvesters.

That’s just a fact of the modern web.

However, there are various steps you can take to cloak, or ‘ofuscate,’ those emails. Here’s my JavaScript-based solution that converts a written out email address, such as your [at] mom [dot] com, to an actual email address.

The JavaScript


/**
 * Email Cloaker
 * Converts a written out email address to an actual email address.
 * @author Stephen Scaff
 */
var EmailCloaker = (function() {

  // Our Selector
  var cloakedEmails = document.querySelectorAll('.js-cloak');

  /**
   * ForEach Utility
   * @author Todd Motto
   * @see https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
   */
  var forEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]); // passes back stuff we need
    }
  };
  
  return{
     
    /**
     * Init
     */
    init: function(){
      this.replacers();
    },

        
    /**
     * Replacers
     * Replaces ats and dots and builds an actual email address
     */
    replacers: function(){
      
      //console.log(cloakedEmails);
      forEach(cloakedEmails, function (index, cloakedEmail) {
        
        var finalEmail, i, ats, dots, moreDots;
        
        ats = [ ' at ', ' (at) ', ' [at] ' ];
        dots = [ ' dot ', ' (dot) ', ' [dot] ' ];
        
        finalEmail = cloakedEmail.innerHTML;

        // Replace Ats
        for ( i = 0; i < ats.length; i++ ) {
          finalEmail = finalEmail.replace(ats[i], '@');
        }
        
        // replace Dots
        for ( i = 0; i < dots.length; i++ ) {
          finalEmail = finalEmail.replace(dots[i], '.');

          moreDots = [];
          moreDots = finalEmail.split(dots[i]);
          // Got more dots?
          for ( var j = 1; j < moreDots.length; j++ ) {
            finalEmail = finalEmail.replace(dots[i], '.');
          }
        }
        
        cloakedEmail.innerHTML = finalEmail;
      });
    },
  };
 })();
EmailCloaker.init();

Usage

Any of the following will convert to actual emails:

  • your (at) mom (dot) com
  • your [at] mom [dot] com
  • your (at) mom [dot] com

Demo

See the Pen Email Cloaker by Stephen Scaff (@StephenScaff) on CodePen.

Github

Email Cloaker on Github

Read Next

Velo Slider

Read Story