询问#:~:text=机制及Chrome实现Google’s featured snippets高亮的方法

机制说明 #

你提到的#:~:text=后缀对应的是浏览器原生支持的**滚动到文本片段（Scroll to Text Fragment）**特性，该特性不需要依赖javascript:伪协议，仅通过URL后缀即可实现指定文本自动高亮、页面自动滚动到对应位置的效果。

你遇到的「直接访问URL无高亮效果」是浏览器的默认安全限制：目前主流浏览器默认仅在跨域导航跳转（比如从谷歌搜索结果页跳转到目标站）、或者用户点击带该后缀的书签/网页内链接时才会触发高亮，直接手动在地址栏输入URL回车不会触发，避免该特性被滥用做用户跟踪。

实现方法 #

兼容情况 #

Chrome 80及以上版本、Edge 83及以上版本、Safari 15.4及以上版本、Firefox 113及以上版本都原生支持该特性，不需要额外配置或安装扩展。

语法规则 #

• 单句匹配：直接在URL末尾加#:~:text=URL编码后的目标文本即可，比如要匹配页面里的「ValueError报错」，编码后后缀为#:~:text=ValueError%E6%8A%A5%E9%94%99
• 段落匹配：如果要高亮一整段内容，可以用#:~:text=段落开头文本,段落结尾文本的格式，你给出的谷歌搜索跳转链接用的就是这种语法
• 精确匹配：如果页面内有重复内容，可以加前后缀缩小匹配范围，语法为#:~:text=前缀文本-,目标文本,-后缀文本，浏览器只会匹配前后缀中间的对应内容

如果需要实现你提到的「URL后缀定义其他自动操作」，目前没有通用的原生浏览器支持，可通过自行开发浏览器扩展自定义解析URL哈希规则实现，该方案仅在安装了对应扩展的浏览器上生效。

官方文档 #

该特性是W3C Web孵化器社区组推出的正式规范，你可以在W3C官方规范库查询《Scroll to Text Fragment》标准全文，也可以在Chrome官方开发者文档中查询该特性的实现说明。

内容的提问来源于stack exchange，提问作者Pablo LION