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.