jQuery Plugin to Trick Bots from Stealing Email Address

Back in December, I posted a simple jQuery script to trick bots from stealing email addresses. Assuming the bots don’t understand JavaScript. Anyhow, you can read more about that post here. I wanted to convert it to a plugin back then, but didn’t really want to take the time to research how to do it since I was really just starting to play with MVC or I’m just lazy, which ever you believe :)

Anyhow, at the SHDNUG last night, Kevin Lee talked about writing a jQuery plugin and went through the steps to do so among other things. It’s crazy easy! Thanks Kevin for pointing it out!

So, I didn’t remember the exact syntax from Kevin’s presentation, so I googled and went to the first post, which turned out to be jMar’s blog. His example is really good, but I think it’s hard to read for people new to jQuery. I like the code to be a little easier to read on my posts.

Okay…let’s get to the meat!

Step 1: Create Plugin Structure

(function($) {
    $.fn.decodeEmail = function() {
        return this.each(function() {
        });
    };
})(jQuery);

This is all you need to create a jQuery plugin. As Kevin mentioned in his presentation, keep with the standards of other jQuery plugins.

1. Always use the $ as the alias for jQuery, which is what the first and last line allows us to do. If you have conflicts (like with scriptaculous), you could specify a different alias or just use jQuery(whatever).
2. Use CamelCase in the plugin name, which in this case is decodeEmail.
3. Always return your wrapped set so other people can append onto your plugin.
4. Name the jQuery plugin file jquery.pluginname.js, jquery.pluginname.min.js, etc.

Step 2: Add Options with Defaults (if needed)

(function($) {
    $.fn.nameOfPlugin = function(options) {
        var defaults = {
            at: '[[at]]',
            dot: '[[dot]]'
        };
        var options = $.extend(defaults, options);
        
        return this.each(function() {
        });
    };
})(jQuery);

Now on line 2, you can see I’m now passing in options. Line 3 starts the definition of my defaults. I just created two options, one for the @ sign called “at” and one for the . called “dot” in an email address. The var options line uses the jQuery extend method to merge the contents of the two objects. In this case, my passed in options and my defaults objects.

Step 3: Add  your code

(function($) {
    $.fn.decodeEmail = function(options) {
        var defaults = {
            at: '[[at]]',
            dot: '[[dot]]'
        };
        var options = $.extend(defaults, options);
        return this.each(function() {
            e = $(this).text()
                .replace(options.at, '@')
                .replace(options.dot, '.');

            this.href = 'mailto:' + e;
            $(this).text(e);
        });
    }
})(jQuery);

The only thing in this code that changed from my first blog post is that now instead of doing .replace(‘[[at]]’, ‘@’), I do .replace(options.at, ‘@’) and the same for the dot. I won’t go into anymore detail because it’s discussed in that first blog post, but that’s it for creating a jQuery plugin!

Now I can reference it in my DocumentReady.js as mentioned in this post like this:

$('a[href^=mailto:]').decodeEmail();

or if I wanted to change the default [[at]] and [[dot]], I could do this:

$('a[href^=mailto:]').decodeEmail({at: ' at ', dot: ' dot '});

As I mentioned before (here), I like my sites to still work even if JavaScript is disabled, so I would stick to something readable to your end-users.

I could also change the CSS after decoding the email address like this:

$('a[href^=mailto:]').decodeEmail().addClass("orange");

Pretty cool stuff! Download the plugin here if you want.

Thanks for reading!