Hide E-mail Links from Harvesters/Bots using jQuery

When developing a website, having quick links to e-mail certain members of the site can be a wonderful and useful thing. Without making users fill out a contact form, why not let them e-mail directly from a link, assuming they have some sort of e-mail client installed on their machine. However, having a mailto:myawesomeemail@myawesomedomain.com within a simple anchor tag can also be deadly – spammers, havesters, and bots love to skim your site for links such as these! There’s a simple solution to help tackle this situation, however, by adding a simple jQuery script to your page(s).

By using this dynamic e-mail hiding jQuery script, you can use syntax such as

<span class="mail" title="This will be the e-mails subject">brad at fortwaynewebdevelopment dot com</span>

Using the class of “mail” on the span tag, this jQuery function will replace ‘brad at fortwaynewebdevelopment dot com’ with the correct mailto syntax, including a Subject (the title of the span tag).

Download jquery.createMail.js or view the code (double click to enable text-friendly copying)

$(document).ready(function () {
    jQuery.fn.createMail = function () {
        var atsign = / at /;
        var dot = / dot /g;
        this.each(function () {
            var addr = $(this).text().replace(atsign, "@").replace(dot, ".");
            var title = $(this).attr('title')
                .after('<a title="' + title + '" href="mailto:' + addr + '?Subject=' + title + '">' + addr + '</a>')

And finally, set your class to use the function.

Posted in HTML, jQuery