Email Protection with MooTools JavaScript v2

By  on  

Earlier this week I posted an article describing how you can protect your email links from spambots using MooTools. After some suggestions, I've made some improvements to my system.

The XHTML

	
	<span rel="david|davidwalsh.name" class="email custom-class">Email me!</span>
	

I've switched to using a span tag instead of an anchor to prevent search engines from seeing dead links. We put the modified email address in the rel attribute.

The MooTools JavaScript


window.addEvent('domready', function() {
	$$('.email').each(function(el) {
		var anchor = new Element('a', {
			href: 'mailto:' + el.get('rel').replace('|','@'),
			'class': el.get('class'),
			'text': el.get('text')
		}).replaces(el);
	});
});

I create an anchor element and replace the span element that was originally there.

Thank you to everyone that shared their ideas -- we came up with a better script!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

  • By
    Retrieve Your Gmail Emails Using PHP and IMAP

    Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Just for fun, I'll be using the MooTools Fx.Accordion plugin...

Discussion

  1. This version is way cleaner, I assume I can change the pipe to any weirdo special character like &#98237980127r5981327r0981; then do the replace?

  2. neutral

    Have you tested how effective is it against spam yet?

    If it picks up any spam at all, I guess the next step would be to add in ROT13 to your approach.

  3. Internet explorer 7 doesn’t like the “,” after ‘class’: el.get(‘class’)
    That throws an error…

  4. Birke

    I tried to use this but my Browser does nothing if I click on the E-Mail me text.

  5. @Birke: Works for me.

  6. Wes

    I had to add ‘text’: el.get(‘text’) to the new anchor element to be able to show the “Email Me” text.

  7. @Wes: Good catch — updated that and compatibility with MooTools 1.3 (removed $each).

  8. Thanks! The only thing i did different was to use title instead of rel. rel isn’t valid in a span.

  9. Greetings,

    I am new to mootools and I would like to know were I put the java script code for this?

    Thanks for any help.

  10. Perhaps this might help some. For strict xhtml validation if possible use the id attribute and not rel and use a – in replace if |. Making these changes will allow proper validation on strict xhtml.

    Tim

    BTW I figured out were to put the code :)

  11. Perhaps this might help some. For strict xhtml validation if possible use the id attribute and not rel and use a – in replace of |. Making these changes will allow proper validation on strict xhtml.

    Tim

    BTW I figured out were to put the code :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!