1

如何从 javascript 变量中提取所有 img html 标签，如下所示：

var content = '<img src="http://website.com/image.jpg"><img src="http://website.com/image2.jpg"><img src="http://website.com/image3.jpg">Other content';

然后提取每个 img 链接，可能使用 jQuery .each() 函数。

提取的图像链接将是

http://website.com/image.jpg
http://website.com/image2.jpg
http://website.com/image3.jpg

我怎样才能做到这一点？我需要正则表达式吗？

4

4 回答 4

1

您可以从有效的 html 字符串创建 html 元素的 jQuery 集合，甚至无需将它们附加到任何文档。这将像一个普通的 jQuery 集合一样工作。

$(content).filter('img').each(function () {
    console.log($(this).attr('src'));
});

编辑：如果图像将始终是另一个元素的子元素content，请使用.find而不是.filter. 否则，您必须同时使用两者，您仍然可以这样做：

$(content).find('img').addBack().filter('img').each(function () {
于 2013-02-23T16:14:05.883 回答
0

对于单级 DOM，这将很好地工作：

var links = $(content).filter('img').map(function() {
    return this.src;
}).toArray();
console.log(links); //["http://website.com/image.jpg", "http://website.com/image2.jpg", "http://website.com/image3.jpg"]

小提琴

如果您有多个级别的 DOM（其他元素内的嵌套图像），请将第一行更改为：

var links = $('<div>').append(content).find('img').map(function() {

此外，如果你正在抓取任意数据，你应该使用$.parseHTML(jQuery 1.8+) 来避免 XSS。

这是完整、坚固的版本：

var links = $('<div>').append($.parseHTML(content)).find('img').map(function() {
    return this.src;
}).toArray();

jsBin

在上面的示例中，我将内容附加到一个动态创建的div元素中，这样我就可以只执行一个find操作。结果与@Explosion Pills 的.find('img').addBack().filter('img')变体相同。

此外，显然，如果您已经在页面中拥有图像，您可以使用一个共同的祖先作为根，.find()而不是创建新的 DOM 元素：

var links = $('#imagesParent').find('img').map(function() {
于 2013-02-23T16:13:38.787 回答
0

你是对的，使用.each()它来迭代它工作正常。

var ary = [];
var content = '<img src="http://website.com/image.jpg"><img src="http://website.com/image2.jpg"><img src="http://website.com/image3.jpg">Other content';
$(content).each(function () {
    ary.push($(this).attr('src'));
});

jsFiddle 示例

于 2013-02-23T16:14:00.907 回答
0

LIVE DEMO使用.map()和.get()

var srcs = $(content).map(function(){
    return this.src;
}).get();

http://api.jquery.com/map/
http://api.jquery.com/get/

LIVE DEMO使用.each()和数组存储数据

var srcArray = [];
$(content).each(function(){
    srcArray.push(this.src);
});

http://api.jquery.com/each/
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/push

于 2013-02-23T16:14:35.853 回答