如何用另一個標簽替換字符串HTML標簽？

Question

如何用P標簽替換替換字符串HTML非白名單標簽？

白名單示例是p br標簽

字符串之前

<p>hello</p>
<div class="test">hello world <br>
     <div>First LI</div>
     <div>Second LI <a href="">link</a></div>
</div>
<div class="fw">
     <p>shareeditflag <span>test</span></p>
</div>
<table>
     <tbody>
     </tbody>
</table>

字符串期望

<p>hello</p>
<p class="test">hello world <br>
     <p>First LI</p>
     <p>Second LI <a href="">link</a></p>
</p>
<p class="fw">
     <p>shareeditflag <p>test</p></p>
</p>
<p>
     <p>
     </p>
</p>

用jquery的方式無法完成，因為當深層節點出現問題時，它需要循環直到沒有非白名單？

$('*:not(p,br)').replaceWith($('<p>' + this.innerHTML + '</p>'));

Answer 1

按照此處概述的策略，您可以創建一個新的<p>元素，用舊的<div>的內容填充它，插入新元素，然后刪除原始元素：

  var test = document.getElementsByClassName("test")[0];
  var fw = document.getElementsByClassName("fw")[0];

  var ptest = document.createElement("p");
  ptest.innerHTML = test.cloneNode(true).innerHTML;
  parent = test.parentNode;
  parent.insertBefore(ptest, test);
  parent.removeChild(test);

  var pfw = document.createElement("p");
  pfw.innerHTML = fw.cloneNode(true).innerHTML;
  parent = fw.parentNode;
  parent.insertBefore(pfw, fw);
  parent.removeChild(fw);

但是，您必須首先解決HTML的問題，因為這些方法都不能指望格式錯誤的HTML起作用。 在這種情況下，將<li>放入列表中，並將<table>內容放入<tbody> （或表的行和列）中。 例如：

<p>hello</p>

<div class="test">
  hello world 
  <br>
  <ul>
     <li>First LI</li>
     <li>Second LI <a href="">link</a></li>
   </ul>
</div>

<table id="fw" class="fw">
  <tr>
    <td>
     <p>shareeditflag</p>
   </td>
  </tr>
</table>