Stop displaying your email in a Stupid form

First put your email in your HTML

This is what you put in HTML...

With no Javascript enabled, it will appear like this... destraynor [at] gmail [dot] com. That is useful for anyone visiting your site. It's certainly far more useful than Aidans old method of Simply remove all the lowercase letters from this address, and you'll get the real address!. In second place is Nialls infinitely more readable effort which still isn't ideal.

Bring on the Javascript

Add this javascript file to the pages that have the above email address on them...

1. <script type="text/javascript">
2. var em = document.getElementById('email');
3. var str = em.innerHTML;
4.  
5. str = str.replace( /\s+?\[(?:dot|period)]\s+?/g, '.' ); // replaces all .
6. str = str.replace( /\s+?\[(?:at)]\s+?/g, '@' ); // replaces the @
7. str = str.replace( /\s+?\[(?:dash|hyphen)]\s+?/g, '-' ); // replaces all -
8.  
9. //Create the mailto link
10. var a = document.createElement( 'a' );
11. a.setAttribute( 'href', 'mailto:'+str );
12. a.appendChild( document.createTextNode( str ) );
13. // Swap out the old skool email, replacing it with our creation.
14. em.parentNode.replaceChild( a, em );
15.  
16. </script>
17. View this file Here

And voila, you now are displaying your email address in a sane manner with a mailto link, and you aren't risking spam. So do it! If you'd like an example there is one on this very blog in the right hand column.

If you have been affected by any of the issues raised in this blog post, please have a read of "How to bluff your way into DOM Scripting". Its a pretty good introduction to proper Javascript.

Update: Aidan has since changed the manner in which he presents his email address, please follow his example