Javascript Regex to replace URLs with links, but not in embed (or img) tags

Question

I'm currently using the following code, to search the a div on a page for URLs and replace them with a tags.

However when we have a embed tags within the div it messes up the links within these tags.

function replaceURLWithHTMLLinks(text) { 
    return text.replace(/(ftp|http|https|file):\/\/[\S]+(\b|$)/gim,'<a href="$&" class="my_link" target="_blank">$&</a>').replace(/([^\/])(www[^ <]+(\b|$))/gim,'$1<a href="http://$2" class="my_link" target="_blank">$2</a>');
}

$(document).ready(function(){
    var htmlStr = $("div.content-a").html();
    var htmlStrAfter = replaceURLWithHTMLLinks(htmlStr);
    $("div.content-a").html(htmlStrAfter);
});

Can anyone tell be how to perhaps exclude any http://... that are preceded by a " or ' ?

Or similar?

Answer 1

Probably, you should use DOM as recommended. But in order to make your regexp work as desired, you should prepend it with (?:^|[^"']). That means match start of line or match any character excepting ' and ". So first of your regexps will look as follows:

/(?:^|[^"'])(ftp|http|https|file):\/\/[\S]+(\b|$)/gim  

And your chaining of replace method is ugly. Code will be much more readable if you will split method invocations to different lines.

Update: And in order to skip first excess character you can use $1 instead of $& and your regexp must be changed to this:

/(?:^|[^"'])((ftp|http|https|file):\/\/[\S]+(\b|$))/gim