【Develop】解析 URL Text Fragments #:~:text=

本篇重點

• Text Fragments 允許透過 URL 直接定位並 highlight 網頁中的特定文字，無需依賴 HTML ID 屬性
• 了解 Text Fragments 和傳統錨點的差異
• 語法結構支援單詞、範圍及上下文定位
• 要求導航必須由使用者觸發（例如點擊連結或在網址列輸入），禁止透過腳本或是 iframe 加載
• 可透過 ::target-text 客製化反白樣式，不影響 DOM 結構

---

Text Fragments（文字片段）全名為 Scroll to Text Fragment。此功能允許使用者透過特定的 URL 格式，直接連結到網頁中某段特定的文字，而不是僅限於連結到頁面頂部或具有特定 ID 的元素。

和傳統錨點 (#id) 的差異：

• 傳統 #id： 依賴網頁開發者在 HTML 元素上設置 id 屬性（例如 <h2 id="section1">），若目標位置沒有 ID，則無法精確連結。
• Text Fragments： 不需要任何 HTML 標記或屬性，只要網頁上有該段文字，就可透過 URL 參數進行定位和 highlight。

運作方式

當瀏覽器接收到包含 Text Fragment 的 URL 時

1. 解析 URL：瀏覽器識別 URL 尾端的片段指令 #:~:text=（不會被送至伺服器，僅影響用戶端行為）。
2. 內容比對：瀏覽器在 DOM 載入後，搜尋和參數相符的文字內容。
3. 滾動和 highlight：
   • 若找到匹配文字，瀏覽器會自動滾動頁面，將該段文字垂直置中於視窗的可見範圍內。
   • 瀏覽器會對該段文字套用 User-Agent 預設的 highlight 樣式（CSS 偽類為 ::target-text）。
4. 隱私保護：嚴格防止攻擊者利用此功能探測頁面內容（如跨站搜索攻擊），該功能要求導航必須由使用者觸發（例如點擊連結或在網址列輸入），無法透過腳本或是 iframe 加載。

健忘筆記

跨站搜索攻擊（Cross-Site Search）是側鏈攻擊（Side-channel attack）的一種。攻擊者的目標不是直接偷取你的密碼，而是透過「詢問問題」來推斷出你在另一個受信任網站（如 Gmail、銀行或私人筆記）中的敏感資料。

語法結構

Text Fragment 的語法附加在 URL 的 hash (#) 之後，使用特殊分隔符 :~: 開頭，並且內容必須進行 URL Encode（中文字串現代瀏覽器會自動處理），確保連結在所有平台（例如 Line、Discord、Slack 或 Email 軟體）都正確運作。

Text Fragment 語法結構

URL#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

參數

• prefix-（前綴內容）：選填，用於指定目標文字「前面」的文字，協助瀏覽器在重複詞彙中定位正確段落。語法必須以連字號 - 結尾，並以逗號 , 和 textStart 分隔。
• textStart（起始文字）：必填，要 highlight 顯示的文字開頭。若未指定 textEnd，則只 highlight 此部分。
• textEnd（結束文字）：選填，要 highlight 顯示的文字結尾。若指定此項，瀏覽器會 highlight 從 textStart 到 textEnd 之間的所有內容。
• -suffix（後綴內容）：選填，用於指定目標文字「後面」的文字，協助精確定位。語法必須以連字號 - 開頭，並以逗號 , 和前面的參數分隔。

健忘筆記

URL Encode 是一種將「特殊字元」轉換為網頁瀏覽器與伺服器都能理解的格式的技術，因為網址只允許使用 ASCII 字元集（英文字母、數字與少數符號）。

範例

1. 單詞搜尋

定位並 highlight “defer 屬性“ 一詞。

demo：https://forgetfulengineer.github.io/Frontend/Html/script-loading-defer-async/#:~:text=defer%20%E5%B1%AC%E6%80%A7

2. 跨多句範圍搜尋

定位從 “表示” 開始到 “事件前” 結束的句子片段。

demo：https://forgetfulengineer.github.io/Frontend/Html/script-loading-defer-async/#:~:text=%E8%A1%A8%E7%A4%BA,%E4%BA%8B%E4%BB%B6%E5%89%8D

3. 上下文消搜尋

網頁中有三個 “DOMContentLoaded”，要指定定位在第三個（後面接著 “執行時機” 的那個）。

demo：https://forgetfulengineer.github.io/Frontend/Html/script-loading-defer-async/#:~:text=DOMContentLoaded,-%E5%9F%B7%E8%A1%8C%E6%99%82%E6%A9%9F

客製化反白的背景顏色

::target-text 偽元素

• 瀏覽器為 Text Fragment 提供專用偽元素
• 不影響一般文字選取樣式

範例

css 設定

::target-text {
  background-color: #ffe58f; /* 反白背景色 */
  color: #000; /* 反白文字色 */
}

注意事項

相容性狀態：

• Chromium 核心瀏覽器（Chrome, Edge, Opera）：完全支援。
• Safari：支援（自 Safari 16.1 起）。
• Firefox：支援（現代版本已預設開啟）。

URL Text Fragments 的 Can i use

限制和規範：

• 瀏覽器只會搜尋可見文字，隱藏元素（display: none）中的文字無法被定位。
• 同頁多次出現相同文字時，可能命中非預期位置。

結論

HTML URL Text Fragments 提供了一種不需要修改後端或 HTML 結構就可以標記網頁內容的方法，透過 textStart、textEnd 以及前後文 prefix、suffix 的語法組合，可以更有效得分享內容。

延伸閱讀

• 【web.dev】Text Fragments
• 【MDN】Text fragments
• 【MDN】::target-text
• 【Can I use】URL Text Fragments 瀏覽器相容性