如何保存<img>標記源數組

Question

這是我的第一個問題，我希望能得到你的幫助。

我的應用程序從一個網站收到HTML代碼，然後我想以正確的方式顯示。

例如我接收：現在

<p>Lorem ipsum dolor sit amet, consetetur</p> 
<p>Lorem ipsum dolor sit amet:</p> 
<p><a href="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png"><img alt="Wiki" src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="600" height="534"></a></p> 
<p><a href="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png"><img alt="Wiki" src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="600" height="534"></a></p> 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam/p>  
<p><a href="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png"><img alt="Wiki" src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="600" height="534"></a></p> 

，我想每個img標籤源保存在數組中。 使用不同的過濾方法，我知道如何過濾掉第一個img標籤的源頭，但我無法將它們全部過濾掉。

我想過濾純文本（沒問題）並在最後添加圖像。

任何有助於找到解決方案的答案都是值得讚賞的！非常感謝你。

P.S. jQuery，Javascript等可以使用。儘管沒有PHP。

Answer 1

您可以se .map()。

var string = '<p>Lorem ipsum dolor sit amet, consetetur</p><p>Lorem ipsum dolor sit amet:</p><p><a href="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png"><img alt="Wiki" src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="600" height="534"></a></p><p><a href="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png"><img alt="Wiki" src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="600" height="534"></a></p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam/p> <p><a href="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png"><img alt="Wiki" src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="600" height="534"></a></p>'; 

var array = $(string).find('img').map(function(index, item){ 
    return $(item).attr('src') 
}).get(); 

演示：Fiddle

Answer 2

如果你想使用普通的JavaScript，而不是jQuery的，你可以使用：

Object.prototype.mapAttribute = function (attr) { 
    if (!attr) { 
     return false; 
    } 
    else { 
     var test = this.length, 
      that = test ? [] : [this], 
      arr = []; 
     if (test) { 
      for (var i = 0, len = this.length; i < len; i++){ 
       that[i] = this[i]; 
      } 
     } 
     for (var i = 0, len = that.length; i < len; i++){ 
      arr[i] = that[i].getAttribute(attr); 
     } 
     return arr; 
    } 
}; 

電話如下：

var sources = document.getElementsByTagName('img').mapAttribute('src'); 
console.log(sources); 

JS Fiddle demo。

或（例如）：

var sources = document.getElementById('test').mapAttribute('src'); 
console.log(sources); 

JS Fiddle demo。

以上將讓你從屬性的值，因此，例如在下面的HTML：

<img src="images/testRelativePath.png" /> 

值在數組中返回的將是：

['images/testRelativePath.png'] 

如果你想，而是可以使用的絕對路徑：

Object.prototype.mapAttribute = function (attr) { 
    if (!attr) { 
     return false; 
    } 
    else { 
     var test = this.length, 
      that = test ? [] : [this], 
      arr = []; 
     if (test) { 
      for (var i = 0, len = this.length; i < len; i++){ 
       that[i] = this[i]; 
      } 
     } 
     for (var i = 0, len = that.length; i < len; i++){ 
      arr[i] = that[i][attr]; 
     } 
     return arr; 
    } 
}; 

JS Fiddle demo。

將返回（在鏈接的演示，看看在控制檯的最後一個值）：

"http://fiddle.jshell.net/_display/images/testRelativePath.png" 

而且，雖然你現在已經接受了答案，這裏是如何使用普通的JavaScript做同樣的：

Object.prototype.mapAttributeFromString = function (elem, attr) { 
    if (!elem || !attr) { 
     return false; 
    } 
    else { 
     var div = document.createElement('div'), 
      arr = []; 
     div.innerHTML = this; 
     var elems = div.getElementsByTagName(elem); 
     for (var i = 0, len = elems.length; i < len; i++){ 
      arr[i] = elems[i].getAttribute(attr); 
     } 
     return arr; 
    } 
}; 

var HTML = '<p>Lorem ipsum dolor sit amet, consetetur</p><p>Lorem ipsum dolor sit amet:</p><p><a href="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png"><img alt="Wiki" src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="600" height="534"></a></p><p><a href="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png"><img alt="Wiki" src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="600" height="534"></a></p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam/p><p><a href="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png"><img alt="Wiki" src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="600" height="534"></a></p>', 
    sources = HTML.mapAttributeFromString('img','src'); 
console.log(sources); 

JS Fiddle demo。

Answer 3

本地的js與過濾器正則表達式

var elms=document.getElementsByTagName('img'); 
function filterImgSrcToArray(elms){ 
    var array=[], count=0; 
    var regex=arguments[1] || new RegExp(/.*/) ; 
    for (var i=0;i<elms.length;i++){ 
     if (regex.test(elms[i].src)) array[count++]=elms[i].src; 
    } 
    return array; 
} 
console.log(filterImgSrcToArray(elms)); 
console.log(filterImgSrcToArray(elms,/pipi/)); //should be empty [] in your example 
console.log(filterImgSrcToArray(elms,/\.png/)); //all *.png files in [] 

Answer 4

您可以使用jQuery的的推（）功能，

var $imgsrc=[]; 
$('p').each(function(){ 
    $imgsrc.push($(this).find('img').attr('src')); 
}) 
console.log($imgsrc);