Use Javascript to Link All Email Addresses in a Page

Posted by David Hammond, 2/14/2008

This came up with a site that needed to have a mailto link for email addresses, but other methods of linking the value didn't work. The same basic method could be used to replace any text in a page.

<script type="text/javascript">
//Match email addresses not within tag attributes
var re = /[\w\.\-]+\@([\w\-]+\.)+[\w]{2,4}(?![^<]*>)/ig;

//Function to do replace
function linkEmails(parentNode){
    var nodes = parentNode.childNodes;
    for (var i=0; i < nodes.length; i++){
        //For element nodes other than A nodes, search children
        if (nodes[i].nodeType == 1 && nodes[i].tagName != "A") {
            linkEmails(nodes[i]);

        //For text nodes that match, do replace for parent node.
        } else if (nodes[i].nodeType == 3 && re.test(nodes[i].nodeValue)) {
            parentNode.innerHTML = parentNode.innerHTML.replace(re,"<a href='mailto:$&'>$&</a>")
        }
    }
}

//Set onload event to do replace
window.onload = function(){
    linkEmails(document.body);
}
</script>

I think most of the above code is relatively easy to understand by following the comments I have included, but it could be useful to break down that regular expression to see what it's doing.  The first part matches the email address:

[\w\.\-]+\@([\w\-]+\.)+[\w]{2,4}

The next part uses somewhat more advanced regular expression syntax:

(?![^<]*>)

The (?!...  notation says that the email address will only match is it is not followed by [^<]*>, which should ensure that it is not within a property of an html tag.