Forgot your password?
Navigate

Home > About Us > Modern Signal Blog >Link Emails Addresses with Javascript

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.

Testimonials

  • Modern Signal has been a great partner for us for over the past 10 years.  As our business grew and our needs changed, Modern Signal was able to work with us to adjust our website platform in the ever-changing online world.  Their service and response level has been second to none, and we've been never been happier with our relationship with them.

    - Charm City Run

  • Modern Signal significantly enhanced our site to be more efficient and user-friendly. They provide excellent customer service with timely and cost-effective solutions.

    - Center for Medicare Education

  • Modern Signal has a professional staff that was very responsive to our needs during all phases - scoping, developing, implementing and maintaining - of our project.  We have been pleased with their ability to deliver quality work on time and on budget. If given the opportunity, I would work with them again.

    - The National Center for Safe Routes to School

  • I felt as if my company was their only client. They responded to my needs quickly and efficiently despite short turn around time and intense demands.

    - Teaching Strategies, Inc.

  • We wouldn’t have gotten where we are today without your support over the years.  Modern Signal has always been a great partner to us.

    - Kirk Gillis, Managing Director at Zoom Tanzania

  • This was by far the smoothest website redevelopment I have ever experienced. Modern Signal was a wonderful company to work with and we greatly value our working relationship. 

    - National Association of Student Financial Aid Administrators

  • Modern Signal understands our business - from future needs to current limitations - so their solutions are always scalable, solid, and service-oriented.

    - National Association of Home Builders

  • I love working with Modern Signal! Their CMS is very easy to use and they are incredibly responsive to questions or challenges I bring them.

    - NALP

  • Modern Signal worked with us to understand our needs and figure out what solution would work best for us. Our Lighthouse CMS is perfectly suited to our website goals. When we later needed to modify the CMS, they again took the time to understand exactly what was  needed and then built that functionality rather than delivering a cookie cutter solution.   

    - Ecosystem Investment Partners