joshdick · May 8, 2011 05:50
diff --git a/email_obfuscation.htm b/email_obfuscation.htm

 <!DOCTYPE html>
 <!-- Created by Josh Dick <http://joshdick.net> -->
 <html>
  <head>
    <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="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  </head>
  <body>
    The following link works like a regular mailto: link when JavaScript is enabled, but uses <a href="http://www.google.com/recaptcha/mailhide" 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:
         http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared

      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.
    -->
    <a
      target="_blank"
      id="contact"
      href="http://www.google.com/recaptcha/mailhide/d?k=01RgRLgvxEUrUhAUtFCSPNRA==&amp;c=0nIRqiLvmUU-5ifT56SvMSY2hB9qsGA9T0u6dIWkHPI=">
        add<span style="display:none">obfuscation</span>ress@exam<span style="display:none">obfuscation</span>ple.com
    </a>

    <script type="text/javascript">
      $(document).ready(function(){

        //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()));

      });
    </script>

  </body>
 </html>

	<!DOCTYPE html>
	<!-- Created by Josh Dick <http://joshdick.net> -->
	<html>
	<head>
	<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="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	</head>
	<body>
	The following link works like a regular mailto: link when JavaScript is enabled, but uses <a href="http://www.google.com/recaptcha/mailhide" 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:
	http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared

	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.
	-->
	<a
	target="_blank"
	id="contact"
	href="http://www.google.com/recaptcha/mailhide/d?k=01RgRLgvxEUrUhAUtFCSPNRA==&c=0nIRqiLvmUU-5ifT56SvMSY2hB9qsGA9T0u6dIWkHPI=">
	add<span style="display:none">obfuscation</span>ress@exam<span style="display:none">obfuscation</span>ple.com
	</a>

	<script type="text/javascript">
	$(document).ready(function(){

	//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()));

	});
	</script>

	</body>
	</html>