比“Ctrl+F”更聪明：直接链接到网页内容

JinSo
217 阅读6分钟

可以测试下面链接，体验下文本片段：

developer.mozilla.org/zh-CN/docs/…

同时可以查阅 MDN 关于 Text Fragment 的文档：

文本片段 - URIs | MDN

历史上，我们只能通过页面的某个部分有ID来链接到该部分。我们只需要链接到URL并在文档片段（ID）后添加。如果我们想链接到页面的某个特定部分，我们需要锚定该部分以便链接。直到我们得到了文本片段的祝福！

什么是文本片段（Text Fragment）？

文本片段是现代网络平台的强大功能，它允许精确链接到网页上的特定文本，而无需添加锚点！这个功能由::target-text CSS伪元素补充，提供了一种样式化高亮显示文本的方法。

文本片段通过在URL末尾添加特殊语法来工作；就像我们过去在哈希符号后添加ID一样。浏览器解释这部分URL，搜索页面上指定的文本，然后滚动到并高亮显示该文本（如果支持文本片段）。如果用户尝试通过按Tab键导航文档，焦点将在文本片段后的下一个可聚焦元素上移动。

我们如何使用它？

以下是文本片段URL的基本语法：

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

在哈希符号后，我们添加这个特殊语法:~:，也称为_片段指令_，然后是text=，后面跟着：

  1. prefix-：一个由连字符前缀的文本字符串，指定应该立即在链接文本之前出现的文本。这有助于浏览器在多个匹配的情况下链接到正确的文本。这部分不会被高亮显示。
  2. textStart：你正在高亮显示的文本的开始。
  3. textEnd：你正在高亮显示的文本的结束。
  4. suffix：一个连字符后跟的文本字符串，其行为类似于前缀，但出现在文本之后。在多个匹配存在时也有帮助，并且不会被高亮显示与链接文本一起。

例如，以下链接：

https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments#:~:text=without%20relying%20on%20the%20presence%20of%20IDs

我们使用的文本片段是“without relying on the presence of IDs”，但它是编码的。如果你点击这个链接，它应该看起来像这样：

image (1).png

我们还可以设置startText和endText来高亮显示一段文本。考虑以下来自同一URL的示例：

https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments#:~:text=using%20particular,don't%20control

我们使用的文本片段是“using particular”后面跟着一个逗号，然后是“don’t control”。如果你点击这个链接，它应该看起来像这样：

image (2).png

我们还可以通过对多个文本使用和符号来高亮显示多个文本。考虑以下示例：

https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments#:~:text=using%20particular&text=it%20allows

如果你点击这个链接，它应该看起来像这样：

image (3).png

关于文本片段的一个有趣的行为是，如果你链接到通过 find-in-page 功能可发现的隐藏内容（例如，具有隐藏属性设置为until-found的元素的子元素，或者关闭的details元素的内容），隐藏的内容将变得可见。让我们通过链接到 Scott O’Hara 博客上的这篇文章来查看这种行为。该博客包含了默认关闭的details元素。

image (4).png

如果我们链接到details元素内的文本片段，它将自动打开：

https://www.scottohara.me/blog/2022/09/12/details-summary.html#:~:text=Oh%20hi%20there.%20Forget%20your%20summary,%20didja

image (5).png

注意这种行为只在Google Chrome中可用，因为它是唯一支持可发现内容的浏览器。（Edge 也可用）

样式化高亮片段

如果浏览器支持文本片段，我们可以使用::target-text伪元素来改变高亮文本的样式：

::target-text {
    background-color: yellow;
}

注意我们只允许改变以下属性：

  • color
  • background-color
  • text-decoration及其相关属性（包括text-underline-position和text-underline-offset）
  • text-shadow
  • stroke-color, fill-color, 和 stroke-width
  • 自定义属性

浏览器支持和回退行为

文本片段目前在所有浏览器中都得到支持。::target-text伪元素尚未在Safari中支持，但在技术预览版本中可用。如果浏览器不支持此功能，它将优雅地降级，页面将加载而不包括高亮或滚动到文本。

高亮的默认样式因浏览器而异。高亮的颜色在不同的浏览器中是不同的。在Safari中，高亮区域更大，跨越整个行高。在Firefox和Chrome中，只有文本被高亮，行之间的空间是空的。

image (6).png

我们可以使用document.fragmentDirective来检测功能是否受支持。如果支持，它将返回一个空的FragmentDirective对象；如果不支持，它将返回undefined。

结语

我第一次遇到文本片段是通过Google搜索结果生成的链接。最初，我以为这是Chrome特有的功能，而不是更广泛的网络标准的一部分。然而，我很快意识到这个功能实际上是基于开放网络构建的，任何选择实现它的浏览器都可以使用。

我希望能更广泛地看到这项功能被使用，特别是由负责任的生成性AI系统使用。想象一下，AI能够提供直接的、上下文敏感的链接到你感兴趣的确切内容，使用文本片段进行精确引用。这不仅会增加透明度，还会在使用AI生成内容时改善用户体验。

展望未来，如果文本片段对所有用户都更易于访问，而不仅仅是那些具有技术知识的用户，那将是非常棒的。如果浏览器提供了内置功能，允许非技术用户轻松地高亮文本并生成链接到特定段落，会怎样？这可以通过原生浏览器功能或甚至是简单的浏览器扩展来实现——无论如何，这将使深度链接对每个人都变得轻松。

最后，我要衷心感谢 Hannah Olukoye 和 Jens Oliver Meiert 抽出时间分享他们宝贵的反馈和更正。

更新，2024年10月20日

事实证明，生成链接到特定文本片段的能力已经内置在基于Chromium的浏览器中，正如Hostam Sultan在X（前Twitter）上澄清的那样。如果你使用的是Chrome，只需高亮一些文本，右键点击，你将在上下文菜单中找到“复制高亮链接”的选项。

alfy.blog/2024/10/19/… to specific-,paragraphs,-with ease%3F This

image (7).png

额外资源

参考资料

avatar
文章
阅读
粉丝