Skip to content

Instantly share code, notes, and snippets.

Created May 8, 2011 05:50
Show Gist options
  • Save joshdick/961154 to your computer and use it in GitHub Desktop.
Save joshdick/961154 to your computer and use it in GitHub Desktop.
Elegant E-Mail Address Obfuscation
<!DOCTYPE html>
<!-- Created by Josh Dick <> -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<title>Elegant E-Mail Address Obfuscation</title>
<script type="text/javascript" src=""></script>
The following link works like a regular mailto: link when JavaScript is enabled, but uses <a href="" target="_blank">reCAPTCHA Mailhide</a> as a fallback:
1) Obfuscate the e-mail address that appears on the page by adding garbage-filled, invisible <span>s inside the e-mail address.
This is an effective method of hiding an e-mail address from spam bots/harvesters; see here:
2) Use a reCAPTCHA Mailhide URL as a fallback destination if JavaScript is disabled; the user will eventually see a mailto: link after passing a CAPTCHA.
add<span style="display:none">obfuscation</span>ress@exam<span style="display:none">obfuscation</span>
<script type="text/javascript">
//First, remove the invisible <span>s from the link - now the plain-text e-mail address is in the DOM
$("#contact span").remove();
//Next, set the link's href attribute to be 'mailto:' plus the link text (the plain-text e-mail address from the previous step.)
//BAM--instant simple mailto: link, except spam bots can't harvest it.
$("#contact").attr("href", "mailto:" + $.trim($("#contact").text()));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment