Obscure Your Email Address From Harvesters With Javascript

This Instructable is for those with some web development knowledge who have their own websites.

Sometimes you might want to show your email address to your visitors on your website but hesitate doing so because of the numerous bots crawling the web looking for email addresses to spam. In this Instructable, I will show you a javascript technique you can use to hide your email address from these harvesters while keeping your email address in plain view to your website visitors.

The harvesters used are smart but not perfect. What they do is crawl through the web looking for text on pages that look like an email address: characters like "blahblahblah @ something . com". Whenever they detect a dot and an at symbol in the same text, they assume it to be an email address. So typing out your email address in plain HTML is not a very good idea because one of these bots will quickly store your email address in a database and often send out spam to you.

We can use javascript to confuse the harvesters as shown in the next step.

Non-Geeks who just want a working copy for their website should move on to the next step to avoid the intricacies of how the code actually works.

Harvesters are just programs written in a way to capture your email address on a webpage. We can write a very simple program to confuse them.

We must create a string of characters that will represent the letters and symbols in our email address. We could also use one for email addresses that incorporate numbers and other symbols, but for simplicity of this tutorial I will only be showing you one for very basic email addresses that have only letters:
var chars="@abcdefghijklmnopqrstuvwxyz."; // for very simple email addresses that contain only letters

Next we create a variable that will hold our actual email address that we want to output to the webpage:
var email = "peter"+chars[23]+"schlamp"+chars[0]+"gmail"+chars[27]+"com";

Every string in javascript is also an array. So if I wanted to grab a single character from my chars variable above, I could do so by referencing the index of my chars array like so chars[1], which is associated to "a". Because javascript array indexes start at the number 0, if I reference chars[0], I will get back the character "@" from the chars array. I set my chars array above in a way that if I want to reference the 1st letter of the alphabet, "a", I would call chars[1], and if I want to reference the 26th letter, "z", I would call chars[26]. So, the email variable (above) references my entire email address by chaining together real strings like "peter" and calls to my chars array.

alert(email);  // outputs my email address in an alert box

The next step will show all the code together and a way to output it on your page.

You can place the following code on your site. All you have to do is change the email variable between the lines where it says to edit.
 
<div id="email"></div>
<script>
var chars="@abcdefghijklmnopqrstuvwxyz.";
var nums="0123456789";
var symbols="-_";
// chars[0] = @
// chars[27] = .
// chars[1] = a ... chars[2] = b ... chars[3] = c ... chars[26] = z  ... get it?

// EDIT BELOW

// example: hello123@gmail.com
var email = "hel"+chars[12]+chars[15]+nums[1]+nums[2]+nums[3]+chars[0]+"gmail"+chars[27]+"com";

// EDIT ABOVE

// place your email address in the email div
document.getElementById("email").innerHTML = email; 
</script>