1. easy to implement
2. effective
3. linked
4. selectable text
I found a blog where this guy put nine different obfuscation methods on one web page, and let it sit for a year and a half. This graph shows the effectiveness of each method. Using all of this data, I decided Javascript was the way I wanted to go. For extra simplicity, I went with jQuery
<a class="obfuscate">example<span class="replaceAt">-AT-</span>gmail.com</a>
<script type="text/javascript" charset="utf-8">
$(".replaceAt").replaceWith("@");
$(".obfuscate").attr("href", "mailto:"+$('.obfuscate').text());
</script>
The first line replaces the whole .replaceAt span (including tags) with an @, then the second line takes the constructed e-mail and sticks it into the href of the <a>. Those without Javascript installed will see example-AT-gmail.com.
2 comments:
This is a great concept. What do I do for more than one email address on a page, though? How can I tell jquery to only get the contents for the current .obfuscate instead of stringing them all together?
Thanks for the elegant solution!
As I've learned a little more about jquery I've been able to answer my own question. If you have more than one of these on a page, use this improved code instead:
//Email Obfuscation
$(".replaceAt").replaceWith("@"); $(".obfuscate").each(function () { $(this).attr("href", "mailto:"+$(this).text()); });
Post a Comment