正则表达式，查找不以=“开头的URL

Question

I am trying to build a function to find URL's in strings and change them into links. But I do not want to find URL's that is already inside a HTML tag (Like <A> and <IMG> as examples).

In other words the RegEx should find this and replace it with a link:

http://www.stackoverflow.com
www.stackoverflow.com
www.stackoverflow.com/logo.gif

But not these URL's (Since they are already formated):

<a href="http://www.stackoverflow.com">http://www.stackoverflow.com</a>
<img src="http://www.stackoverflow.com/logo.gif">

I am using a RegEx that is already developed for this, but it does not check if the URL is inside a HTML-element already. ( http://blog.mattheworiordan.com/post/13174566389/url-regular-expression-for-links-with-or-without )

This is the original RegEx:

/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/

This the same RegEx with explanations:

(
  ( // brackets covering match for protocol (optional) and domain
    ([A-Za-z]{3,9}:(?:\/\/)?) // match protocol, allow in format http:// or mailto:
    (?:[\-;:&=\+\$,\w]+@)? // allow something@ for email addresses
    [A-Za-z0-9\.\-]+ // anything looking at all like a domain, non-unicode domains
    | // or instead of above
    (?:www\.|[\-;:&=\+\$,\w]+@) // starting with something@ or www.
    [A-Za-z0-9\.\-]+   // anything looking at all like a domain
  )
  ( // brackets covering match for path, query string and anchor
    (?:\/[\+~%\/\.\w\-]*) // allow optional /path
    ?\??(?:[\-\+=&;%@\.\w]*) // allow optional query string starting with ? 
    #?(?:[\.\!\/\\\w]*) // allow optional anchor #anchor
  )? // make URL suffix optional
)

What I am trying to do is to change this to look for if the URL starts with exactly =" or > and if it does, it should not go through the RegEx. Since the URL inside <A> and <IMG> elements should have one of these combinations right before it starts.

I am not the greatest in RegEx but I have tried and I guess this is my best try so far, but it does not do the trick:

/(((^[^\="|\>])([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;

It is this part I have added:

(^[^\="|\>])

This is my fiddle:

http://jsfiddle.net/0w1g4mm9/2/

Answer 1

You could try something like this:

string.replace(
  /(<a[^>]*>[^>]*<\a>)|YOUR_REGEX_HERE/g,
  function(match, link, YOUR_CAPTURE_GROUP_1, etc) {
    if (link) {
        return link
    }
    return YOUR_DESIRED_REPLACEMENT
  }
)

The above matches either already valid <a> tags or the URL-looking strings you are looking for, whichever comes first. A capturing group is used to detect which of the two was matched. If a valid link was matched, simply return it unmodified. Otherwise return your desired replacement.

Answer 2

A different aproach which got kind of ugly. I iterate trough all matches, rebuild the source html for the non matches and for the matches I check the char at matchIndex - 1 and add the link tag or not.

This has the advantage that the already crazy complicated regexp is not getting more complicated and you can use full javascript to check if the current string is part of an html element or not.

If you factor out the iterate code it might even end up look nice.

var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;

var source = $('#source').html();
var dest = "";
var lastMatchEnd = 0;
while ((match = urlRegEx.exec(source)) != null) {
  dest += source.substring(lastMatchEnd, match.index);
  var end = match.index + match[0].length;
  var lastChar = source.charAt(match.index - 1);
  if(lastChar == '"' || lastChar == '>') { // inside link
    dest += match[0];
  } else {
    dest += "<a href=''>" + match[0] + "</a>";
  }
  lastMatchEnd = end;
}
dest += source.substring(lastMatchEnd);
$('#target').html(dest);