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

您可以.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

带有过滤器Regex的原生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 3

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

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

Answer 4

如果你想使用普通的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

如何在数组中保存<img/>标记源

4 个答案: