如何保存<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);