1

ここには少し奇妙なものがあります。基本的に、画像へのリンクが含まれている場合と含まれていない場合がある大量のテキストがあります。

したがって、画像のURLをうまく抽出するパターンがあるとしましょう。ただし、一致が見つかると、リンクをsrcとする要素に置き換えられます。ここでの問題は、テキスト内に複数の一致が存在する可能性があり、これがトリッキーになるところです。URL パターンが src タグの URL と一致するため、基本的には無限ループに入ります。

のようなパターンで始まらない場合、正規表現でのみ一致する方法はあり="|='ますか? その場合、次のような URL と一致します。

some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6

だがしかし

some image <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6">

それが可能かどうかはわかりませんが、可能であれば誰かが私を正しい方向に向けることができますか? このシナリオでは、一致した URL を他の場所でも使用する必要があるため、置換だけでは十分ではなく、キャプチャのように使用する必要があります。

説明する必要がある主なシナリオは次のとおりです。

  • さまざまなテキストの 1 つのブロックに含まれる多数のリンク
  • 他のテキストのない単一のリンク
  • 他のさまざまなテキストとの単一のリンク

== 編集 ==

URLを一致させるために使用している現在の正規表現は次のとおりです。

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

==編集2 ==

ここで /g コマンドを使用できない理由を誰もが理解できるように、問題を説明する答えを示します。最初に試したようにこの /g を使用できれば、物事はずっと簡単になります。

Javascript 正規表現の複数のキャプチャが再び

4

4 に答える 4

3

探しているのは否定的な後読みですが、Javascript はどのような後読みもサポートしていないため、コールバック関数を使用して何が一致したかを確認し、またはが前に付いていないことを確認する必要があります'。"次の正規表現を使用できます。

(?:^|[^"'])(\b(https?|ftp|file):\/\/[-a-zA-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))

これには単一の問題があります。つまり、一致が成功した場合、入力のパターンの直前にもう 1 文字キャッチ(\b(https?|ftp|file)されますが、これは簡単に処理できると思います。

正規表現101のデモ

于 2013-09-27T09:48:55.613 に答える
1

Using the /ig command at the end should work... the g is for global replace and the i is for case-insensitivity, which is necessary as you've only got A-Z instead of a-zA-Z.

Using the following vanilla JS appears to work for me (see jsfiddle)...

var test="some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6";
var re = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))/ig);
document.getElementById("output").innerHTML = test.replace(re,"<img src=\"$1\"/>");

Although, what it does highlight is that the query string part of the URL (the ?v=6 is not being picked up with your RegEx).

For jQuery, it would be (see jsfiddle)...

$(document).ready(function(){
  var test="some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6";
  var re = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))/ig);
  $("#output").html(test.replace(re,"<img src=\"$1\"/>"));
});

Update

Just in case my example of using the same image URL in the example doesn't convince you - it also works with different URLs... see this jsfiddle update

var test="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 http://cdn.sstatic.net/serverfault/img/sprites.png?v=7";
var re = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))/ig);
document.getElementById("output").innerHTML = test.replace(re,"<img src=\"$1\"/>");
于 2013-09-27T10:03:11.363 に答える
0

その単語境界の代わりに、URLの前に空白があるかどうかを確認できませんでしたか? 後で一致した空白を削除する必要がありますが、うまくいくようです。

(\s(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))

http://rubular.com/r/9wSc0HNだった

編集：くそー、遅すぎる:)正規表現が短いので、ここに残します;）

于 2013-09-27T09:57:59.210 に答える
0

freefaller が言った/gように、exec が必須でない場合は、flag を使用してすべての一致を一度に見つけることができます。

それ以外の場合:(="|=')?正規表現の先頭に追加して、 $1 がundefined. 未定義の場合、="|='パターンで開始されていません

于 2013-09-27T09:58:22.867 に答える