Smarter than ‘Ctrl+F’: Linking Directly to Web Page Content

TL;DR

文本片段是一种现代Web平台功能，允许在不需要添加锚点的情况下，精确地链接到网页中的特定文本。它通过在URL末尾追加特殊语法来工作，浏览器解释该语法，搜索页面上的指定文本，并滚动到并高亮显示该文本。文本片段支持各种语法，包括指定文本前后的文本字符串和要高亮显示的文本范围。它还支持样式高亮文本片段和浏览器支持检测。

Summary

  1. 文本片段简介：文本片段是一种现代Web平台的功能，允许在不需要添加锚点的情况下，精确地链接到网页中的特定文本。

  2. 文本片段的工作原理：
    • 文本片段通过在URL末尾追加特殊语法来工作。
    • 浏览器解释该语法，搜索页面上的指定文本，并滚动到并高亮显示该文本。
    • 如果用户尝试通过按Tab键导航文档，焦点将移动到文本片段后的下一个可聚焦元素。
  3. 文本片段的语法：
    • https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
    • prefix-：指定文本前面的文本字符串。
    • textStart：要高亮显示的文本的开始。
    • textEnd：要高亮显示的文本的结束。
    • -suffix：指定文本后面的文本字符串。
  4. 使用文本片段的示例：
    • 链接到单个文本片段。
    • 链接到文本范围。
    • 链接到多个文本片段。
  5. 文本片段的行为：
    • 如果链接到隐藏内容，内容将变得可见。
    • 只有Google Chrome支持发现内容。
  6. 样式高亮文本片段：
    • 使用::target-text伪元素来更改高亮文本的样式。
    • 只允许更改某些属性，例如颜色、背景颜色、文本装饰等。
  7. 浏览器支持和回退行为：
    • 文本片段在大多数浏览器中受支持。
    • 如果浏览器不支持文本片段，页面将加载而不高亮显示或滚动到文本。
    • 可以使用document.fragmentDirective检测浏览器是否支持文本片段。
  8. 结论：
    • 文本片段是一种强大的功能，可以提高用户体验。
    • 希望看到更多的浏览器支持和更广泛的使用。