web-dev-qa-db-ja.com

文字列から画像srcを抽出する

すべての画像要素を文字列として一致させようとしていますが、

これは私の正規表現です：

html.match(/<img[^>]+src="http([^">]+)/g);

これは機能しますが、すべての画像のsrcを抽出します。したがって、この文字列に対して正規表現を実行すると、次のようになります。

<img src="http://static2.ccn.com/ccs/2013/02/img_example.jpg />

それは返します：

"http://static2.ccn.com/ccs/2013/02/img_example.jpg"

javascriptregexnode.js
15
user1305760

キャプチャグループを使用する必要があります()を使用してURLを抽出します。キャプチャグループを使用するときにgをグローバルに一致させる場合、つまり複数回一致させる場合は、ループでexecを使用する必要があります（matchは、グローバルに一致する場合、キャプチャグループを無視します）。

例えば

var m,
    urls = [], 
    str = '<img src="http://site.org/one.jpg />\n <img src="http://site.org/two.jpg />',
    rex = /<img[^>]+src="?([^"\s]+)"?\s*\/>/g;

while ( m = rex.exec( str ) ) {
    urls.Push( m[1] );
}

console.log( urls ); 
// [ "http://site.org/one.jpg", "http://site.org/two.jpg" ]
22
MikeM
var myRegex = /<img[^>]+src="(http:\/\/[^">]+)"/g;
var test = '<img src="http://static2.ccn.com/ccs/2013/02/CC_1935770_challenge_accepted_pack_x3_indivisible.jpg" />';
myRegex.exec(test);
5
aleph_null

Mathleticsがコメントで述べたように、への参照の取得など、<img>タグからsrc属性を取得するより簡単な方法は他にもあります。 ID、名前、クラスなどを介してDOMノードを作成し、参照を使用して必要な情報を抽出します。すべての<img>要素に対してこれを行う必要がある場合は、次のようにすることができます。

var imageTags = document.getElementsByTagName("img"); // Returns array of <img> DOM nodes
var sources = [];
for (var i in imageTags) {
   var src = imageTags[i].src;
   sources.Push(src);
}

ただし、正規表現の使用を強制する制限がある場合は、提供されている他の回答が問題なく機能します。

3
Default

おそらくこれがあなたが探しているものです：

私がしたことは、あなたの正規表現をわずかに変更してから、exec関数を使用して一致した文字列の配列を取得することです。 1つ以上の一致がある場合、他の一致はresults[2]、results[3]...

var html = '<img src="http://static2.ccn.com/ccs/2013/02/CC_1935770_challenge_accepted_pack_x3_indivisible.jpg" />';

var re = /<img[^>]+src="http:\/\/([^">]+)/g
var results = re.exec(html);

var source = results[1];
alert(source);
2
Stasel

groupsを使用してsrc値にアクセスできます

                                                   |->captured in group 1
                                   ----------------------------------                
var yourRegex=/<img[^>]+src\s*=\s*"(http://static2.ccn.com/ccs[^">]+)/g;
var match = yourRegex.exec(yourString);
alert(match[1]);//src value
0
Anirudha