如何用另一个标记替换字符串HTML标记

How do you replace an string HTML tag with another tag?

本文关键字:字符串 HTML 标记 替换 何用 另一个      更新时间:2023-09-26

如何用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>'));

按照这里概述的策略,您可以创建一个新的<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>