Mário Andrade

One practice I find important to incorporate in all web projects is protecting emails on the website from possible spammers but still allowing humans to view it and understand they are looking at an email and without removing it’s functionality if it’s an email link. Email spam filter services are increasing and becoming a very lucrative market, especially in the corporate world.

Spammers use automatic spiders to crawl web pages in order to find emails and gathering them on monstrous databases to be sell all over the world. Luckily for the developers the fact that they use automatic robots means you can trick them into not finding the email pattern on web pages.

jQuery currently has a plugin called Mailme – Email Defuscator created specifically to protect and filter email from spam.
Let’s take a look at it’s function and basic use:

jQuery.fn.mailme = function() {
    var at = / at /;
    var dot = / dot /g;
    this.each( function() {
        var addr = jQuery(this).text().replace(at,"@").replace(dot,".");
        var title = jQuery(this).attr('title')
        $(this)
            .after(''+ addr +'')
            .remove();
    });
};

This function allows you to define your email link and the title to be shown on mouse over that link. Here’s the sample html syntax:

 <span class="mailme" title="Send me a letter!">me at mydomain dot com</span>

Using a spam with the class mailme you can define the title and the email using words instead of symbols. If you want extra protection create your own words for the at sign (@) and dot. In this particular case what robots will crawl is: me at mydomain dot com but the user will actually see me@mydomain.com and the user is actually able to click it.

You can set the addr var on the jQuery function to something else. Personally I like having pages with contact form so when you click on the link it will take you to the contact form page instead of opening an email program. Just pay attention you still need to execute the jQuery code to replace the text for the symbols: jQuery(this).text().replace(at,”@”).replace(dot,”.”);.

Now you can create simple and effective email spam filters that reduce spam considerably since spiders are unable to track emails, especially if you develop a personified code.