Vimium: 在查找模式下，突出显示页面上的所有匹配项，而不仅仅是当前

创建于 2012-07-18 · 47评论 · 资料来源: philc/vimium

在chrome查找模式下，可以高亮页面中所有匹配的单词
vimium 也可以这样做吗？

suggestions

资料来源

livelazily

👍34

最有用的评论

6年后，我仍然希望有这个功能

XOKP 于 2018-06-25

👍10 😄3

所有47条评论

现在不行。我认为如果补丁不会造成明显的延迟，我们会接受它。

int3 于 2012-07-18

这将是一项相当大的任务——假设我们仍然使用 window.find() 来执行搜索，我们需要重复调用它以显示所有匹配项，然后显示我们自己的突出显示 UI。

如果我们最终遇到了那个麻烦，我们应该撕掉 Safari 的比赛美学，IMO。

philc 于 2012-07-22

+1 此功能。

paramvir-b 于 2013-02-22

Vimium 太棒了！就我而言，这是唯一缺少的部分。

ilesm 于 2013-04-23

+1 此功能。我实际上想自己提出这个建议，但我有“我不能成为唯一一个”的感觉。

wildeyes 于 2013-10-06

耶！

ElijahLynn 于 2013-10-07

id-ilych 于 2013-10-16

lewurm 于 2013-12-15

如果/当这得到实施时，也可以像 Chromium 一样在滚动条中直观地看到所有匹配项。

ElijahLynn 于 2014-02-11

👍7

swfsql 于 2014-12-04

最近发现了 vimium，不敢相信我没有早点安装它。

paolousero 于 2015-02-15

👍2

emperornorton 于 2015-02-19

ihaku4 于 2015-02-22

Matrinica 于 2015-10-17

+1
我认为这将是另一个杀手级功能

rksys 于 2015-11-08

ThePinkPanther 于 2015-11-24

请停止回复无用的 +1 评论。它不会为讨论添加任何内容，并且会浪费很多人的时间，因为他们会收到有关您无用的“贡献”的通知。使用“观看”功能订阅一张票。

wbolster 于 2015-11-24

JakeHedman 于 2015-11-24

+1，默认的 chrome 会突出显示所有匹配的命中。如果再次实现会是性能问题，是否可以直接调用chrome的搜索？

dragonxlwang 于 2016-02-08

可以直接调用chrome的搜索吗？

不。

要实现这样的东西，需要类似（更新的）#1081 这样的东西，这样浏览器就不会挂在每次搜索上，这会大大增加开发/维护的负担。

mrmr1993 于 2016-02-08

关闭。
尽管它很受欢迎，但我们真的没有办法实现它。

（目前，Vimium 实际上根本不做高亮显示。我们只是调用window.find() 。）

smblott-github 于 2016-02-20

4年...

yech1990 于 2016-08-26

+1 如果可以实现，这确实是一个很棒的功能。

我做了一些研究。这似乎是这样做的http://stackoverflow.com/a/5887719/96100 （解决方案包括 IE，因此可以通过删除 IE 部分来进一步简化）

但我认为还有一个问题 - 何时以及如何删除突出显示。对于什么时候，我想什么时候开始下一次搜索或执行:noh ；至于如何，我假设execCommand('undo')会这样做。

真的很期待这个功能。

ResolverJay 于 2016-09-01

👍2

这是必需的，并且不确定它是否应该是 vimium 特定的功能，但其他类似 vim 的扩展可以做到这一点（例如 surfingkeys ）。已经快 5 年了，这个功能还没有出现。 世界正在发生什么？

fohrums 于 2017-04-23

👍1

我做了一些研究。这似乎是这样做的http://stackoverflow.com/a/5887719/96100 （解决方案包括 IE，因此可以通过删除 IE 部分来进一步简化）

这个解决方案似乎涉及对页面 DOM 的内联修改，这让我很不舒服。

世界正在发生什么？

这很难正确完成（或者至少让我满意）。

一个完整的实现必须

