文字列に含まれるすべての画像の配列を作成する最適な方法は何ですか？

私は、HTMLの文字列内のすべての画像の配列を作成しようとしています。文字列に含まれるすべての画像の配列を作成する最適な方法は何ですか？

私は以下を使用しようとしましたが、完全なURLパスがsrcに存在しない場合はエラーが発生します。

var found = $(html).find('img');

出典

2012-04-16 TheRealJAG

soこの文字列はどのように見えますか？何がエラーですか？ – Joseph

文字列は標準のHTMLページです。私が得ているエラーは、 "リソースを読み込めませんでした"です。完全なパスがソースに含まれていない場合、これらのエラーが発生しているようです。 CSSスタイルシートのIE ... – TheRealJAG

後で 'found'で何をしますか？ –

$("img").each(
     function(index) { 
     theArray.push($(this).attr("src")); 
     });

出典

2012-04-16 03:04:48 Marc

どのように変数 'html'を渡すのですか？ 'html'は検索する文字列です。 – TheRealJAG

@ JorgeA.Gonzalez、文字列を検索しているのですか、またはWebページ（DOM）を検索していますか？ – Marc

これはHTMLの文字列で、コールバック関数から戻ってきます。 – TheRealJAG

ちょうどこの試してみてください。

var imgArray = $('img'), 
    srcArray = []; 

console.log(imgArray); // array of imgs 

$.each(imgArray, function() { 
    srcArray.push(this.src)); 
});

出典

2012-04-16 03:08:15 thecodeparadox

'this.src'は速く、' $（this）.attr（ 'src'）;' – RobG

@RobGよりも速くタイプします。コメント：ありがとうございました。:) – thecodeparadox

クイック実行これを実現する方法のダウン：jQueryのDOMレディ機能付き

オープン - >

$(function(){

作成します変数foundは要素のコレクションを保持します。

var found = $('p > img');

結果を保持するために空の配列を作成します。私たち私たちが見つける各「の値」（項目）についてはfound

$.each(found, function(index,value){

は、我々はSRCを撮りたい、と配列にそのSRCを押し要素のそれぞれを通る

var results = new Array();

反復。

results.push($(value).attr('src'));

誤っ閉鎖

});

アラートアレイ内の項目の合計量。

alert('There is a total of '+results.length+' results in the Array.');

アラートは、配列に追加した3番目のアイテムのsrcだけです。

alert('The src of the 3rd item is: '+results[2]); //3nd item in array, indexes are 0 based

誤っ閉鎖

});

うまくいけば、このビットをクリア物事をするのに役立ちます。

出典

2012-04-16 03:09:08 Ohgodwhy

あなたは「インスタント」html要素作成することによって、シンプルでプレーンなJavaScriptでそれを行うことができます。

を要素
挿入ノードのinnerHTML
クエリとして文字列を作成します

例：

var html = "<html><body><img src='/img1.png' /><br /><img src='/img2.png' /></body></html>"; 

var node = document.createElement("div"); 
node.innerHTML = html; 

for(var i=0; i < node.children.length; i += 1) { 
    if (node.children[i].tagName === 'IMG') { 
     alert(node.children[i].src) 
    }; 
}

出典

2012-04-16 03:16:33 Sam

''リソースの読み込みに失敗しました '/ img1 .png。検索機能でこれらのエラーが発生するのはなぜですか？彼らはJSによって検証されていますか？ – TheRealJAG

ここに私が配列 "chrome-extension：//gabjcfmfiiglnojdinndihaijejbefem/img1.png"の出力から戻ってくるものがあります。 – TheRealJAG

これは現在のドメインの前にあるので、クロムエクステンションのページにいる場合は正しいです。必要がない場合は、 '/'を分割し、最後の要素を配列から取り出してファイル名を取得します。 – Sam

文字列に含まれるすべての画像の配列を作成する最適な方法は何ですか？

答えて

関連する問題