web编辑器划词查询初步
本帖最后由 马黑黑 于 2024-7-14 22:48 编辑 <br /><br /><style>.art > p { margin: 10px 0; font-size: 18px; }
.tRed { color: red; }
</style>
<div class="art">
<p>流行的现代代码编辑器有一个非常贴心的功能：划选任意字符，如果编辑框中其他地方存在一样的字符，它们也同时被标识出来。看看下面的效果，截图来自还在开发阶段的非侵入性代码实时高亮的pencil code：</p>
<p><img id="" alt="" src="https://638183.freep.cn/638183/t24/1/sel.png" /></p>
<p>效果图中，第三行的 <span class="tRed">--width</span> 字串被选中，相同字符串在第4、5行中也有出现，它们都被以与文本选中状态相近的方式标识了出来。</p>
<p>实现思路不算复杂：监听鼠标左键弹起事件，弹起时若有文本被选中，则执行基于查找关键字的着色函数；同时监听键盘键位弹起事件，范围设定在 Home键、End键加四个方向键，因为可以通过 Shift+它们当中的任意一个对文本进行选择。</p>
<p>假设可编辑div的id="editor"，并且，已有一个给查找到的关键字上色的函数 colorKeyword(element, keyword)，那么，鼠标左键的监听事件可以这么写：</p>
<div class="hE"><pre>
//编辑框鼠标左键按下 : 查找选区关键字并着色
editor.onmouseup = (e) => {
if(e.button === 0) colorKeyword(eidtor, window.getSelection().toString());
};
</pre></div>
<p>代码中，检测按下的鼠标键，如果是左键，则执行函数 colorKeyword()，函数的第一个参数是编辑框，第二个参数是被选中的文本，用 window.getSelection() 拿到选区，再将选区通过 toString() 方法转换成字符串。</p>
<p>选区要适时释放，否则用户做完划选操作之后接着想继续编辑，选区不释放的话需要用户点击两次鼠标，这会相当不友好。所以还要监听鼠标按下事件，若是按下左键，释放选区：</p>
<div class="hE"><pre>
//编辑框鼠标左键松开 : 释放选区
editor.onmousedown = (e) => {
if(e.button === 0) window.getSelection().removeAllRanges();
};
</pre></div>
<p>以上是对鼠标键操作的监听，监听过程必须判断左键，只有左键按下和弹起才做相应操作。而对键盘键位的监听道理一样，具体细节不同：判断Shift+某键是否符合预设的选取文本的要求，若是，执行操作——</p>
<div class="hE"><pre>
//编辑框键位弹起 : 查找选区关键字并着色
editor.onkeyup = (e) => {
if(e.shiftKey && e.keyCode >= 35 && e.keyCode <=40) colorKeyword(editor, window.getSelection().toString());
};
</pre></div>
<p>键位按下释放选区的功能貌似无需编写，因为这个选法的选区不影响后续的编辑操作，再者，用户按下鼠标左键时选区也会适时释放。</p>
<p>以上就是对鼠标、键盘选择文本时进行监听并做相应的工作。着色查找关键字才是划选功能的重中之重，它涉及到对关键字的正则处理，即如何动态构建合法的正则表达式，这是下一个话题了。</p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script> 矮油，对鼠标操作进行监听，再做相应操作～
鼠标左键按下，查找～选中～着色～
鼠标左键松开，释放～
很有意思的互动～
弱弱问一句哈～相当不友好那句右边，是不是要监听松开鼠标左键，释放选区 这个看起来好复杂，主要对那个命令第一次接触，还没混成脸熟呢{:4_173:} 这个功能特别好，可以直接知道要找的东西都出现在什么地方了。
以前去理解一个代码，比如需要看看动画名对应哪句的，都要自己去找，现在就可以直接找了呢{:4_199:} 红影 发表于 2024-7-14 22:36
这个功能特别好，可以直接知道要找的东西都出现在什么地方了。
以前去理解一个代码，比如需要看看动画名对 ...
很方便的功能 南无月 发表于 2024-7-14 22:18
矮油，对鼠标操作进行监听，再做相应操作～
鼠标左键按下，查找～选中～着色～
鼠标左键松开，释放～
主要是实用 南无月 发表于 2024-7-14 22:23
弱弱问一句哈～相当不友好那句右边，是不是要监听松开鼠标左键，释放选区
是监听按下左键释放选区。
用户按下鼠标左键，是要进行编辑相关的操作，比如定位输入光标，这时候如果选区还在，输入光标到不了新点击的位置，所以得按两下鼠标左键，第一下释放选区、第二下光标到新位置。
所以，当鼠标左键按下，需要取消选区，监听的是鼠标左键按下事件。
鼠标点击操作，流程是，按下-弹起，按下、弹起是两个事件，按下弹起合起来是一个点击事件，这里面共有三个事件。 红影 发表于 2024-7-14 22:35
这个看起来好复杂，主要对那个命令第一次接触，还没混成脸熟呢
都是语义化的语句，容易懂的。
很多人会问我学编程之前需要提前做什么。我通常会这么回答：三个方面。一是，你得知道编程是干什么用的；二是，你得把高中及以下的数学学透了；三是，你得记住5000个英文单词，词汇量大约是高中水平的就好。 马黑黑 发表于 2024-7-14 22:57
都是语义化的语句，容易懂的。
很多人会问我学编程之前需要提前做什么。我通常会这么回答：三个方面。 ...
即便是语义化的，对这个功能的运用也是第一次接触啊{:4_173:} 红影 发表于 2024-7-14 23:04
即便是语义化的，对这个功能的运用也是第一次接触啊
但是一看就能懂 马黑黑 发表于 2024-7-14 22:46
很方便的功能
是的，十分实用呢{:4_187:} 红影 发表于 2024-7-14 23:04
是的，十分实用呢
{:4_190:} 马黑黑 发表于 2024-7-14 23:04
但是一看就能懂
是的，这个单词倒是不难懂。 马黑黑 发表于 2024-7-14 23:22
{:4_204:} 红影 发表于 2024-7-15 20:37
是的，这个单词倒是不难懂。
这就好 马黑黑 发表于 2024-7-15 21:57
这就好
怎么用就没那么容易了啊{:4_173:} 红影 发表于 2024-7-15 22:38
怎么用就没那么容易了啊
也不太难吧 马黑黑 发表于 2024-7-15 22:39
也不太难吧
看过没法试，还是流于表面了。 红影 发表于 2024-7-15 22:42
看过没法试，还是流于表面了。
表面的也不错