You may have seen that in most of the web sites when you click on an email address, the default email program of your computer (Ex: OutlookExpress) will open and the email address you clicked will be shown up in the address bar. This is good feature for the user since he don’t have to copy and paste the email address to compose a new email. This link effect can provided using the javascript mailto function.

---

In this post i am going to show how to enable mailto html code on email addresses on dynamically generated web page content using jquery match function which matches text against a given regex.

 

Dynamically Generated HTML Code

This html contains the dynamically generated page content and it contains some email addresses as texts. Since they are plain text nothing happens when we click on them. Now we are going to convert those email addresses, to html mail to links with mailto function.

 

 

  



This is a sample text which contains  
This text contains two emails  and  

$("div").filter(function(){
    var html = $(this).html();
    var emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;  

    var matched_str = $(this).html().match(emailPattern);
    if(matched_str){
        $(this).html(html.replace(emailPattern,""+matched_str+""));
        return $(this)
    }    
})

 

Dynamically Generated HTML Code After Applying Email Filters and mailto Function

As you can see now the emails are highlighted as links after applying the javascript email filter and mailto function. Once you click on the following email addresses the default email client program will open up and show the clicked email.

 

• First we have text content with email addresses inside a div with the class filter-email-box.
• In the jquery code first we get all the divs inside the main div (filter-email-box) using jquery filter function.
• Then while traversing through each filtered div we get the innerHTML using the html() method.
• Next line i have defined a common regex to match email addresses.
• Next we search for email addresses in html code of the div using emailPattern
• Matched email addresses are assigned to the matched_str variable
• Then if a match is found we replace the email address and wrap it with ‘a’ link and sets the href attribute to javascript mailto function.
• Now all the email addresses will open using mailto function

  



This is a sample text which contains  
This text contains two emails  and