Disguising Email Addresses On A Web Page

By Andrew Westcott

-- Links to other pages I've written --
Home Page Radio Stuff Concert Master Coxparo Gin Traps Grimspound Rust Electrolysis National Explosives Solar Hot Water Wistmans Wood Doddi Mines Rants Dog Walker Zombies! JS Email Telephone Intercom Whetstone Mining

The Problem

When building web pages, there's a chance you may wish to include an e-mail address somewhere as a point of contact. Unfortunately there are bots roaming the Internet designed to harvest useful data such as e-mail addresses and phone numbers, along with any other tasty snippets which may come in useful, usually to be sold to unscrupulous marketing companies. It won't be very long before any potentially useful data has been harvested from your web page, from which point your inbox will begin to fill with unwanted messages, the sheer quantity possibly rendering it unusable after a time.

As you've landed here, I'm assuming that you have some knowledge of HTML code and CSS; I hope you write the code for your web pages yourself rather than letting some software do it badly for you. If not, why not? People capable of writing HTML seem to be a dying breed, with the resultant massive influx of hugely-bloated software-generated web pages in recent times, filled with useless and redundant code. HTML is pretty easy to learn, so apart from laziness, there is no excuse.

I sometimes get emailed by various 'web design' businesses who claim to be able to improve my Google ranking or the look of my site; if I'm feeling a little antagonistic, I'll ask for examples of their work, and report back to them exactly what I think of it, which is never good. OK, the code I write for my web pages is basic, but they work, load fast and pass W3C markup validation, more than can be said for the junk spewed forth by these so-called professionals.

Thankyou for listening; I feel better now. 🙂

A Solution

One very effective remedy to the e-mail harvesting problem is to break up the components of your e-mail address into unrecognisable portions, and use JavaScript to re-assemble those bits in the correct order, to make it viewable and clickable in the final rendered version of your web page, while being invisible to harvester bots.

This approach is pretty old, and an internet search will probably pull up hundreds of slightly different ways of doing this. Some methods are too simple and may be solved by modern bots, and others are perhaps unnecessarily complicated. Here I'll describe the method I've used for over 20 years which gives excellent protection whilst being reasonably simple.

Declaring Some Variables

Let's get one thing straight: I don't like JavaScript; It's not so much a problem with the code, more to do with the way it gets abused in the writing of web pages. One site I examined consisted of 2 images, 3 paragraphs of text and a navigation bar. The JavaScript alone on that page amounted to an unbelievable 240Kb of code, apparently doing very little. It had obviously been auto-generated by some software, but it was a heck of a mess, and it took many seconds to fully load the page, the various parts jumping around as it did so.

Anyway, moving on.
I'm not a JavaScript programmer, but I know enough about it to be able to put together a snippet of code to do what I want, and here's how I disguise my e-mail address:

We first need to take our e-mail address and break it up into pieces which individually cannot be harvested as a meaningful e-mail link. By way of example, here is the fake e-mail address joeblogs@nomail.com broken down into 4 bits:

    joe
    blogs
    @
    nomail.com

Those individual bits won't be recognised by harvester bots as anything useful, so can be safely put into a web page.

So what do we do with those bits? The first concept to understand is that a letter, X for example, can be assigned a numeric value, say 5. In code, the X would be considered the 'variable', and the value assigned to it would be the 'value' hence in this case X = 5.

In JavaScript, a variable can be assigned either a number, a 'string' of characters, such as a word, or a combination of the two. The name of the variable can be 'X', 'm2' or pretty much anything else, as long as it begins with a letter.

To start building our code, we need to declare some variables containing those bits of e-mail address. The 'var' in the code below indicates a variable is being declared, and the m1, m2, m3 & m4 are the names I've chosen to give to those 4 variables; the names given to the variables can be anything you like, as long as they begin with a letter, and isn't one of the few reserved JavaScript words. The text string (the value) is in double quotes, and each line of code must end in a semicolon, it's the law! So once done, your browser will know that m2 (for example) equals the text string blogs.

    <script>
    var m1="joe";
    var m2="blogs";
    var m3="@";
    var m4="nomail.com";
    </script>

