这是我的第一个问题,希望得到你的帮助。
我的应用程序从网站接收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。
答案 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);
或(例如):
var sources = document.getElementById('test').mapAttribute('src');
console.log(sources);
以上内容将为您提供属性的值,例如,在以下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;
}
};
将返回(在链接的演示中,查看控制台中的最后一个值):
"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);