There are plenty of methods to obscure an email address. I used to use character code and I am pretty sure that method wouldn’t be able to stop harvester. Of course, you can add a number to the numbers to make sure it wouldn’t be too easy for harvester. Despite that, there is a slight issue with that kind of obscurity, JavaScript is required in order to reverse the obscured content back into its non-obscured form, that is the email address.

I want to use a method which displays the email address literally without needing the JavaScript, in a way, the obscured looks exactly like its original form.

1   The basic method

I came up with a new idea with the help of CSS: [ ]

<style>
.email > span:before {
  content: attr(data-value);
}
</style>
<span class='email'>
  <span data-value='livibetter'></span><span data-value='@'></span><span data-value='gmail.com'></span>
</span>

It uses :before pseudo element with data-* attribute. I use three inner span and an outer one to group them. If the harvester wants to retrieve the email address, it needs HTML and CSS parsers, a simple extraction using regular expression just wouldn’t cut it.

2   Selectable

The drawback is it’s not selectable, because the content is in pseudo elements. But it’s human-readable even JavaScript is turned off. To make it selectable, using an additional JavaScript as shown below:

$(function () {
  var $email = $('.email');
  var email = $.map($email.find('span'), function (item) {
    return $(item).attr('data-value');
  }).join('');
  $email.attr('href', 'mailto:' + email).text(email);
});

<a class='email' href='#'>
  <span data-value='livibetter'></span><span data-value='@'></span><span data-value='gmail.com'></span>
</a>

Now, it’s a link with the selectable text: [ ]

3   Thought of email address obscurity

I don’t really think there still is a need to obscure email address because plenty of websites can leak your email address if they use commonly known methods. Once in a while, without counting dozens of daily spams, I would receive some emails from start-up websites regarding software or open sources. This is why I don’t think obscuring can be much of a help anymore. Furthermore, I would guess nine out of ten, username + @gmail.com will be a valid address.