Spam safe email addresses with jQuery

 
 
 

Email address links in your footer or on your contact page makes it really easy for visitors to get in contact with you. Unfortunately it also makes it easy for spammers to harvest your email address and inundate you with spam offers or worse leave you open to viruses.

Thankfully there's some great ideas ways to protect your email address from spiders and robots. A lot of them use PHP or some other server side technology to detect spiders and hide your address. But what if we want to do this with good old fashion HTML and jQuery? Here's a really simple jQuery script which will do the job for you:

HTML:


hello at creativeinflux dot co dot uk

jquery:


$(document).ready(function() {

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

});

For those of you interested in how it works, here's the details:

First let's create the HTML


hello at creativeinflux dot co dot uk

Firstly lets create a span and add the email address spelled out how you would say it. We do this so a spider that is scanning the page for an email address will see the text as a normal text string and ignore it, most spiders will be looking for @ symbols or a domain extensions (TDL) such as .com. Of course visitors with javascript turned off will also see this text so by spelling it out will make it perfectly readable to humans. We'll give this span a class name of 'mailme' so we can pick this up with jQuery.

Next the jquery

As with almost all jquery scripts we will have to check that the document is loaded before we try to select the element. Create a JavaScript file with the document ready method below:


$(document).ready(function() {
    //code in here
});

Let's select the element using the below selection and attach this to the each method which will do the following function for each element it finds in the document:


$(document).ready(function() {

    $('span.mailme').each(function () {

    });

});

We need to replace the words at and dot with the symbols as below, first we set some variables which we'll use in the replace function later. We will use the $(this) method to select the element that is currently going through the function, then we use the text() method to get the text. The replace method is used to get the matched string and replace it with our symbols, lets assign this string to the addr variable so we can use it later:


$(document).ready(function() {

    $('span.mailme').each(function () {
        var at = / at /;
        var dot = / dot /g;
        var addr = $(this).text().replace(at,"@").replace(dot,".");
    });

});

Now we need to make up the link, we select the element using $(this), we'll use the after method to make up our link as below, this will place the link after our element:


$(document).ready(function() {

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

});

Now we have the link in place we can remove the original string by again using $(this) and using the remove method:


$(document).ready(function() {

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

});

That's it, really simple and fast, remember to either add it directly to the HTML in the script element or make up a javascript file and link to it.