什么是URL中的`#:~:text=`位置哈希值？

Question

今天我注意到在谷歌上搜索时，有些结果会给我带来一些明显的指示来突出文本。

谷歌将我带到了以下网址：Windows 10 Pro 64位操作系统上zip文件的最大大小是多少？

https://superuser.com/questions/1305867/what-is-the-maximum-size-of-a-zip-file-on-windows-10-pro-64-bit#:~:text=4%20GB%20size%20is%20a,about%2016%20exabytes%20size%20limitation

我进一步进行了实验，这似乎是Google Chrome的一个功能。如果您在URL末尾添加#:~:text=something，它会突出显示页面上的文本。https://example.com/#:~:text=domain看起来运行良好，但只适用于Chrome (左侧为Chrome Beta，右侧为Firefox)。

单独使用文本关键词进行搜索时，由于不同字符的干扰，搜索结果较为困难。

为了获取更多有关“URL-hacks”的信息，我想知道：
谷歌浏览器中这个功能被称作什么？

- palsch

---

我可以在这个网站上找到它和其他内容：https://chromestatus.com/feature/4733392803332096 - Alberto Sinigaglia

@Makyen，您能否详细说明一下为什么您认为这个问题不适合在此网站上提问？我确实认为这是一个边缘案例，但是所涉及的功能名称似乎非常不为人知，但对于技术实现却是必需的，而这正是 Stack Overflow 可以帮助解决的问题。 - palsch

这是否是“一个实际的、可回答的、在软件开发中独特的问题”？你实际上是在问“Google Chrome 的这个功能叫什么？”，也就是“我的浏览器的这个功能叫什么？”或者可以换成“URL 的这一部分叫什么？”这些不是编程问题，而是一般技术问题。关闭这个问题并不意味着它没有用处，它只是不适合在这里讨论。 - Makyen

@Makyen 如果是这样，您认为我的问题“它是否是任何RFC或Web标准的一部分”会更好地表达，并反转重复链接方向吗？因为如果我们选择忘记问题中使用的特定语言，而是专注于所提出的想法/主题，它与Web开发密切相关。想想看，如果我问URL主机/端口/路径/查询/片段（RFC3986），那些是否属于离题？这个问题只是在询问某种类型的片段字符串的具体内容，这使它成为离题，如何解释？ - zypA13510

我不明白为什么它被关闭了，应该重新打开。 - Hebe

Answer 1

文本片段滚动

好的，有一位朋友和Berto99的评论帮助下，我找到了它：

显然这是一个名为文本片段滚动的功能。它自Chrome 80版本起默认启用,但显然其他浏览器尚未实现。

在“W3C社区草案报告”中有很好的例子。更多优秀的例子可以在维基百科上找到。

突出显示特定文本的第一个出现

只需在URL后添加#:~:text=<text>。文本搜索不区分大小写。

例如：https://example.com#:~:text=domain

突出显示整个文本部分

您可以使用#:~:text=<first word>,<last word>来突出显示整个文本部分。

例如：https://dev59.com/3VIG5IYBdhLWcg3w8Wiu#62162093

更高级的技巧

• 像在建议库中建议的例子一样在前缀和后缀中添加内容，如所提出的https://en.wikipedia.org/wiki/Cat#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats文本对我似乎不起作用（尚未？我使用Chrome 83）。
• 您可以使用CSS :target来样式化高亮文本的外观，并且您可以选择退出您的网站，因此该功能不再适用于它。

- palsch

---

前缀和后缀确实起到作用。然而，这个例子并不行，因为那段文字自2019年10月以来就不存在于维基百科中了。这说明使用页面内容进行滚动和高亮显示的一个危险。 - mgkrebbs

“使用页面内容进行滚动和突出显示的危险之一”并不是一个“危险”，它只是一种权衡。最坏的情况下，就是无法进行精细定位，也就是和普通的#片段链接一样。请注意：页面的结构也可能发生变化，这也会使普通片段的定位变得脆弱。但这没关系。链接有时会失效，并不意味着它们是“危险”的。这是网络固有的、普遍的属性，我们不得不处理它。 - Sz.

如果有人像我一样想知道如何关闭这个烦人的功能，Chrome浏览器中的标志是“启用文本片段锚定点”。-- chrome://flags/#enable-text-fragment-anchor - qJake

“chrome://flags/#enable-text-fragment-anchor”在Chrome 85中不可用。 - hongsy

有什么办法在JavaScript中读取这个吗？ - arunwithasmile