移除父母 <div> 標簽結尾 </div> 使用javascript關閉標簽

Question

考慮一下我的價值：

var value = "<br><br><div class="test">-- Thanks, <br><div><br></div></div>";

我想刪除測試類div標簽，即<div class="test1">並與結束標簽</div> 。

預期結果將是：

"<br><br>-- Thanks, <br><div><br></div>"

我正在嘗試使用正則表達式：

value = value.replace(/(<div class="test">|<\/div>)/g, '');

但是它正在刪除相鄰的div標簽：

<br><br><div class="test">-- Thanks, <br><div><br>  

不完全與結束標記。

這個怎么做？

Answer 1

最好的選擇是使用瀏覽器中內置的HTML解析器。 例如：

var div, divToRemove, node, sibling;
div = document.createElement('div');
div.innerHTML = value;
divToRemove = div.querySelector('.test');
for (node = divToRemove.firstChild, sibling = node.nextSibling;
     node;
     node = sibling, sibling = node && node.nextSibling) {

     divToRemove.parentNode.insertBefore(node, divToRemove);
}
divToRemove.parentNode.removeChild(divToRemove);
value = div.innerHTML;

現場示例：

 var value = '<br><br><div class="test">-- Thanks, <br><div><br></div></div>'; snippet.log("Before: " + value); var div, divToRemove, node, sibling; div = document.createElement('div'); div.innerHTML = value; divToRemove = div.querySelector('.test'); for (node = divToRemove.firstChild, sibling = node.nextSibling; node; node = sibling, sibling = node && node.nextSibling) { divToRemove.parentNode.insertBefore(node, divToRemove); } divToRemove.parentNode.removeChild(divToRemove); value = div.innerHTML; snippet.log("After: " + value); 

 <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

Answer 2

您需要先將父div的html保存到變量中

var html = document.getElementByClassName('test1').innerHtml;

然后刪除div：

document.getElementByClassName('test1').remove();

然后將html附加到div的父級

var bodyHtml = document.getElementByTagName('body');

bodyHtml = bodyHtml + html;

Answer 3

使用DOM正確處理

var html = '<br><br><div class="test">-- Thanks, <br><div><br></div></div>';
var frag = document.createElement('div');
frag.innerHTML = html;
var tgt = frag.querySelector('.test');
var par = tgt.parentNode;
while(tgt.firstChild) {
    par.insertBefore(tgt.firstChild, tgt);
};
tgt.remove();
console.log(frag.innerHTML);