Question

如何从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

我该怎么做？我需要正则表达式吗？

Answer 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 () {

Answer 2

对于单级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"]

Fiddle

如果您有多个级别的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() {

Answer 3

你是对的，使用.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 example

Answer 4

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

从变量中获取<img/>标记源

4 个答案:

jsBin