1

JavaScript コードは、画像の URL (プレーン テキスト) を変更します。たとえば、次のようになります。

http://www.sstatic.net/stackoverflow/img/apple-touch-icon.png

このように表示されます：

ここに画像の説明を入力


これは私が使いたかったコードです:

var isImgUrl= /(https?:\/\/.*\.(?:png|jpg|gif))/i;
var txt=document.getElementById('comment');
txt.innerHTML=txt.innerHTML.replace(isImgUrl,'<img src=" [how to insert the image URL here from regex?] "/>');

上記のコードを修正するのを手伝ってください

ところで、(var isImgUrl の) 正規表現はすでに正しいのですか?

4

1 に答える 1

5

もうすぐですよ、ヘリー。置換を行う場合、置換文字列で使用できるメタ文字がいくつかあります。 $1は最初に一致したグループ$2を挿入し、2 番目に一致したグループを挿入します。ただし、あなたの場合、さらに一般的な を使用できます。これにより、一致した正規表現全体$&が挿入されるため、正規表現で不要なグループを削除することもできます。

var isImgUrl= /https?:\/\/.*\.(?:png|jpg|gif)/i;
var txt=document.getElementById('comment');
txt.innerHTML=txt.innerHTML.replace(isImgUrl,'<img src="$&"/>');

私はここで推測していますが、おそらく一般的な JPEG 拡張子.jpeg(および短い.jpg) も含めたいと思うでしょう。

また、そのような一致をすべて置き換えたいと思われます。あなたが持っているものは最初のものだけを置き換えます。すべての一致を置き換えるには、g修飾子も正規表現に指定します。したがって、これらすべてを念頭に置くと、正規表現は次のようになります。

var isImgUrl= /https?:\/\/.*\.(?:png|jpg|jpeg|gif)/ig;

待ってください！もっとあります。この方法で複数の置換を行うと、反復演算子の貪欲な性質のために問題が発生します。したがって、この文字列で上記の正規表現を試してください。

"One picture: http://foo.com/a.jpg, two pictures: http://foo.com/b.jpg."

あなたが返すことを期待しているのはこれです：

"One picture: <img src="http://foo.com/a.jpg"/>, two pictures: <img src="http://foo.com/b.jpg">."

しかし、実際に得られるのは次のとおりです。

"One picture: <img src="http://foo.com/a.jpg, two pictures: http://foo.com.b.jpg">."

おっと！どうしたの？まあ、貪欲.*です。つまり、可能な限り一致します。それで、両方の画像をすくい上げました。

繰り返し演算子の後に疑問符を追加して、遅延に変更するだけです。

var isImgUrl= /https?:\/\/.*?\.(?:png|jpg|jpeg|gif)/ig;

これで、期待どおりに動作するはずです。ここで実際にそれを見ることができます：

http://jsfiddle.net/tMA6e/

于 2013-07-28T17:55:53.930 に答える