Question

我需要从普通的json字符串中获取所有图像（以便进一步转换为画布）...

例如我可以使用json字符串：

<p>someText</p>
<img src="">

或

asdasdasasd
asdasdasd
asd <img class="asd" src="123">

我使用它：

var html = $.parseHTML(someString)

**

.children('img')
.find('img')

但这些功能不起作用（

如何从这个HTML获取我的所有img对象？所以，我可以用drawImage（画布）

进一步使用它

有可能吗？

UPD

通过ajax我得到了这样的数据：

<p>someText</p>
<img src="">

或

asdasdasasd
asdasdasd
asd <img class="asd" src="123">

或

<h3><p>someText <img src=""></p><h3>

等...

并且我需要将此字符串转换为“虚拟”DOM，我可以在其中获取图像（以及其他元素）并使用jQuery进行操作。就像我可以为我的窗口对象获取图像：$('img') - 这将从页面主体获取所有图像。我需要类似于我的字符串。所以，我可以使用jQuery这个图像。

Answer 1

你在parseHTML函数之后得到一个数组。我想，你应该遍历它，看看如果它是一个图像，得到它并添加$（array_element）。

在此过程之后，您将获得一个可以使用attr（），find（）等函数的Jquery对象。

var k    = '<p>sosmeT22ext2</p><img class="c" src="empty"><img class="empty" src="123">';
var html = $.parseHTML(k);

for(var i = 0; i < html.length; i++){
    if(html[i] instanceof HTMLImageElement){
        console.log($(html[i]).attr("src")); // all jquery functions works on $(html[i])
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

更新

上面的代码在嵌套的dom html中不起作用。因为它只是在你看到的一个层次上遍历。下面的代码更复杂，因为它是一个递归方法。我的建议是，如果您的dom不是嵌套使用第一个代码块，则不使用递归方法来提取和使用您的图像。

var k    = '<div><p>s133o4s3meT232ext2</p><img class="c" src="empty"><img class="empty" src="123"></div>';
var html = $.parseHTML(k);

var images_arr = [];
get_child_nodes(html);
console.log(images_arr[1].attr("src"));

function get_child_nodes(html_l){
    for(var i = 0; i < html_l.length; i++){
        if(html_l[i] instanceof HTMLImageElement){
            images_arr.push($(html_l[i]));
        }
        else {
            for(var j = 0; j < html_l[i].childNodes.length; j++){
                get_child_nodes($(html_l[i].childNodes[j]));
            }
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

添加到我的评论中，找到了问题的实际解决方案：

> $('<p>someText</p><img src="">').filter('img')
[img]

问题是您的HTML没有可以是img的子项，但其中一个根元素是，filter会考虑根元素。

比较（差/差但发现嵌套）：

> $('<div><p>someText</p><img src=""></div>').find('img') 
> $('<div></div>').append($('<p>someText</p><img src="">')).find('img')

始终有效的解决方案，将选择器find和filter组合在一起，而不创建额外的根元素：

> $('<p>someText</p><img src=""><div><img></div>').filter('img')
[img]
> $('<p>someText</p><img src=""><div><img></div>').find('img')
[img]
> h = $('<p>someText</p><img src=""><div><img></div>')
[p, img, div]
> h.find('img').add(h.filter('img'))
[img, img]

从json字符串

2 个答案:

更新