文字片段

文字片段允許直接連結到 Web 文件中特定部分的文字，而無需作者使用 ID 對其進行註釋，只需在 URL 片段中使用特定的語法即可。支援的瀏覽器可以自由選擇如何引起對連結文字的注意，例如使用顏色突出顯示和/或滾動到頁面上的內容。這很有用，因為它允許 Web 內容作者深度連結到他們無法控制的其他內容，而無需依賴 ID 的存在來實現此目的。在此基礎上，它可以用於為使用者生成更有效的 內容共享連結以互相傳遞。

概念和用法

從歷史上看，Web 的關鍵特性之一始終是它能夠在不同的文件之間提供連結——正是它構成了全球資訊網，一個網路。

連結到特定文件片段的問題在於，連結頁面的作者需要放置一個錨點才能真正連結到。上面的第二個示例連結到一個具有 ID 為 browser_compatibility 的h2 元素。

html
<h2 id="browser_compatibility">
  <a href="#browser_compatibility">Browser compatibility</a>
</h2>

如果更改或刪除了 ID，則會忽略文件片段，並且連結僅連結到頁面的頂部。就優雅降級而言，這是合理的，但如果連結的作者可以完全控制他們連結到的位置，而無需依賴頁面作者，那可以說會更好。

文字片段使之成為現實——它們允許連結作者以靈活的方式指定要連結到的文字內容，而不是文件片段。

語法

與文件片段類似，文字片段附加在雜湊符號 (#) 之後的 URL 上。但是語法略有不同。

url
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

需要理解的關鍵部分如下：

:~:

也稱為片段指令，此字元序列告訴瀏覽器接下來的是一個或多個使用者代理指令，這些指令在載入過程中會從 URL 中剝離，以便作者指令碼無法直接與它們互動。使用者代理指令也稱為指令。

text=

文字指令。這為瀏覽器提供了一個文字片段，定義了要在連結文件中連結到的文字。

textStart

指定連結文字開頭的文字字串。

textEnd 可選

指定連結文字結尾的文字字串。

prefix- 可選

一個文字字串，後跟一個連字元，指定什麼文字應該緊接在連結文字之前，只允許在其間使用空格。這有助於瀏覽器在有多個匹配項的情況下選擇正確的連結文字。

-suffix 可選

一個連字元，後跟一個文字字串，指定什麼文字應該緊接在連結文字之後，只允許在其間使用空格。這有助於瀏覽器在有多個匹配項的情況下選擇正確的連結文字。

支援的瀏覽器將滾動到並突出顯示連結文件中第一個與指定指令匹配的文字片段。請注意，可以透過使用與號 (&) 字元分隔它們，在同一個 URL 中指定多個要突出顯示的文字片段。

用法說明

  • 用於 textStart、textEnd、prefix- 和 -suffix 值的文字字串需要進行百分比編碼。
  • 匹配不區分大小寫。
  • 各個 textStart、textEnd、prefix- 和 -suffix 字串需要完全位於同一個塊級元素內，但完整的匹配可以跨越多個元素邊界。
  • 出於安全原因，此功能要求連結在 noopener 上下文中開啟——您需要在<a> 元素中新增 rel="noopener"，並在使用此功能時在window.open() 呼叫中新增 noopener。
  • 文字片段僅在完全（非同頁面）的使用者啟動導航上呼叫。
  • 文字片段僅應用於主框架；不會在<iframe> 內搜尋文字，並且 iframe 導航不會呼叫文字片段。
  • 對於希望選擇退出的站點，基於 Chromium 的瀏覽器支援一個文件策略 標頭值，他們可以傳送該值，以便使用者代理不會處理文字片段。
    http
    Document-Policy: force-load-at-top

注意：如果提供的文字片段與連結文件中的任何文字都不匹配，或者瀏覽器不支援文字片段，則會忽略整個文字片段，並連結到文件的頂部。

示例

帶有 textStart 的簡單文字片段

textStart 和 textEnd

帶有 prefix- 和/或 -suffix 的示例

包含多個文字片段的 URL

您可以透過使用與號 (&) 字元分隔它們來指定在同一 URL 中突出顯示的多個文字片段。讓我們看幾個例子。

如果您沒有看到一個或多個文字片段突出顯示，並且您確定語法正確，則您可能只是突出顯示了與您預期不同的例項。它可能已突出顯示，但不在螢幕上。

樣式化匹配的文字片段

瀏覽器可以自由地以任何他們選擇的預設方式設定突出顯示文字的樣式。CSS 偽元素模組級別 4 定義了一個偽元素，::target-text，它允許您指定自定義樣式。

例如，在我們的滾動到文字演示 中，我們有以下 CSS。

css
::target-text {
  background-color: rebeccapurple;
  color: white;
}

嘗試在支援的瀏覽器中訪問上述連結以檢視其效果。

功能檢測

可以透過 Document.fragmentDirective 屬性訪問的FragmentDirective 物件可用於測試瀏覽器是否支援文字片段。

嘗試在支援的瀏覽器的開發者工具中執行以下程式碼，在包含一個或多個匹配文字片段的選項卡中執行。

js
document.fragmentDirective;
// returns an empty FragmentDirective object, if supported
// undefined otherwise

目前，此功能主要用於特性檢測。將來，FragmentDirective 物件可能會包含其他資訊。

參考

API

FragmentDirective

表示文字片段的物件。目前為空，主要用於特性檢測。

Document.fragmentDirective

返回當前文件的FragmentDirective。

CSS

::target-text

表示當前文件中突出顯示的文字片段。它允許作者自定義文字片段的樣式。

規範

規範
URL 片段文字指令
# fragmentdirective
CSS 偽元素模組級別 4
# selectordef-target-text

瀏覽器相容性

html.elements.a.text_fragments

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

api.FragmentDirective

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

css.selectors.target-text

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