javascript - 如何从 DIV 内的选定文本中去除某些标签？

Question

选择以下文本时，我试图从以下文本中删除某些标签：

<div id="removetags">Remove Tags</div>
<div class="thetext">
    <p>text text <b>text text</b> text text text</p>
    <p>text text text text text <i>text text</i></p>
    <p>text <u>text text</u> text text text text</p>
    <p>text text <em>text text</em> text text text</p>
</div>

当用户选择部分文本并单击“删除标签”按钮时，我希望它从选定的文本区域中删除以下标签：

$("div#removetags").click(function () {

    $("b,i,u,em").replaceWith(function() { 
        return this.innerHTML; 
    });

});

例子：

我只想从 *selected 文本中删除标签：

标签： javascriptjquery

Answer 1

我能想到的最简单的解决方案是使用 use并将其与目标文本中所有可能的候选.getSelection()者进行检查 - 找到后，将其替换为纯..containsNode()nodetextNode

document.querySelector('#removetags').addEventListener('click', function(e) {
  let sel = document.getSelection();
  let candidates = document.querySelector('.thetext').querySelectorAll('b,i,u,em');
  candidates.forEach(function(candidate) {
    // If you wish to only remove nodes that are selected entirely, not just partially,
    // do .containsNode(candidate, false)
    if(sel.containsNode(candidate, true)) {
      candidate.replaceWith(document.createTextNode(candidate.innerHTML));
    }
  });
});

<button id="removetags">Remove Tags</button>
<div class="thetext">
    <p>text text <b>text text</b> text text text</p>
    <p>text text text text text <i>text text</i></p>
    <p>text <u>text text</u> text text text text</p>
    <p>text text <em>text text</em> text text text</p>
</div>