1

次のような javascript 変数からすべての img html タグを抽出するにはどうすればよいですか。

var content = '<img src="http://website.com/image.jpg"><img src="http://website.com/image2.jpg"><img src="http://website.com/image3.jpg">Other content';

そして、おそらく jQuery .each() 関数を使用して、各 img リンクを抽出します。

抽出された画像リンクは

http://website.com/image.jpg
http://website.com/image2.jpg
http://website.com/image3.jpg

これどうやってするの？正規表現が必要ですか?

4

4 に答える 4

1

ドキュメントに追加しなくても、有効なhtml文字列からhtml要素のjQueryコレクションを作成できます。これは通常のjQueryコレクションのように機能します。

$(content).filter('img').each(function () {
    console.log($(this).attr('src'));
});

編集：画像が常にの別の要素の子になる場合は、の代わりにをcontent使用します。それ以外の場合は、両方を同時に使用する必要がありますが、それでも次のことができます。.find.filter

$(content).find('img').addBack().filter('img').each(function () {
于 2013-02-23T16:14:05.883 に答える
0

シングルレベルDOMの場合、これはうまく機能します。

var links = $(content).filter('img').map(function() {
    return this.src;
}).toArray();
console.log(links); //["http://website.com/image.jpg", "http://website.com/image2.jpg", "http://website.com/image3.jpg"]

フィドル

複数のレベルのDOM（他の要素内にネストされた画像）がある場合は、最初の行を次のように変更します。

var links = $('<div>').append(content).find('img').map(function() {

また、任意のデータをスクレイピングする場合は$.parseHTML、XSSから保護するために（jQuery 1.8以降）を使用する必要があります。

完全で頑丈なバージョンは次のとおりです。

var links = $('<div>').append($.parseHTML(content)).find('img').map(function() {
    return this.src;
}).toArray();

jsBin

上記の例では、動的に作成されたdiv要素にコンテンツを追加しているので、1つのfind操作だけを実行できます。結果は@ExplosionPillsの.find('img').addBack().filter('img')バリエーションと同じです。

また、明らかに、ページにすでに画像がある場合は、.find()新しいDOM要素を作成する代わりに、共通の祖先をルートとして使用できます。

var links = $('#imagesParent').find('img').map(function() {
于 2013-02-23T16:13:38.787 に答える
0

そうです、それを繰り返すために使用.each()することはうまくいきます。

var ary = [];
var content = '<img src="http://website.com/image.jpg"><img src="http://website.com/image2.jpg"><img src="http://website.com/image3.jpg">Other content';
$(content).each(function () {
    ary.push($(this).attr('src'));
});

jsFiddleの例

于 2013-02-23T16:14:00.907 に答える
0

LIVE DEMO.map()およびの使用.get()

var srcs = $(content).map(function(){
    return this.src;
}).get();

http://api.jquery.com/map/
http://api.jquery.com/get/

LIVE DEMOと配列を使用.each()してデータを格納する

var srcArray = [];
$(content).each(function(){
    srcArray.push(this.src);
});

http://api.jquery.com/each/
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/push

于 2013-02-23T16:14:35.853 に答える