清除突出显示JavaScript getSelection函数

突出显示不是问题。我的问题是，如何在javascript中使用window.getSelection（）擦除突出显示。并创建一个节点“新建跨距闭合”和“新建跨距打开”，以擦除选定的高光区域。查看屏幕截图

function removeHighlight(sel) {

        if(sel.anchorNode.parentNode.className == 'hlt') {
            var replacementText = sel.toString();
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(replacementText));
        } 
    }

---

到目前为止，这是我的函数，但createTextNode（）无法读取htmlEntities。

要获得预期结果，请执行以下选项

1.使用id-Toggle从按钮切换获取所选文本
2.在选择元素之前添加close标记，并使用substring使用class-'hlt'添加span标记

HTML:

---

请分享代码示例。请输入您的代码。您想完成什么？您想选择特定的范围，javascript应该自动删除所选的范围？

document.getSelection（）.deleteFromDocument（）

，也许？我不知道您正在寻找哪种浏览器支持。不，如果用户将突出显示突出显示的文本。假设我有一个切换高亮显示和擦除。然后我选择删除突出显示的文本，它将在带有黄色背景的跨距上移动。@RoqueRemedioMejos，希望这篇带有codepen的文章对你有用：）非常感谢Naga Sai A。这段代码真的帮助了我。：）谢谢@RoqueRemedioMejos，如果我的帖子有助于回答你的问题，请投我一票：）我在这方面有点问题，它有时会突出所有问题。我需要将它实现到mouseup事件。不必担心，但有时我可以突出显示整个文本此代码有问题，因为可能会删除多次，我们无法在用户每次删除时删除所有span classname hlt。你能在长崎帮上忙吗？

<p>
  Lorem ipsum dolor sit amet, cursus laoreet tincidunt vel, at purus sagittis ultrices <span class="hlt">varius elit accumsan, sed nulla aenean amet, nulla ac et, imperdiet </span>fermentum nulla ipsum risus leo.
</p>
<button id="toggle">Toggle</button>

$(document).ready(function() {
  $("#toggle").click(function() {
    $('span.hlt').removeClass('hlt');

    var selection = window.getSelection();
    var text = selection.toString();
    var parent = $(selection.focusNode.parentElement);
    var oldHtml = parent.html();
    var position = oldHtml.indexOf(text);
    var end =(position*1)+selection.length
    console.log(text.length);
    var output = "<span class='hlt'>" +oldHtml.substr(0, position) + "</span>"+text+"<span class='hlt'>" + oldHtml.substr(position+text.length)+ "</span>";

    //var newHtml = oldHtml.replace(text, "</span>" + text + "<span class='hlt'>");
    parent.html(output);

  });
});

.hlt{
  background:yellow;
}