使用javascript突出显示用户选择的文本

我面临的问题是，当用户选择任何应该突出显示的文本时，我们尝试使用

window.getselection

获取该文本的DOM元素，并使用样式将它们包装在

中以添加背景色。它在大多数情况下都可以正常工作，但是当选择列表项时，如果我们只选择一个列表项，那么

标记中的内容将被包装在span中，并且工作正常，问题是选择多个

项，那么这个span标记会弄乱列表的html，我无法获得所需的输出

function handleSelectedText() {
    var parentOfSel;
    if (typeof window.getSelection != "undefined") {
      parentOfSel = window.getSelection().getRangeAt(0)
    }
    var deviation = document.createElement("span");
    deviation.style.backgroundColor = "cyan";
    deviation.id = "some-id-to-identify-sapn";
    deviation.appendChild(parentOfSel.extractContents());
    parentOfSel.insertNode(deviation);
  }

This function triggers on mouseUp event.

---

打开以使用React JS中实现的任何软件包。作为今天在支持CSS3的浏览器中运行的web应用程序，

：：selection

选择器可以通过以下操作轻松满足您的要求：

::selection { background-color: cyan }

：：选择{
背景色：青色；
}

无序列表：

• 第一项
• 第二项
• 第三项

---

是的，这是可行的，但问题是，我正在使用富文本编辑器，编辑器中的a内容被解析为html标记，因此我必须在用户已对文本进行高位加密的情况下保留此选择，以便在再次打开特定文档时，高位加密文本仍然存在，这就是我试图操纵DOM元素的原因。也许你可以尝试保存选择范围而不是操纵DOM，这样你就可以在下次编辑时恢复选择范围。你能提供一个例子和期望的结果吗？