URL 中的 `#:~:text=` 如何突出显示文本？答案

【问题标题】：How does `#:~:text=` in URL works to highlight text?URL 中的 `#:~:text=` 如何突出显示文本？
【发布时间】：2020-11-09 07:56:44
【问题描述】：

TL;DR

某些浏览器如何/为什么能够在 HTML 正文中搜索和突出显示 URL 中后跟 #:~:text= 的文本？

说明

有一天我在谷歌上搜索something，这让我找到了Quora 的result。我观察到有 2 个句子以黄色突出显示，它们是上述参数之后 URL 的一部分。我以为这将是 Quora 的 SEO 功能之类的，但是，在 Linkedin 和 Medium 等上也发现了这个。

我想知道：

这个突出显示叫什么？为什么/如何工作？
这似乎是特定于浏览器的。什么种类的浏览器支持这个？
它似乎可以在 Chrome 和 Edge 上运行；但不适用于 Firefox、Safari 和 IE。
前端程序员是否需要在代码中加入某些内容才能让搜索引擎在其网页上突出显示内容？（基于搜索引擎实际附加用户查询预测的相关字符串的假设）

【问题讨论】：

这也发生在这里。见Strange highlighting for a few seconds。
您在 stackoverflow 上看到的淡化突出显示是无关的，它是链接到特定答案时的站点功能
另见：What exactly is the `#:~:text=` location hash in an URL?

标签： html url browser full-text-search highlight

【解决方案1】：

虽然文本片段仅在最新的 Google Chrome（以及最新版本的基于 Chromium 的浏览器，例如新的 Microsoft Edge）中本地实现，但似乎有一个浏览器扩展/插件可以在 Firefox 和野生动物园：https://github.com/GoogleChromeLabs/link-to-text-fragment

它似乎使用 #ref-for-fragment-directive:~:text= 和其他参数（而不仅仅是简单的 @987654327 @）。

奇怪的是，该扩展程序也可用于 Chrome 和 Edge (!)。

更新：我正在 Firefox 开发者版上对其进行测试，但它对我不起作用。

【讨论】：

该扩展在 Chrome 中可用，主要是允许通过选择文本和使用上下文菜单生成这些类型的链接 - 非常方便！事实上，这个功能已经内置在 Chrome 中——你现在可以使用 chrome://flags/#copy-link-to-text 来试用它

【解决方案2】：

突出显示称为Text Fragments。它是最近添加到 Chrome 80 的一项新功能。它通过在 URL 哈希中指定文本 sn-p 来工作。
是的，它是特定于浏览器的。
不，您在点击 Google 搜索结果中的链接时获得的体验是精选片段的一部分，由算法确定。您无法在代码中加入任何内容来提示搜索引擎突出显示页面上的文本。

网站管理员不需要标记。这会自动发生，对 HTML 页面使用滚动到文本 https://chromestatus.com/feature/4733392803332096。另请参阅背景在这里：https://support.google.com/webmasters/answer/6229325

来源：

【讨论】：

很好的答案。只是一些补充：它现在仅适用于 Chromium，但旨在成为 Web 平台的一个功能，并且可以跨浏览器进行互操作。请参阅 Mozilla 的 standards-positions 和 Safari 的 webkit-dev。另一个链接是 WICG repo 正在孵化该功能。