Angular.JS filter to make url:s in text clickable

This is a simple filter I made for Angular.JS to make url’s in text clickable. Make sure you place the content and filter in the ng-bind-html attribute of the HTML element. Otherwise the HTML won’t be parsed.

E.g. <p ng-bind-html="comment.body | parseUrl"></p>

Here’s the parseUrl filter:

angular.module('filters', [])
.filter('parseUrl', function() {
    var urls = /(\b(https?|ftp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim
    var emails = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim

    return function(text) {        
        if(text.match(urls)) {
            text = text.replace(urls, "<a href=\"$1\" target=\"_blank\">$1</a>")
        }
        if(text.match(emails)) {
            text = text.replace(emails, "<a href=\"mailto:$1\">$1</a>")
        }

        return text       
    }
})

Also, make sure you inject filters in your main module / app.