Replacing multiple URLs in a string by a links with regex - regex

Question

I'm using a filter with AngularJS to replace URLs in strings by window.open() function and email by mailto :
app.filter('parseUrl', function() {
//URLs starting with http://, https://, or ftp://
var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/gim;
//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
//Change email addresses to mailto:: links.
var replacePattern3 = /(\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
return function(text, target, otherProp) {
var originText = text;
if(text == undefined || text == "") {
return "";
} else {
angular.forEach(text.match(replacePattern1), function(url) {
text = text.replace(replacePattern1, "<span onclick=\"window.open('$1', '_system');\" class='link_url'>$1</span>");
});
angular.forEach(text.match(replacePattern2), function(url) {
text = text.replace(replacePattern2, "<span onclick=\"window.open('http://$2', '_system');\" class='link_url'>$1$2</span>");
});
angular.forEach(text.match(replacePattern3), function(url) {
text = text.replace(replacePattern3, "$1");
});
return text;
}
};
});
It works well with one URL or one email, but when I have two or more URLs it's not working because it replace a multiple times the URLs by a span with window.open() function. As you can see in this JSFiddle : http://jsfiddle.net/wps94/1/
Do you have an idea to avoid this ? Maybe by changing the regex ?
Thank you

Answer 1

Try using a single regex and a replacement function:
var replacePattern = /\b((http:\/\/|https:\/\/|ftp:\/\/|mailto:|news:)|www\.|ftp\.|[^ \,\;\:\!\)\(\""\'\<\>\f\n\r\t\v]+#)([^ \,\;\:\!\)\(\""\'\<\>\f\n\r\t\v]+)\b/gim;
return function(text, target, otherProp) {
var originText = text;
if(text == undefined || text == "") {
return "";
} else {
return text.replace(replacePattern, function($0, $1) {
var match = $0;
var protocol = $1;
if ((/^www\./i).test(match))
{
return "<span onclick=\"window.open('http://" + match + "', '_system');\" class='link_url'>" + match + "</span>";
}
if ((/^ftp\./i).test(match))
{
return "<span onclick=\"window.open('ftp://" + match + "', '_system');\" class='link_url'>" + match + "</span>";
}
if (protocol && protocol.charAt(0) === '#')
{
return "" + match + "";
}
return "<span onclick=\"window.open('" + match + "', '_system');\" class='link_url'>" + match + "</span>";
});
}
};
http://jsfiddle.net/wps94/2/

Answer 2

In the forEachs, change text = to newText = and then return that instead…like this:
app.filter('parseUrl', function() {
//URLs starting with http://, https://, or ftp://
var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/gim;
//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
//Change email addresses to mailto:: links.
var replacePattern3 = /(\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
return function(text, target, otherProp) {
var originText = text;
if(text == undefined || text == "") {
return "";
} else {
var newText;
angular.forEach(text.match(replacePattern1), function(url) {
newText = text.replace(replacePattern1, "<span onclick=\"window.open('$1', '_system');\" class='link_url'>$1</span>");
});
angular.forEach(text.match(replacePattern2), function(url) {
newText = text.replace(replacePattern2, "<span onclick=\"window.open('http://$2', '_system');\" class='link_url'>$1$2</span>");
});
angular.forEach(text.match(replacePattern3), function(url) {
newText = text.replace(replacePattern3, "$1");
});
return newText;
}
};
});
Each pass through the forEach was looking at the value of text with the replacement already made for the first URL rather than the initial value.