文本片段
文本片段可以直接链接到网页中的特定文本，而无需页面作者添加 ID。它们在 URL 片段中使用特殊语法。此功能允许您创建到您不控制且可能没有相关 ID 的内容的深度链接。通过直接指向特定词语，还可以使共享链接更有用。浏览器在突出显示链接文本的方式上可能有所不同——通常，文本会被滚动到视图中并用颜色高亮显示。
概念与用法
历史上，Web 的关键功能之一一直是其在不同文档之间提供链接的能力——这就是使其成为“Web”的原因。
- 您可以通过链接到文档的 URL 来链接到文档的顶部，例如：
- 您可以通过链接到文档的 URL 加上该部分的文档片段（ID）来链接到文档的特定部分，例如：
链接到特定文档片段的问题在于，链接页面的作者需要放置一个锚点来实际进行链接。上面的第二个示例链接到一个 ID 为 browser_compatibility 的 h2 元素。
<h2 id="browser_compatibility">
<a href="#browser_compatibility">Browser compatibility</a>
</h2>
并非所有文档都有这样的锚点，即使有，链接到一个标题可能也比直接链接到您引用的特定文本要不明显得多。这就是文本片段的作用：它们允许链接作者完全控制要链接到的文本，而无需目标文档中的任何特殊标记。例如，搜索引擎可能在其搜索结果中引用特定句子，单击链接将直接带您到该句子。
但是，文本片段也有一个局限性：文档中的文本不如文档结构稳定。如果链接文档中的文本被更新，片段将不再匹配，浏览器将导航到页面顶部。这对于搜索结果中的瞬时链接来说是可以的，但如果您打算让链接随着时间的推移而工作，文档片段可能更可靠。
语法
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
文本片段是一种 URL 片段，写在 # 之后。要理解的关键部分如下：
:~:-
也称为片段指令，这一系列字符告诉浏览器接下来的是一个或多个用户代理指令，它们在加载过程中从 URL 中剥离，以便作者脚本无法直接与它们交互。用户代理指令也称为指令。
text=-
一个文本指令。这向浏览器提供了一个文本片段，定义了在链接文档中要链接的文本。
textStart-
一个指定链接文本开头的文本字符串。
textEnd可选-
一个指定链接文本结尾的文本字符串。
prefix-可选-
一个后跟连字符的文本字符串，指定什么文本应紧跟在链接文本之前，只允许两者之间存在空格。这有助于浏览器选择正确的链接文本，在有多个匹配项的情况下。
-suffix可选-
一个后跟文本字符串的连字符，指定什么文本应紧跟在链接文本之后，只允许两者之间存在空格。这有助于浏览器选择正确的链接文本，在有多个匹配项的情况下。
支持的浏览器将滚动到并高亮显示链接文档中与指定指令匹配的第一个文本片段。请注意，可以通过分隔符（&）字符在同一 URL 中指定多个要高亮的文本片段。
用法说明
-
用于
textStart、textEnd、prefix-和-suffix值的文本字符串需要进行百分比编码。此外，标准要求 URL 安全的连字符'-'也进行类似百分比编码。 -
匹配不区分大小写。
-
单个
textStart、textEnd、prefix-和-suffix字符串需要完全位于同一个块级元素内，但完整的匹配可以跨越多个元素边界。 -
出于安全原因，在使用此功能链接到跨域页面时，应在
noopener上下文中打开链接——您需要将rel="noopener"添加到您的<a>元素中，并在使用此功能时将noopener添加到您的window.open()调用中。 -
文本片段仅在用户发起的导航时调用。
-
文本片段仅应用于主框架；文本将不会在
<iframe>中搜索，并且 iframe 导航不会调用文本片段。 -
对于希望选择退出的网站，基于 Chromium 的浏览器支持一个 Document Policy 标头值，它们可以发送该值，以便用户代理不会处理文本片段。
httpDocument-Policy: force-load-at-top
注意：如果提供的文本片段在链接文档中未匹配到任何文本，或者浏览器不支持文本片段，则整个文本片段将被忽略，并链接到文档顶部。
示例
带有 textStart 的文本片段
- https://example.com/#:~:text=for 滚动到并高亮显示文档中文本
for的第一个实例。 - https://mdn.org.cn/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=human 滚动到并高亮显示文档中文本
human的第一个实例。 - https://mdn.org.cn/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL 滚动到并高亮显示文档中文本
linked URL的第一个实例。
textStart 和 textEnd
- https://mdn.org.cn/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=human,URL 滚动到并高亮显示以
human开头并以URL结尾的文本字符串的第一个实例。 - https://mdn.org.cn/en-US/docs/Web/HTML/Reference/Elements/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/Reference/Elements/a#:~:text=sent-,referrer 滚动到并高亮显示文本
referrer的第一个实例，该实例前面紧跟着文本sent。这是文档中referrer的第 5 个实例；如果没有前缀，则会高亮显示第一个实例。 - https://mdn.org.cn/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format 滚动到并高亮显示文本
linked URL的第一个实例，该实例后面紧跟着文本's format。这是文档中linked URL的第 5 个实例；如果没有后缀，则会高亮显示第一个实例。 - https://mdn.org.cn/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=downgrade:-,The%20Referer,be%20sent,-to%20origins 滚动到并高亮显示文本
The Referer ... be sent的实例，该实例前面有downgrade:作为前缀，后面有to origins作为后缀。这说明了一个更复杂的示例，其中使用前缀/后缀来精确定位您要链接到的特定文本实例。例如，尝试删除前缀，看看匹配了什么。
带多个文本片段的 URL
您可以通过分隔符（&）字符在同一 URL 中指定多个要高亮的文本片段。让我们看几个例子：
- https://mdn.org.cn/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=Causes&text=linked 滚动到并高亮显示文本字符串
Causes和linked的第一个实例。 - https://mdn.org.cn/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format&text=Deprecated-,attributes,attribute 滚动到并高亮显示两个文本实例：
- 文本
linked URL的第一个实例，后面紧跟着文本's format。 - 以
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 对象可能会包含其他信息。
参考
API
FragmentDirective-
表示文本片段的对象。目前为空，主要用于功能检测。
Document.fragmentDirective-
返回当前文档的
FragmentDirective。
CSS
::target-text-
表示当前文档中高亮显示的文本片段。它允许作者自定义文本片段的样式。
规范
| 规范 |
|---|
| URL Fragment Text Directives # fragmentdirective |
| CSS 伪元素模块 Level 4 # selectordef-target-text |
浏览器兼容性
html.elements.a.text_fragments
加载中…
api.FragmentDirective
加载中…
css.selectors.target-text
加载中…