在reactjs中获取带有标记的突出显示文本的选定文本

【问题标题】：Get selected text with highlighted text with tag in reactjs在reactjs中获取带有标记的突出显示文本的选定文本
【发布时间】：2021-09-24 17:50:05
【问题描述】：

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

在上面选择的文本中包含 html 标签。当我使用window.getSelection() 时，只返回没有标签my highlighted word 的文本，但我需要上面带有<span> 标签的整个选定文本。谁能帮帮我。

【问题讨论】：

【解决方案1】：

为了获得给定标签的内部 HTML，您应该尝试使用 innerHTML 属性。例如：

对于标签：

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

您可以将节点存储在如下变量中：

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

如果你访问 propinnerHTML，它会返回 p 标签内的值

console.log(text.innerHTML)

结果：“我的突出显示”

【讨论】：

【解决方案2】：

可以试试这样的

   window.getSelection().anchorNode.parentNode

【讨论】：

【解决方案3】：

我通过使用得到了解决方案

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

【讨论】：