Any bit of JavaScript must be enclosed in opening <script> and closing </script> tags, as you'll see in each of the code examples.

It's worth a mention that I'm suggesting 'var' here, rather than the more modern 'let' and 'const' to ensure that any pre-2015 browsers will recognise the code. Maybe in a few years it can be dispensed with, but not just yet.

In the example above, you can see the 4 variables, and the text string assigned to each one. Depending who you talk to, putting all the variables on one line may be more efficient, as all variables are processed at once. The example below is of the 4 variables being declared on one line if that's what you wish to do:

    <script>
    var m3="@", m1="joe", m4="nomail.com", m2="blogs";
    </script>

Note that the var statement is only written at the start of the line, each declaration is separated by a coma, and the end of the line is indicated by the semicolon as always required. Other than the slight changes, the declaration of variables is the same, but the code is tidier.

The more astute amongst you may have noticed that in the one-line declaration example above, the variables aren't being declared in order, but are jumbled around a bit. This is optional, but I do it to ensure that the e-mail address doesn't exist in a linear manner, where stripping out code could reveal the true address. There's no way a bot could get that information in this case; @joenomail.comblogs isn't going to offer up any meaningful data.

Now we have the declaration of variables sorted out, we can place that bit of code safely out of the way within the HTML <head> </head> tags. When the browser loads the page, those variables will be declared, held in memory and can then be called unlimited times within the web page code.

Reassembling The Email Address

Here's where the code appears to get a little more complicated, but it follows a logical progression and I'll explain everything anyway. The image below shows the JavaScript code for reassembling the variables declared earlier plus some text strings, which together produce the final e-mail link. This code is placed at the location you wish the clickable e-mail link to appear, and as often as you wish.

    <p>E-mail me:<br>
    <script>
    document.write
    {'<a href="mailto:' +m1+m2+m3+m4 +'">' +m1+m2+m3+m4 +'</a>'};
    </script>
    </p>

    <noscript>
    <p>E-mail address hidden by JavaScript</p>
    </noscript>

The code has been enclosed within <p> </p> tags to enable styling using a class definer of your choice, and consists of a mixture of our previously declared variables, plus some other parts we didn't need to assign variables to, for example the entire <a href="mailto: string was left as-is. A spam bot might get a bit excited about this, but won't be able to get anything from it, apart from the digital equivalent of a headache.

Variables are just added in the code as they are by prefixing them with a + sign, but each text string must be defined by being put in single or double quotes; while either is acceptable, care must be taken to stick to just one or the other. As a double quote appears in the first and second text strings, single quotes have been used in this case to avoid breaking the code.

Lastly we have the <noscript> tag. It is good practice to provide an alternative to JavaScript in the event that the end user has disabled JavaScript in his browser, as this way he will at least see something. I make the assumption that these days, if JavaScript is disabled, it's been done on purpose by a web-savvy person so nothing more than a quick alert is necessary.

As a point of interest, the closing </a> tag, for example, may be picked up by the W3C HTML Markup Validation Service as an error. If you wish to get around this minor issue, the bit of problematic code can be broken apart too; the snippet below shows it broken into 2 parts which gets around the issue nicely, as the Validation Service simply sees the </ and a> bits and no longer sees it as an orphaned </a> tag. This solution can be applied to any bits of HTML code which cause problems with validation.

+'</' +'a>'

So, in a nutshell, the code writes the <a href="mailto: part and adds the text contained in the variables we declared earlier along with a couple of other text strings. If you examine it carefully, you'll see how it all logically comes together when the page is rendered: a nice, clickable e-mail address:

<a href="mailto:joeblogs@nomail.com">joeblogs@nomail.com</a>

I can be contacted at this address:

Copyright © Andrew Westcott 2003 - 2025
I'm happy for anyone to use this material for private, non-commercial or educational purposes, but credit to the author must be given. For any other use please contact me for permission.

No cookies. No AI text. No ads. No tracking. Ever.