跨元素查找（surfingkeys 看起来无法做到；请参阅此处和此处了解其代码）
- 例如。在此页面上查找并突出显示class SuppressPrintable （或者，更难地突出显示lass Supp ）
- 注意我们关心的那一行有 HTML <span class="pl-k">class</span> <span class="pl-en" style="background-color: transparent;">SuppressPrintable</span> <span class="pl-k">extends</span> <span class="pl-e">Mode</span>
- 例如。在test<img src="#">test查找并突出显示testtest test<img src="#">test ，就像本机查找一样
- 要么在test<input type="text">test找到并突出显示testtest test<input type="text">test （如 Firefox），要么不（如 Chrome）。
查找并突出显示直接从页面复制的字符串。适用两种情况：
- 父母有white-space: normal或nowrap 。 test string呈现为test string ，所以我们需要找到它。（surfingkeys 不能这样做，因为它使用node.data ）
- 父母有white-space: pre ， pre-line或pre-wrap 。 test string呈现为test string ，所以我们需要找到
查找表示空格的元素（例如<br />或<p></p> ）。（冲浪键不能这样做）
- 例如。 Test<br />Test应该通过搜索Test\nTest （或者Test\r\nTest ？）
- 例如。 <p>Test</p><p>Test</p>应该通过搜索Test\n\nTest （或Test\r\n\r\nTest ）找到并突出显示
（可选）在<input> s、 <textarea> s、 <button> s 等中查找并突出显示匹配项。这是正确执行的主要麻烦。

我们可以使用innerText属性来获取页面的文本表示，它告诉我们大多数匹配项（除了——特别是——最后一个要点中提到的那些），以及 Vimium 使用的匹配项。然而，为了突出显示（甚至创建一个不使用window.find ），我们必须将文本搜索的结果（在innerText ）映射回 DOM 中的范围。

我建议的（懒惰）方法将涉及一种穷人的二进制搜索，创建Range s ，并使用toString()映射到innerText 。我对自己实施这个并不特别感兴趣。

mrmr1993 于 2017-04-23

👍4

看起来这是一个非常需要的功能，但也许所有的需求加在一起都太大而无法解决。也许一组较小的子步骤可能会使这更易于访问。

cpriest 于 2017-06-20

👍4

xc1427 于 2018-05-10

👎1

6年后，我仍然希望有这个功能

XOKP 于 2018-06-25

👍10 😄3

顺便说一句，这个插件Chrome Regex Search实现了这个功能。
如果 vimium 也能支持这一点就太好了。

jefferyyuan 于 2019-05-28

扩展Chrome Regex Search使用一种非常危险的方式来实现突出显示功能，并且可能会破坏一些正常的网页，因为它可能会破坏主机 JavaScript 代码并删除一些点击操作。

gdh1995 于 2019-05-28

好像不止我有这个问题。

scutxd 于 2019-07-18

我做了一些研究。这似乎是这样做的http://stackoverflow.com/a/5887719/96100 （解决方案包括 IE，因此可以通过删除 IE 部分来进一步简化）
这个解决方案似乎涉及对页面 DOM 的内联修改，这让我很不舒服。
世界正在发生什么？
这很难正确完成（或者至少让我满意）。
一个完整的实现必须
跨元素查找（surfingkeys 看起来无法做到；请参阅此处和此处了解其代码）
例如。在此页面上查找并突出显示class SuppressPrintable （或者，更难地突出显示lass Supp ）
注意我们关心的那一行有 HTML <span class="pl-k">class</span> <span class="pl-en" style="background-color: transparent;">SuppressPrintable</span> <span class="pl-k">extends</span> <span class="pl-e">Mode</span>
例如。在test<img src="#">test查找并突出显示testtest test<img src="#">test ，就像本机查找一样
要么在test<input type="text">test找到并突出显示testtest test<input type="text">test （如 Firefox），要么不（如 Chrome）。
查找并突出显示直接从页面复制的字符串。适用两种情况：
父母有white-space: normal或nowrap 。 test string呈现为test string ，所以我们需要找到它。（surfingkeys 不能这样做，因为它使用node.data ）
父母有white-space: pre ， pre-line或pre-wrap 。 test string呈现为test string ，所以我们需要找到
查找表示空格的元素（例如<br />或<p></p> ）。（冲浪键不能这样做）
例如。 Test<br />Test应该通过搜索Test\nTest （或者Test\r\nTest ？）
例如。 <p>Test</p><p>Test</p>应该通过搜索Test\n\nTest （或Test\r\n\r\nTest ）找到并突出显示
（可选）在<input> s、 <textarea> s、 <button> s 等中查找并突出显示匹配项。这是正确执行的主要麻烦。
我们可以使用innerText属性来获取页面的文本表示，它告诉我们大多数匹配项（除了——特别是——最后一个要点中提到的那些），以及 Vimium 使用的匹配项。然而，为了突出显示（甚至创建一个不使用window.find ），我们必须将文本搜索的结果（在innerText ）映射回 DOM 中的范围。
我建议的（懒惰）方法将涉及一种穷人的二进制搜索，创建Range s ，并使用toString()映射到innerText 。我对自己实施这个并不特别感兴趣。

