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

Question

我面临的问题是，当用户选择任何应该突出显示的文本时，我们正在尝试使用 window.getselction 获取该文本的 DOM 元素并将它们包装在 <span> 中，并使用样式添加背景颜色。它在大多数情况下都可以正常工作，但是在选择列表项时，如果我们只选择一个列表项，那么 <li> tag 内的内容将包含在我们的跨度中并且工作正常，问题在于选择多个 <li> 项目那么这个 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 中实现时，如果退出，则打开以使用任何包。

Answer 1

作为当今在支持 CSS3 的浏览器中运行的 Web 应用程序，::selection 选择器可以通过以下方式轻松满足您的要求：

::selection { background-color: cyan }

::selection {
  background-color: cyan;
}

<p>Unordered list:</p>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
<ul>