URL后缀#:~:text=实现文本高亮的技术原理及文档查询

实现原理 #

• 这并非CSS功能，而是片段文本导航（Fragment Text Navigation），属于URL片段标识符的扩展用法
• 浏览器解析URL时，识别到:~:text=前缀后，会在页面DOM中匹配指定的目标文本，找到后自动滚动到该文本所在位置，并通过内置样式为文本添加高亮背景
• 匹配逻辑默认优先查找连续的文本序列，且区分大小写；部分浏览器支持通过添加*前缀实现不区分大小写匹配，例如#:~:text=*,top questions
• 高亮样式是浏览器内置的原生样式，无需页面额外引入CSS代码，通常表现为黄色背景的高亮效果

官方文档查询 #

• 该功能由WICG（Web Incubator Community Group）主导制定规范，最初命名为「Text Fragments」
• 可在W3C社区规范文档中查询到完整定义，包括:~:text的语法规则、文本匹配逻辑以及浏览器的预期行为
• 主流支持该功能的浏览器（如Chrome、Edge、Safari等）的官方开发者文档中，也设有对应专题章节讲解该功能的细节

内容的提问来源于stack exchange，提问作者Juri Rudi