This topic created in 2330 days ago, the information mentioned may be changed or developed.
大家好，最近的项目需求中，有一项前端需求困扰着弟弟。
项目背景：
前端 React 框架
需求如下：
- 鼠标滑动选中一段文字，实现对选中文字的高亮，并复制文字
问题：
- 是否有现成的控件可以支持这一需求
- 如果需要自己手写控件，可以通过什么样的实现思路去实现 不知道各位朋友有什么高招
Supplement 1 Dec 13, 2019
谢谢各位大家，刚刚review问题发现我在需求表达出现了问题。复制>获取文字的位置。 Eg. hello hello比如选中第一个hello期望得到一个[0, 4]的array，选中第二个则为期望为[5, 10]这样一个array
 | 1 findsomeone Dec 13, 2019 via Android 我觉得应该不会很难？ 比如现在各种 chrome 翻译插件都有划词翻译 而且一般也开源 参考下监控事件？ |
 | 2 orzorzorzorz Dec 13, 2019 复制的话，简单粗暴就是 document.execCommand('copy')。链接在[这里]( https://stackoverflow.com/questions/6300213/copy-selected-text-to-the-clipboard-without-using-flash-must-be-cross-browser) 改高亮的话有两种思路，一种是直接改 ::selection，一种是去掉 ::selection 的默认样式，想办法获得选中时的字，然后改这些字所在 dom 的样式。 |
| 3 orzorzorzorz Dec 13, 2019 这跟 re 不 react 没啥关系，市面上我是没见过有这样的组件的。 |
 | 4 RV0n Dec 13, 2019 window.getSelection()获取选中文字 再走正则匹配 匹配文字显示高亮 再利用 clipboard 实现复制 |
| 5 orzorzorzorz Dec 13, 2019 https://github.com/bvaughn/react-highlight-words 查了下，是有个相关的库，看上去能用。 |
 | 6 Oilybear OP @orzorzorzorz 谢谢大佬，刚刚我在需求表述上出现了问题，复制文字如果变化为获取文字相对一段文字的位置的话。不知有什么好的思路实现。例子已添加到附言中。 |
| 7 Oilybear OP @findsomeone 好的，我去参考一下 |
 | 8 learnshare Dec 13, 2019 MDN: selection & range |
 | 9 Cbdy Dec 13, 2019 via Android 浏览器给你提供了 onSelect 事件 |
 | 10 netnr Dec 13, 2019 https://www.netnr.com/run/code/5068762375722166316 写了个 单节点 选中高亮的 demo，跨节点需要更复杂的逻辑判断，已拿到选中内容如何复制应该不成问题了 |
 | 11 oubenruing Dec 13, 2019 |
Select Language