如何使用纯JavaScript检测#:~:text=文本片段？

当用户通过谷歌精选摘要的链接进入页面时，地址栏里的#:~:text=...属于文本片段标识符（Text Fragments），它和传统的锚点哈希（#）不是同一类内容，浏览器会单独解析并高亮对应文本，不会把这部分内容纳入window.location.hash或document.URL的常规哈希处理中，所以你之前用那两个属性拿不到是正常的。

纯JS完全可以实现检测，用专门的API即可：

• 使用window.location.fragmentDirective属性，它会返回一个FragmentDirective对象，其中的text字段就是文本片段的具体信息（包含起始文本、结束文本或精确匹配文本）。

示例代码：

// 检测是否存在文本片段
if (window.location.fragmentDirective) {
  const textFragment = window.location.fragmentDirective.text;
  console.log("检测到文本片段：", textFragment);
  // 根据片段类型做不同处理
  if (textFragment.start && textFragment.end) {
    console.log(`起始匹配文本：${textFragment.start}，结束匹配文本：${textFragment.end}`);
  } else if (textFragment.exact) {
    console.log(`精确匹配文本：${textFragment.exact}`);
  }
} else {
  console.log("未检测到文本片段");
}

注意：这个API目前仅在Chrome、Edge等Chromium内核浏览器中支持，若需要兼容其他浏览器，可以添加简单的降级判断逻辑。

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