javascript - 在 javascript 中删除特定标签及其内容

Question

如何在 javascript 中删除 div 标签及其内容？

我尝试了以下脚本，但只删除了标签并保留了内容。

var res, html = document.getElementById('source').value;
res = html.replace(/(<div[^>]+>|<div>|<\/div>)/g, "");
document.getElementById('result').innerHTML = res;

textarea {
  width: 100%;
  height: 120px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, .3);
}

<textarea id="source">
  <p>
      <input type="text"/>
      <div class="parent"><div>inner01</div><div>inner02</div></div>
      <span></span>
  </p>
</textarea>
<textarea id="result"></textarea>

Answer 1

假设 div 是一个实际的字符串，试试这个正则表达式:

<div.*<\/div>

• 点是任何一个字符:.
• 后跟一个星号的女巫是它前面的任何内容的零个或多个实例:* *
• 为了解释正斜杠，用反斜杠从字面上转义它:\

* 一个加号:+ 也足够了——一个或多个前面的任何实例。

var res, html = document.getElementById('source').value;
res = html.replace(/<div.*<\/div>/g, "");
document.getElementById('result').innerHTML = res;

textarea {
  width: 100%;
  height: 120px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, .3);
}

<textarea id="source">
  <p>
      <input type="text"/>
      <div class="parent"><div>inner01</div><div>inner02</div></div>
      <span></span>
      <div class="parent"><input></div>
  </p>
</textarea>
<textarea id="result"></textarea>

注意: 添加了一个额外的 div 以证明多个实例已正确移除，并且没有移除出现在它们之间的“标签” div“标签”。