文本片段

从历史上看，Web 的关键特性之一始终是它能够在不同的文档之间提供链接——正是它构成了万维网，一个网络。

• 您可以通过链接到其 URL 来链接到文档的顶部，例如
  • https://mdn.org.cn/en-US/docs/Web/HTML/Element/a.
• 您可以通过链接到其 URL 加上该部分的文档片段 (ID) 来链接到文档的特定部分，例如
  • https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#browser_compatibility.

链接到特定文档片段的问题在于，链接页面的作者需要放置一个锚点才能真正链接到。上面的第二个示例链接到一个具有 ID 为 browser_compatibility 的h2 元素。

<h2 id="browser_compatibility">
  <a href="#browser_compatibility">Browser compatibility</a>
</h2>

如果更改或删除了 ID，则会忽略文档片段，并且链接仅链接到页面的顶部。就优雅降级而言，这是合理的，但如果链接的作者可以完全控制他们链接到的位置，而无需依赖页面作者，那可以说会更好。

文本片段使之成为现实——它们允许链接作者以灵活的方式指定要链接到的文本内容，而不是文档片段。

与文档片段类似，文本片段附加在哈希符号 (#) 之后的 URL 上。但是语法略有不同。

https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

需要理解的关键部分如下：

:~:

也称为片段指令，此字符序列告诉浏览器接下来的是一个或多个用户代理指令，这些指令在加载过程中会从 URL 中剥离，以便作者脚本无法直接与它们交互。用户代理指令也称为指令。

text=

文本指令。这为浏览器提供了一个文本片段，定义了要在链接文档中链接到的文本。

textStart

指定链接文本开头的文本字符串。

textEnd 可选

指定链接文本结尾的文本字符串。

prefix- 可选

一个文本字符串，后跟一个连字符，指定什么文本应该紧接在链接文本之前，只允许在其间使用空格。这有助于浏览器在有多个匹配项的情况下选择正确的链接文本。

-suffix 可选

一个连字符，后跟一个文本字符串，指定什么文本应该紧接在链接文本之后，只允许在其间使用空格。这有助于浏览器在有多个匹配项的情况下选择正确的链接文本。

支持的浏览器将滚动到并突出显示链接文档中第一个与指定指令匹配的文本片段。请注意，可以通过使用与号 (&) 字符分隔它们，在同一个 URL 中指定多个要突出显示的文本片段。

• 用于 textStart、textEnd、prefix- 和 -suffix 值的文本字符串需要进行百分比编码。
• 匹配不区分大小写。
• 各个 textStart、textEnd、prefix- 和 -suffix 字符串需要完全位于同一个块级元素内，但完整的匹配可以跨越多个元素边界。
• 出于安全原因，此功能要求链接在 noopener 上下文中打开——您需要在<a> 元素中添加 rel="noopener"，并在使用此功能时在window.open() 调用中添加 noopener。
• 文本片段仅在完全（非同页面）的用户启动导航上调用。
• 文本片段仅应用于主框架；不会在<iframe> 内搜索文本，并且 iframe 导航不会调用文本片段。
• 对于希望选择退出的站点，基于 Chromium 的浏览器支持一个文档策略 标头值，他们可以发送该值，以便用户代理不会处理文本片段。
  http

  Document-Policy: force-load-at-top
  

• https://example.com#:~:text=for 滚动到并突出显示文档中 for 文本的第一个实例。
• https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#:~:text=human 滚动到并突出显示文档中 human 文本的第一个实例。
• https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL 滚动到并突出显示文档中 linked URL 文本的第一个实例。

• https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#:~:text=human,URL 滚动到并突出显示以 human 开头并以 URL 结尾的文本字符串的第一个实例。
• https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL,defining%20a%20value 滚动到并突出显示以 linked URL 开头并以 defining a value 结尾的文本字符串的第一个实例。请注意突出显示的文本如何跨越多个块级元素。

• https://example.com#:~:text=asking-,for 滚动到并突出显示文档中 for 文本的第二个实例。
• https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#:~:text=sent-,referrer 滚动到并突出显示 referrer 文本的第一个实例，其前面紧接 sent 文本。这是文档中 referrer 的第 5 个实例；如果没有前缀，则会突出显示第一个实例。
• https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL,-'s%20format 滚动到并突出显示 linked URL 文本的第一个实例，其后面紧接 's format 文本。这是文档中 linked URL 的第 5 个实例；如果没有后缀，则会突出显示第一个实例。
• https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#:~:text=downgrade:-,The%20Referer,be%20sent,-to%20origins 滚动到并突出显示 The Referer ... be sent 文本的实例，其前缀为 downgrade:，后缀为 to origins。这说明了一个更复杂的示例，其中前缀/后缀用于缩小到您要链接到的特定文本实例。例如，尝试删除前缀，看看匹配的是什么。

您可以通过使用与号 (&) 字符分隔它们来指定在同一 URL 中突出显示的多个文本片段。让我们看几个例子。

• https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#:~:text=Causes&text=linked 滚动到并突出显示 Causes 和 linked 文本字符串的第一个实例。
• https://mdn.org.cn/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL,-'s%20format&text=Deprecated-,attributes,attribute 滚动到并突出显示两个文本实例。
  • 其后面紧接 's format 文本的 linked URL 文本的第一个实例。
  • 以 attributes 开头并以 attribute 结尾的文本字符串的第一个实例，其前缀为 Deprecated。

如果您没有看到一个或多个文本片段突出显示，并且您确定语法正确，则您可能只是突出显示了与您预期不同的实例。它可能已突出显示，但不在屏幕上。

浏览器可以自由地以任何他们选择的默认方式设置突出显示文本的样式。CSS 伪元素模块级别 4 定义了一个伪元素，::target-text，它允许您指定自定义样式。

例如，在我们的滚动到文本演示 中，我们有以下 CSS。

::target-text {
  background-color: rebeccapurple;
  color: white;
}

尝试在支持的浏览器中访问上述链接以查看其效果。

可以通过 Document.fragmentDirective 属性访问的FragmentDirective 对象可用于测试浏览器是否支持文本片段。

尝试在支持的浏览器的开发者工具中运行以下代码，在包含一个或多个匹配文本片段的选项卡中运行。

document.fragmentDirective;
// returns an empty FragmentDirective object, if supported
// undefined otherwise

目前，此功能主要用于特性检测。将来，FragmentDirective 对象可能会包含其他信息。

FragmentDirective

表示文本片段的对象。目前为空，主要用于特性检测。

Document.fragmentDirective

返回当前文档的FragmentDirective。

::target-text

表示当前文档中突出显示的文本片段。它允许作者自定义文本片段的样式。

• 大胆链接前所未有的地方：文本片段