选择文本和突出显示选择或获取选择值(React)

问题描述

我有一个显示一些跨度的 React 应用程序:

I have a React application which displays some spans:

<span>Hello</span> <span>my</span> <span>name</span> <span> is </span> ...

我希望用户像这样用鼠标选择文本

I would like the user to select the text with the mouse like so

..然后获取选定的值，或突出显示文本等.我将如何在 React 中做到这一点?我不确定要使用哪些事件处理程序以及如何获取当前选择！一个最小的例子或提示将不胜感激！

..and then get the selected value, or highlight the text etc. How would I do this in React? I am not sure what event handlers to use and how to get hold of the current selection! A minimal example or a hint would be appreciated!

推荐答案

没有 React 特定的解决方案.只需使用 window.getSelection API.

There is no React-specific solution for this. Just use window.getSelection API.

要输出突出显示的文本，请运行 window.getSelection().toString()

To output highlighted text run window.getSelection().toString()