JS-從段落中刪除所有圖像和格式

Question

我想從div節點中刪除所有子級，對於每個被刪除的子級，我想將它們添加到新的段落元素中，以便將所有段落合並為一個，其他所有內容都被刪除。

但是，在刪除所有段落並將其添加到此新段落的同時，我還希望刪除所有圖像（而不僅僅是刪除開頭和結尾的箭頭），並確保所有單詞的格式保持相同（僅11pt標准字體） ）。

我希望這是有道理的。 這是我到目前為止的內容：

var newP = document.createElement('P');
var paras = comment.getElementsByTagName('P');          
var counter = 0;
while (paras[0]) {
var next = paras[0]; // needs to be 0;
if (next.innerHTML.length > 8) { // to safely ignore  
    counter++;              
    if (counter < 3)
        newP.innerHTML += next.innerHTML + "<br /><br />";
}

comment.removeChild(next); // comment is the div which holds the new para
next = paras[0];

if (!next)
    newP.innerHTML += "<a href='" + link + "'>click to view full entry</a>";                
}
comment.appendChild(newP);

這是需要格式化的HTML標記示例：

 <div class="comment"> <h3>Heading</h3> <p style="font-weight: bold">This has been formatted which should be removed. <span style="font-size: 14pt; color: red;"> This also includes all span tags!</span></p> <p>This is a para <a href="">with an anchro</a></p> <div> this is a div with an image <img src="//placehold.it/64X64" /></div> <p>This is an image in the middle of a paragraph <img src="http://www.thinkstockphotos.com.au/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg"/> which I want to remove, and not just the arrows</p> </div> 

我希望它看起來像這樣：

 <div class="comment"> <p>Heading</p> <p>This has been formatted which should be removed. This also includes all span tags!</p> <p>This is a para with an anchro</p> <div> this is a div with an image</div> <p>This is an image in the middle of a paragraph which I want to remove, and not just the arrows</p> </div> 

編輯：這不是重復的，因為我想完全刪除所有圖像以及圖像打開和關閉標簽之間的所有屬性/文本（而不僅僅是刪除組成標簽的箭頭）並刪除所有格式！

Answer 1

 alert(document.body.outerHTML); var imgs = Array.prototype.slice.call(document.querySelectorAll("img")); for (var q=0; q<imgs.length; ++q) { imgs[q].parentNode.removeChild(imgs[q]); } var ps = Array.prototype.slice.call(document.querySelectorAll("p")); for (var q=0; q<ps.length; ++q) { var p = ps[q]; p.textContent = p.textContent; p.setAttribute("style", ""); } alert(document.body.outerHTML); 

 <div class="comment"> <h3>Heading</h3> <p style="font-weight: bold">This has been formatted which should be removed. <span style="font-size: 14pt; color: red;"> This also includes all span tags!</span></p> <p>This is a para <a href="">with an anchro</a></p> <div> this is a div with an image <img src="//placehold.it/64X64" /></div> <p>This is an image in the middle of a paragraph <img src="http://www.thinkstockphotos.com.au/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg"/> which I want to remove, and not just the arrows</p> </div>