网页的内容锚点

说起 HTML 网页的锚点，通常是网站软件自动为子标题添加 id，比如〈简介〉章节的 HTML 源码是 <h2 id="简介">简介</h2>，那么创建个值为 #简介 的链接，进入或点击后就能跳转到〈简介〉章节。

但这种锚点显然不够用，Chrome 对此给出了解决方案，只要选中一段文字，然后右键选择「复制指向突出显示的内容的链接」功能，就能创建一条「内容锚点」链接。比如：https://example.com/#:~:text=内容。

可以看到 #:~:text=内容 这段有些复杂的内容，其中的 :~: 表示「片段指令」，用来提示浏览器需要执行指令，而不是定位到 :~: 开头的 id。然后 text= 及其后面的值，表示需要定位的文字。（细节可以查看 MDN 的 text fragments 页面）

目前该定位功能，已被全部主流浏览器所支持。但右键菜单里的复制「内容锚点」链接选项，最初仅在 Chrome，及其 Chromium 存在。好在最近 Safari 18.2 添加了该功能，目前就差 Firefox 了。

虽然 Firefox 没有相关计划，但也有方法。比如 Link to Text Fragment 扩展支持各大浏览器，它会在右键菜单里添加个选项，应该跟原生实现差不多。也可以用 Daniel Jalkut 制作的小书签来实现，虽然功能不全。因为如果选中的内容，在网页里出现过多次，那么会添加一些用来参照的上下文，让浏览器确定究竟在什么位置。

附言：内容锚点其实跟搜索功能，即 Ctrl + F 键呼出的搜索栏很相似，都需要页面能一次性加载完。但如果网页弄了什么异步加载、Canvas 等复杂操作，比如 Reddit、Microsoft Excel 网页版等，那么锚点与搜索可能就不会生效了。

#原理