從純HTML中的HTML字符串解包所有圖像

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

這裏有一個小的代碼，我剛掀起了

[].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 2

當然，你剛剛得到的所有鏈接，並在你移動圖像根，然後刪除鏈接。

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

這個功能應該解開所有從直接父