在reactjs中使用帶有標記的突出顯示文本獲取所選文本

Question

my <span class="highlight">highlighted</span> word

在上面選定的文本中包含 html 標簽。 當我使用window.getSelection()時，只返回沒有標記my highlighted word文本，但我需要如上所述的帶有<span>標記的整個選定文本。 任何人都可以幫助我。

Answer 1

為了獲得給定標簽的內部 HTML，您應該嘗試使用 innerHTML 屬性。 例如：

對於標簽：

<p id="high">My <span class="highlight">Highlighted</span></p>

您可以將節點存儲在一個變量中，例如：

const text = document.getElementById("high");

如果您訪問 propinnerHTML，它將返回 p 標簽內的值

console.log(text.innerHTML)

結果：“我的<span class="highlight">突出顯示”

Answer 2

可以嘗試這樣的事情

   window.getSelection().anchorNode.parentNode

Answer 3

我通過使用得到了解決方案

window.getSelection().getRangeAt (0).cloneContents ()