V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Oilybear
V2EX  ›  问与答

前端-鼠标滑动实现高亮与复制

  •  
  •   Oilybear · 2019-12-13 08:10:46 +08:00 via iPhone · 2618 次点击
    这是一个创建于 1805 天前的主题,其中的信息可能已经有所发展或是发生改变。

    大家好,最近的项目需求中,有一项前端需求困扰着弟弟。

    项目背景:

    前端 React 框架

    需求如下:

    1. 鼠标滑动选中一段文字,实现对选中文字的高亮,并复制文字

    问题:

    1. 是否有现成的控件可以支持这一需求
    2. 如果需要自己手写控件,可以通过什么样的实现思路去实现 不知道各位朋友有什么高招😭
    第 1 条附言  ·  2019-12-13 09:20:20 +08:00

    谢谢各位大家,刚刚review问题发现我在需求表达出现了问题。复制——>获取文字的位置。 Eg. hello hello比如选中第一个hello期望得到一个[0, 4]的array,选中第二个则为期望为[5, 10]这样一个array

    11 条回复    2019-12-13 10:45:44 +08:00
    findsomeone
        1
    findsomeone  
       2019-12-13 08:41:30 +08:00 via Android
    我觉得应该不会很难? 比如现在各种 chrome 翻译插件都有划词翻译 而且一般也开源 参考下监控事件?
    orzorzorzorz
        2
    orzorzorzorz  
       2019-12-13 08:50:54 +08:00
    复制的话,简单粗暴就是 document.execCommand('copy')。链接在[这里]( https://stackoverflow.com/questions/6300213/copy-selected-text-to-the-clipboard-without-using-flash-must-be-cross-browser)
    改高亮的话有两种思路,一种是直接改 ::selection,一种是去掉 ::selection 的默认样式,想办法获得选中时的字,然后改这些字所在 dom 的样式。
    orzorzorzorz
        3
    orzorzorzorz  
       2019-12-13 08:51:51 +08:00
    这跟 re 不 react 没啥关系,市面上我是没见过有这样的组件的。
    RV0n
        4
    RV0n  
       2019-12-13 08:52:45 +08:00
    window.getSelection()获取选中文字 再走正则匹配 匹配文字显示高亮 再利用 clipboard 实现复制
    orzorzorzorz
        5
    orzorzorzorz  
       2019-12-13 08:54:00 +08:00
    https://github.com/bvaughn/react-highlight-words
    查了下,是有个相关的库,看上去能用。
    Oilybear
        6
    Oilybear  
    OP
       2019-12-13 09:23:29 +08:00 via iPhone
    @orzorzorzorz 谢谢大佬,刚刚我在需求表述上出现了问题,复制文字如果变化为获取文字相对一段文字的位置的话。不知有什么好的思路实现。例子已添加到附言中。
    Oilybear
        7
    Oilybear  
    OP
       2019-12-13 09:24:15 +08:00 via iPhone
    @findsomeone 好的,我去参考一下
    learnshare
        8
    learnshare  
       2019-12-13 09:28:51 +08:00
    MDN: selection & range
    Cbdy
        9
    Cbdy  
       2019-12-13 09:35:38 +08:00 via Android
    浏览器给你提供了 onSelect 事件
    netnr
        10
    netnr  
       2019-12-13 10:22:57 +08:00
    https://www.netnr.com/run/code/5068762375722166316

    写了个 单节点 选中高亮的 demo,跨节点需要更复杂的逻辑判断,已拿到选中内容如何复制应该不成问题了
    oubenruing
        11
    oubenruing  
       2019-12-13 10:45:44 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1019 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:56 · PVG 03:56 · LAX 11:56 · JFK 14:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.