How to Share Links to Specific Text Phrases

🔑 增強重點摘要

•無需網頁作者預先設定 ID 或命名錨點，即可實現深度連結，這與傳統的網頁錨點連結方式不同，極大地提升了連結的靈活性和易用性。
•支援更精確的連結語法，包含可選的 prefix-、end 和 -suffix 參數，這有助於在頁面中存在多個相同文本片段時，更準確地定位目標文本，或指定一個文本範圍。
•單一 URL 中可指定多個文本片段進行高亮顯示，使用者只需在 URL 中使用 & 符號分隔多個 text= 參數即可。
•曾引發跨來源資訊洩露的潛在隱私安全疑慮，促使瀏覽器實施了如要求使用者啟動導航、在 noopener 上下文開啟連結以及文本匹配僅在詞語邊界發生等安全限制。
•開發者可透過檢查 document.fragmentDirective 屬性來檢測瀏覽器是否支援文本片段功能，並且網頁作者可以使用 ::target-text 偽元素來自訂高亮文本的樣式。

🛠️ 技術深入

語法結構：文本片段的 URL 語法為 #:~:text=[prefix-,]start[,end][,-suffix]，其中方括號表示可選參數。
片段指令分隔符：:~: 是片段指令的分隔符，它告知瀏覽器接下來是使用者代理指令。此部分在頁面載入時會從 URL 中移除，以避免與作者腳本直接互動。
參數編碼：所有參數值（包括 start、end、prefix- 和 -suffix）必須進行百分比編碼，特別是連字號 -、& 符號 & 和逗號 ,，以避免被解釋為語法的一部分。
匹配規則：文本匹配不區分大小寫。單個 start、end、prefix- 和 -suffix 字串必須完全位於同一個塊級元素內，但完整的匹配可以跨越多個元素邊界。
安全機制：為限制跨來源資訊洩露，跨來源導航需要使用者啟動並在 noopener 上下文中進行。文本匹配僅在詞語邊界發生。網站可透過發送 Document-Policy HTTP 標頭來選擇退出此功能。
功能檢測：開發者可透過檢查 document.fragmentDirective 屬性來檢測瀏覽器是否原生支援文本片段功能。
高亮樣式：瀏覽器預設會高亮匹配的文本，通常與 <mark> HTML 元素樣式相似（例如黃色背景）。網頁作者可使用 ::target-text 偽元素自訂高亮樣式。
Polyfill 支援：存在一個 Polyfill 庫，用於在不原生支援文本片段的瀏覽器中提供此功能，例如 Chromium for iOS 和相關瀏覽器擴充功能。

🔮 前景展望AI analysis grounded in cited sources

提升網路內容的可發現性和引用精確度。

搜尋引擎可以更精確地引導使用者到頁面上的特定答案，學術引用和協作分享將因此更加高效。

促進新的瀏覽器功能和網頁互動模式。

片段指令的設計允許未來添加更多使用者代理指令，例如翻譯提示，而不破壞現有內容，為瀏覽器功能擴展提供了基礎。

網頁內容的持久性挑戰將更加突出。

由於連結依賴於實際文本內容，網頁更新或內容變更可能導致文本片段連結失效，儘管它們會優雅地降級為普通頁面連結。

⏳ 時間線

1960s

超文本先驅 Ted Nelson 構想了深度連結到特定文本的功能。

2019-02

Google 提出「Scroll To Text Fragment」功能，允許連結到網頁上的特定詞語或短語。

2020-02

Chrome 80 首次引入「Scroll to Text Fragment」功能，成為第一個主要瀏覽器實作此功能。

2020-06

W3C 的 Web Platform Incubator Community Group (WICG) 發布了「URL Fragment Text Directives」規範草案。

2022-10

Safari 瀏覽器開始支援文本片段功能。

2024-10

Firefox 131 引入對文本片段的部分支援。

如何分享指向特定文字段落的連結

⚡ 30-Second TL;DR

關鍵要點

🧠 深度解析

🔑 增強重點摘要

🛠️ 技術深入

🔮 前景展望AI analysis grounded in cited sources

⏳ 時間線

📎 來源 (21)

👉相關動態