请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-7-14 22:48 编辑
流行的现代代码编辑器有一个非常贴心的功能：划选任意字符，如果编辑框中其他地方存在一样的字符，它们也同时被标识出来。看看下面的效果，截图来自还在开发阶段的非侵入性代码实时高亮的pencil code：
效果图中，第三行的 --width 字串被选中，相同字符串在第4、5行中也有出现，它们都被以与文本选中状态相近的方式标识了出来。
实现思路不算复杂：监听鼠标左键弹起事件，弹起时若有文本被选中，则执行基于查找关键字的着色函数；同时监听键盘键位弹起事件，范围设定在 Home键、End键加四个方向键，因为可以通过 Shift+它们当中的任意一个对文本进行选择。
假设可编辑div的id="editor"，并且，已有一个给查找到的关键字上色的函数 colorKeyword(element, keyword)，那么，鼠标左键的监听事件可以这么写：
//编辑框鼠标左键按下 : 查找选区关键字并着色
editor.onmouseup = (e) => {
if(e.button === 0) colorKeyword(eidtor, window.getSelection().toString());
};
代码中，检测按下的鼠标键，如果是左键，则执行函数 colorKeyword()，函数的第一个参数是编辑框，第二个参数是被选中的文本，用 window.getSelection() 拿到选区，再将选区通过 toString() 方法转换成字符串。
选区要适时释放，否则用户做完划选操作之后接着想继续编辑，选区不释放的话需要用户点击两次鼠标，这会相当不友好。所以还要监听鼠标按下事件，若是按下左键，释放选区：
//编辑框鼠标左键松开 : 释放选区
editor.onmousedown = (e) => {
if(e.button === 0) window.getSelection().removeAllRanges();
};
以上是对鼠标键操作的监听，监听过程必须判断左键，只有左键按下和弹起才做相应操作。而对键盘键位的监听道理一样，具体细节不同：判断Shift+某键是否符合预设的选取文本的要求，若是，执行操作——
//编辑框键位弹起 : 查找选区关键字并着色
editor.onkeyup = (e) => {
if(e.shiftKey && e.keyCode >= 35 && e.keyCode <=40) colorKeyword(editor, window.getSelection().toString());
};
键位按下释放选区的功能貌似无需编写，因为这个选法的选区不影响后续的编辑操作，再者，用户按下鼠标左键时选区也会适时释放。
以上就是对鼠标、键盘选择文本时进行监听并做相应的工作。着色查找关键字才是划选功能的重中之重，它涉及到对关键字的正则处理，即如何动态构建合法的正则表达式，这是下一个话题了。
| 
发表于 2024-7-14 21:05
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-7-14 22:18
楼主
