Quick Tip: Hide Email Address With jQuery

  • follow us in feedly
Published October 4, 2013 by Brad Knutson
Hide Email Address with jQuery

If you’ve blogged before, or ran your own website, I can all but guarantee that at some point you put your email address out there for the world to see. You didn’t think much of it at the time, but later on when you started getting spam emails you wondered how these people found your email address.

The answer is that more than likely “someone” didn’t find your email, but “something” did. Bots, to be precise. Clever programmers have written bots that crawl the internet and scrape unsuspecting individuals email addresses.

Even if you’re not a programmer, you probably understand that it’s not that difficult for a bot to scrape a website and find an email address. They always follow a format – name @ domain . com (or some other TLD). In the programming world, this is what we call a Regular Expression, or regex. Typically, you’ll see your email appear in the HTML like so:

<a href="mailto:brad.s.knutson@gmail.com">brad.s.knutson@gmail.com</a>

So how can we prevent this from happening? We have to disrupt the pattern! What if our email address looked like this in the HTML:

<a class="hide-email" href="#">Please enable Javascript to view</a>

Our old nemesis the bot wouldn’t be able to scrape our email address. But how do we get the email address to show up for users, so it’s transparent for real people and only difficult to interpret for bots?

This is where our old friend jQuery comes in.

The jQuery

First, let’s make sure that we have jQuery added to our web page. If you don’t, add this in the head section of your webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Next, let’s write some jQuery to that will grab our a tag and replace the href and anchor text dynamically.

$(document).ready(function() {
	var e = "brad.s.knutson"; // replace with your email username
	var t = "gmail"; // replace with your email provider
	var n = ".com"; // replace with your email provider TLD
	var r = 'mailto:' + e + '@' + t + n;

That should do it! The end result will be transparent to the average user (who will have Javascript enabled) but will make it extremely difficult for bots to scrape (generally speaking are server scripts that don’t render Javascript).

I bet you wish you had implemented this from day one, right? Could have probably spared you from many spam emails!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

5 thoughts on “Quick Tip: Hide Email Address With jQuery

  1. clydde

    the ” $(‘#hide-email).attr(‘href’,r).html(r); ” line is not correct.

    $(‘.hide-email’).attr(‘href’,r).html(r); <<< is correct

  2. clydde

    and the visible link is mailto:aa@bb.com, to ofuscate “mailto:” try this:

    $(document).ready(function() {
    var x = “name”;
    var y = “domaine”;
    var z = “.com”;
    var r = ‘ ‘ + x + ‘@’ + y + z;
    $(‘.hide-email’).attr(‘href’,’ mailto:’ +r).html(r);


Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">