Question

如何在不使用jQuery的情况下从HTML字符串中解包所有图像？

var htmlString = `
            <p> random text </p>
            <a href="src1"><img src="src1"/></a>
            <a href="src2"><img src="src2"/></a> 
            <a href="src3"><img src="src3"/></a>
            <p> random text </p>
           `;

var div = document.createElement('div');
div.innerHTML = htmlString;

var elements = div.getElementsByTagName("img");
let i = 0;
while (i < images.length) {
   //unwrap all images from parent in pure javascript 
   images[i] ....
}

console.log(div.innerHTML);

预期产出：

 <p> random text </p>
 <img src="src1"/>
 <img src="src2"/>
 <img src="src3"/>
 <p> random text </p>

Answer 1

当然，您只需获取所有链接，然后将图像移动到root，然后删除链接。

var parent= document.getElementById('parent');
var linkImages = parent.getElementByTagName('a');

for(linkImage in linkImages){
    while (linkImages[linkImage].childNodes.length > 0) {
        parent.appendChild(linkImages[linkImage].childNodes[0]);
    }
    parent.removeChild(linkImages[linkImage]);
}

这样的事情。修改它，你服务于你的目的。

Answer 2

这是我刚刚发起的一些代码

[].forEach.call(div.getElementsByTagName("img"), function(img) {
    var a = img.parentElement;
    a.parentElement.insertBefore(img, a);
    a.parentElement.removeChild(a); // can be a.remove() - not sure of cross browser compatibility (shakes fist at IE)
});

Answer 3

function unwrapImages(htmlString){
    var div = document.createElement('div');
    div.innerHTML = htmlString;

    var images = div.getElementsByTagName("img");
    var i = 0;
    while (i < images.length) {
       var imgParent = images[i].parentElement;
       var img = images[i];
       div.insertBefore(img, imgParent);
       div.removeChild(imgParent);
       i++; 
    }
      return div.innerHTML;
}

此功能应解开其直接父级的所有图像

在纯javascript中打开HTML字符串中的所有图像

3 个答案: