从纯HTML中的HTML字符串解包所有图像

-2

如何在不使用jQuery的情况下从HTML字符串中打开所有图像？从纯HTML中的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>

来源

2016-08-02 Murhaf Sousli

我没有得到它的图像。你想删除所有图像的直接父标签？ –

@JayGhosh yupp准确 –

不要把它们添加到第一个地方 - 问题解决 –

这里有一个小的代码，我刚掀起了

[].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) 
});

来源

2016-08-02 11:22:30

它与'a.parentElement.removeChild（a）一起工作;'谢谢 –

a.remove只适用于最近的浏览器 –

感谢修复，@AngelPolitis –

当然，你刚刚得到的所有链接，并在你移动图像根，然后删除链接。

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]); 
}

类似的东西。修改它你为你的目的服务。

来源

2016-08-02 11:20:35 TreantBG

但是，这将检查所有的链接，即使他们不包含图像 –

jezus修改它。我不能想你所有的问题。添加一些支票 – TreantBG

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; 
}

这个功能应该解开所有从直接父

来源

2016-08-02 11:28:38

从纯HTML中的HTML字符串解包所有图像

回答

相关问题