google-chrome - URL 中的 `#:~:text=` 位置哈希到底是什么?

标签 google-chrome url highlight

今天我注意到谷歌上的一些搜索给了我指向结果的链接,其中包含突出显示文本的明显说明。
Google 带我到 What is the maximum size of a zip file on Windows 10 Pro 64... :
Google search for "win explorer max zip file size" - the Stack Exchange page in the result has highlights
我进一步试验了一下,这似乎是 Google Chrome 的一个功能。如果附加 #:~:text=something,它会突出显示页面上的文本到网址。 https://example.com/#:~:text=domain似乎工作正常,但仅适用于 Chrome(左侧为 Chrome Beta,右侧为 Firefox)。
The word "description" is highlighted on example.com
text与不同的字符一起用谷歌搜索有点困难,所以我找不到关于这个主题的任何东西。
要了解有关此类“URL-hacks”的更多信息,我想知道:
谷歌浏览器的这个功能叫什么?

最佳答案

滚动到文本片段
好的,在 friend 的帮助下,同时通过来自 Berto99 的评论我找到了:
显然这是一个名为 的功能Scroll To Text Fragment .是enabled by default since Chrome 80 ,但显然尚未在其他浏览器中实现。
"W3C Community Group Draft Report" 中有相当不错的例子。 .更多好的例子可以在 Wikipedia 上找到.
突出显示某个文本的第一次出现
只需追加 #:~:text=<text>到网址。文本搜索不区分大小写。
示例: https://example.com#:~:text=domain
The word "domain" is highlighted on example.com
突出显示整个文本部分
您可以使用 #:~:text=<first word>,<last word>突出显示整个文本部分。
示例: https://stackoverflow.com/questions/62161819/what-exactly-is-the-text-location-hash-in-an-url/62162093#:~:text=Apparently,Wikipedia
part of this very answer is highlighted
更先进的技术

  • 前缀和后缀如 example suggested in the repository for the suggestion https://en.wikipedia.org/wiki/Cat#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats建议的文本似乎对我不起作用(但是?我使用 Chrome 83)。
  • 您可以 style the look of the highlighted text与 CSS :target你可以 opt your website out所以这个功能不再适用了。
  • 关于google-chrome - URL 中的 `#:~:text=` 位置哈希到底是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62161819/

    相关文章:

    来自字符串的 Javascript 日期提供从 Chrome 到 Firefox 的不同输出

    javascript - chrome.windows.onFocusChanged.addListener 在选项卡切换时未触发

    java - 如何隐藏我的网址参数?

    javascript - Chrome 扩展程序在 # 后无法识别部分 URL(contentscript.js 匹配)

    html - 在 css 中标记阿拉伯文字

    jquery - 使用highlight.js 在可编辑 <code> 标记中的光标位置?在您编写代码时突出显示代码 "on the go"?

    javascript - Three.js 示例未显示在 Canvas 上

    google-chrome - 在 Chrome 扩展程序中生成下载文件的 md5/sha1/sha256 哈希

    javascript - 如何使用 get part in url with angular

    c# - 是否有更快的方法来突出显示正则表达式匹配项 (RichTextBox)