Javascript RegEx 匹配 URL 但排除图像

Question

I need to replace all text links in a string of HTML text by actual clickable links. Works fine with the following RegEx:

/\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

I then noticed it also replaces images and already formatted links. Figures I need to exclude links preceded by src" and > ... I searched a bit and read a lot on negative lookahead in many questions answered here. I tried this (added something right after the first /):

/(^(?!src="|>)\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

But this doesn't match any link anymore. I tried several similar statements, without the ^, changing some brackets, etc etc, but simply nothing seems to work. I tried putting .{0} in between the part I added and \\b, to make sure he would only look at stuff right in front of the url and not consider anything farther away.

Answer 1

EDIT: The discussion was getting long, so I decided to update the answer instead.

Trusting that your original regex works, I'm just going to refer to a simplified version through the rest of this answer:

/\b(https?|ftp|file)/gi

Now, you attempted this:

/^(?!src="|>)\b(https?|ftp|file)/gi
 ^

The main error here is marked by a caret: the caret. That forces your regex to match from the beginning of the line, which is why it matched nothing. Let's remove that and move on:

/(?!src="|>)\b(https?|ftp|file)/gi

The main error, this time, is in your conception of lookahead assertions. As I explained in the comments, this assertion is redundant, because you are saying, "Match http or https or ftp or file , as long as none of these are src=" or > ." It's almost so redundant that the sentence doesn't even make sense to us! What you want, instead, is a lookbehind assertion:

/(?<!src="|>)\b(https?|ftp|file)/gi
   ^

Why? Because you wish to find src=" or > behind the string you potentially wish to match. The problem? JavaScript doesn't support lookbehind assertions. So, I suggested an alternative. Admittedly, it was flawed (although not the cause of the HTML breaking, as you brought up). Here it is, fixed:

/(.[^>"]|[^=]")\b(https?|ftp|file)/gi
  ^^^^^^^^^^^^

This is indeed a non-intuitive regex, and warrants explanation. It splits our cases into two. Say we have a two-character set. If the set doesn't end in > or " , then we're not suspicious of it; we're good to go; match any URL that might follow. However, if it does end in > or " , well, the only "forgivable" case is where the first character is not an = . So you see, a bit of logic trickery here.

Now, as for why this might break your HTML. Be sure to use JavaScript's replace , and substitute the first captured group back into the page! If you simply substitute each match with nothingness, you end up "eating up" the two-character sets, which we only meant to investigate, not destroy.

html.replace(/(.[^>"]|[^=]")\b(https?|ftp|file)/gi,
             function(match, $1, offset, original) {
                 return $1;
             });

Answer 2

I have to go home and haven't tested yet, but I'd feel more comfortable dealing with the easier task of isolating HTML you don't want out first.

1. Do a match to get an array of the stuff you don't want to deal with.
2. Rip it all out with a split.
3. Iterate the split array and replace URLs and then splice matched items back in
4. Join and return

The only assumption is that you don't end on an anchor or img tag in your text

function zipperParse(htmlText,matcher){
    var zipBackInArray = htmlText.match(matcher),
    workingArray = htmlText.split(matcher),
    i = workingArray.length;

    while(i--){
        buildAnchorTagIfURLPresent(workingArray[i]); //You got this one covered
        workingArray.splice(i,0,zipBackInArray.pop());
        //working backwards makes splice much easier to use here
    }
    return workingArray.join('');    
}

var toExclude = /<a[^>]*>[^>]*>|<img[^>]*>/g;
// is supposed to match all img and anchor pairs but not handling tags inside anchors yet

zipperParse(yourHtmlText,toExclude);

Answer 3

this code works for me... just change the Google Api KEY to exclude..=> XXXXXXXXXXXXXXXXXXXXXX i just put it in my functions.php theme of my wordpress. The first thing is to see, how your google maps code appears on your site, and then it is to match it to what is replaced.

function remove_script_version( $src ) { 
$parts1 = explode( '?', $src );
$parts2 = str_replace('//maps.googleapis.com/maps/api/js', '//maps.googleapis.com/maps/api/js?language=es&v=3.31&libraries=places&key=XXXXXXXXXXXXXXXXXXXXXX&ver=3.31', $parts1);
return $parts2[0]; }
add_filter( 'script_loader_src', 'remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'remove_script_version', 15, 1 );