我也对 window.find() 做了一些研究。它仅突出显示网络上的当前结果，而不突出显示所有结果。也许多次调用该方法？对于这个问题，我认为这不是一个好主意。

scutxd 于 2019-07-18

这个套路怎么样？

在查找模式下，在用户按下回车键之前，对于每个更新的输入只调用 window.find() 一次。

使用后按回车键，调用 window.find() 以显示所有出现的情况。
[ 可能是为了记住输入之前的查找结果位置 ]

Piping 于 2019-08-13

window.find()总是高亮“当前”选择的区域，而没有完美的方法来模拟背景色块（例如，如果一条线拥有它的背景色/图像，那么模拟的背景色将不可见）。

gdh1995 于 2019-08-14

window.find()总是高亮“当前”选择的区域，而没有完美的方法来模拟背景色块（例如，如果一条线拥有它的背景色/图像，那么模拟的背景色将不可见）。

嗨，让我更清楚地了解我的日常工作。

用户输入a ，调用window.find直到返回NULL。收集所有比赛
用户输入ab ，调用window.find直到返回NULL。收集所有匹配项，删除以前的
当使用 hit enter ，实际使用的是搜索结果数组。

Piping 于 2019-08-16

@Piping window.find()总是删除所有旧的高亮区域，然后只高亮一个新的，所以实际上没有 JavaScript API 来高亮区域列表。

gdh1995 于 2019-08-16

免责声明：我不再以任何形式处理浏览器扩展，所以我的知识可能已经过时。

用户输入a ，调用window.find直到它返回NULL 。收集所有比赛
用户输入ab ，调用window.find直到它返回NULL 。收集所有匹配项，删除以前的

window.find很可怕，应该尽可能避免

它在主线程上运行，因此它会阻止用户输入
它具有 UI 效果，因此它也强制渲染并进一步阻止用户输入
它是基于选择的，因此阻止文本被选择的 CSS 可能有各种奇怪的行为，具体取决于您选择的浏览器
它没有（或者至少没有习惯）包裹在 FF 中
它超出规范并正式弃用，无意标准化浏览器之间的行为
以这种方式检索选择数据比直接查询 DOM 昂贵得多。
- 正如 Dahan 正确提到的，真正的高亮总是被丢弃，所以我们必须收集它来高亮超过 1 场比赛
- <input> / <textarea>很难很好地获取这些数据，甚至在我们不必担心突出显示其中文本的重要问题之前。

当我还是一名贡献者时，我们为计算搜索结果的数量而争论不休，因为在大页面上搜索结果很慢。使用window.find慢一个数量级，并且在正则表达式搜索中根本不起作用。我强烈建议不要将它用于不止执行一次搜索，即便如此，它也应该是最后的手段。

mrmr1993 于 2019-08-16

👍1

@gdh1995我不打算像你说的那样使用windows.find() 。它只是find文本。
@mrmr1993我了解此功能需要更多的计算能力或人力。但是至少用户应该有一个选择 [option in config] 来使用 vimium 来做到这一点，即使从用户的角度来看它很慢。无论如何，有时使用 Ctrl-F 有时使用 / 并且/无法按预期工作（甚至在 vim 中都没有），这有点烦人。

Piping 于 2019-08-16

除了哲学上的原因，扩展程序不能只允许这种类型的功能，并将其放入扩展程序设置的“实验性”部分，并带有适当的警告，指出它可能会破坏某些页面，除了哲学原因之外，还有什么其他原因吗？这似乎是一个受欢迎的请求，因此将它添加到那里是有意义的。例如，我对扩展程序“选择荧光笔”非常满意，尽管它可能会破坏页面，仅仅是因为实用程序超过了风险；我认为这同样适用于这里。