0

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

4

1 回答 1

0

作为当今在支持 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>

于 2021-04-30T06:49:00.560 回答