1

这是我在这里的第一个问题，希望能得到您的帮助。

我的应用程序从一个网站接收 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 标签的来源，但我不能全部过滤掉。

我想过滤纯文本（没问题）并在最后添加图像。

感谢任何有助于找到解决方案的答案！非常感谢你。

可以使用 PS jQuery、Javascript 等。虽然没有 PHP。

4

4 回答 4

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();

演示：小提琴

于 2013-04-21T14:06:57.727 回答
2

带有过滤器正则表达式的原生 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 []
于 2013-04-21T14:25:01.417 回答
1

您可以使用 jQuery 的push()函数，

var $imgsrc=[];
$('p').each(function(){
   $imgsrc.push($(this).find('img').attr('src'));
})
console.log($imgsrc);
于 2018-01-03T05:40:53.943 回答
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 小提琴演示。

或者（例如）：

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

JS 小提琴演示。

上面将从属性中获取值，例如，在以下 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 小提琴演示。

这将返回（在链接的演示中，查看控制台中的最后一个值）：

"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 小提琴演示。

于 2013-04-21T14:16:36.263 回答