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

时间:2013-04-21 14:05:15

标签: javascript jquery html image filter

这是我的第一个问题,希望得到你的帮助。

我的应用程序从网站接收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。

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分: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 []

答案 2 :(得分:1)

您可以使用jQuery的 push()功能,

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

答案 3 :(得分:0)

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