使用 javascript 突出顯示用戶選擇的文本

Question

我面臨的問題是當用戶選擇任何應該突出顯示的文本時，因此我們嘗試使用window.getselction獲取該文本的 DOM 元素，並將它們包裝在<span>中，並使用樣式添加背景顏色。 它在大多數情況下都可以正常工作，但是在選擇列表項時，如果我們 select 只有一個列表項，那么<li>標記內的內容將包含在我們的跨度中並且工作正常，問題在於選擇多個<li>項然后這個跨度標簽弄亂了列表的 html，我沒有得到想要的 output。

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.

開放使用任何 package 如果退出，因為它是在 React JS 中實現的。

Answer 1

作為今天的 web 應用程序在支持 CSS3 的瀏覽器中運行， ::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>