日常使用浏览器的时候,经常会用到查找功能,但是浏览器的查找工具实在太简陋了,只有一个简单的大小写不敏感的查找,不支持匹配单词和正则,而且在切换 tabs 、翻页的时候也不能及时更新,很不好用,于是就自己写了个。
github: https://github.com/ImSwordTooth/findwhatever
使用快捷键或者点按工具栏的图标后,即可唤出查找面板。
键入文字后即可自动查找。
点击文本框右侧的Cc
来开启或关闭这个功能。关闭后,匹配结果将忽略单词的大小写。
原始文本 | 查找词 | 开启 Cc 的结果 |
关闭Cc 的结果 |
---|---|---|---|
I find the Finder. | find | 只有 find | find 和 Find |
这个功能本质上是正则表达式的 g 标志。
点击文本框右侧的W
来开启或关闭这个功能。开启后,查找结果将只匹配完整的单词。
原始文本 | 查找词 | 开启 W 的结果 |
关闭W 的结果 |
---|---|---|---|
I find the Finder. | find | 只有 find,因为这是个完整的单词 | find 和 Find |
这个功能本质上是正则表达式的 \b 。
这才是查找文本的完整形态!
点击文本框右侧的.*
来开启或关闭这个功能。开启后,输入的任何字符都会被当做正则表达式的一部分。
原始文本 | 查找词 | 开启 .* 的结果 |
关闭.* 的结果 |
---|---|---|---|
I find the Finder. | find\w+ | 只有 Finder,因为 find 后面需要有字母 | 搜不到,因为没有\w+这三个字符 |
本插件最大的亮点。
使用原生的查找工具时,如果要查找的内容分布在不同的 tabs (比如每个学期的数学得分)时,每次切换 tabs ,都需要手动重新搜索,浏览体验大打折扣。
本插件可以解决这个问题!点击文本框右侧的图标来开启或关闭这个功能,开启后,监测到 DOM 变化时,将自动重新查找。
我们来看几个例子:
我把这个功能做成了一个开关,而不是一个常驻的功能,是因为考虑到这几点:
- 目前并没有做增量的 DOM 变化监测,每次变化后都会重新循环所有 DOM 节点,这会可能会引起一些性能问题;
考虑这个场景:有个页面往下滚动的时候会自动隐藏 header 部分,同时下面会出来一些新的内容。查找完毕后如果点击“下一个”按钮,滚动条会自动定位到第 2 条结果,而这会引起 DOM 变化,于是又重新搜索了一次,而这又导致了搜索结果和当前下标重置了,因此又回到了初始状态。
这种情况不适合实时监听,可以临时关闭,等 header 已经是隐藏状态了再打开。
这个问题已经解决了,但是可能还会有其他负责、未测到的情况,所以保留了开关。
插件基于 JavaScript ,并没有“获取当前屏幕所有文本”这种功能,尤其是在有 iframe 的情况下,如果不是同一个源,获取其 DOM 都是做不到的事。
本插件的方法是,给每个 frame 注入一段脚本,当主页面查找时,他们跟着一并查找,并将结果记录在各自的 window 里。监测到下标定位到自己的范围内,就开始高亮对应的节点。