文字片段

文字片段可以直接連結到網頁中的特定文字，而無需頁面作者新增 ID。它們在 URL 片段中使用特殊語法。此功能允許您建立到您不控制且可能沒有相關 ID 的內容的深度連結。透過直接指向特定詞語，還可以使共享連結更有用。瀏覽器在突出顯示連結文字的方式上可能有所不同——通常，文字會被滾動到檢視中並用顏色高亮顯示。

概念與用法

歷史上，Web 的關鍵功能之一一直是其在不同文件之間提供連結的能力——這就是使其成為“Web”的原因。

您可以透過連結到文件的 URL 來連結到文件的頂部，例如：
- https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a.
您可以透過連結到文件的 URL 加上該部分的文件片段（ID）來連結到文件的特定部分，例如：
- https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#browser_compatibility.

連結到特定文件片段的問題在於，連結頁面的作者需要放置一個錨點來實際進行連結。上面的第二個示例連結到一個 ID 為 browser_compatibility 的 h2 元素。

html

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

並非所有文件都有這樣的錨點，即使有，連結到一個標題可能也比直接連結到您引用的特定文字要不明顯得多。這就是文字片段的作用：它們允許連結作者完全控制要連結到的文字，而無需目標文件中的任何特殊標記。例如，搜尋引擎可能在其搜尋結果中引用特定句子，單擊連結將直接帶您到該句子。

但是，文字片段也有一個侷限性：文件中的文字不如文件結構穩定。如果連結文件中的文字被更新，片段將不再匹配，瀏覽器將導航到頁面頂部。這對於搜尋結果中的瞬時連結來說是可以的，但如果您打算讓連結隨著時間的推移而工作，文件片段可能更可靠。

語法

url

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

文字片段是一種 URL 片段，寫在 # 之後。要理解的關鍵部分如下：

:~:: 也稱為片段指令，這一系列字元告訴瀏覽器接下來的是一個或多個使用者代理指令，它們在載入過程中從 URL 中剝離，以便作者指令碼無法直接與它們互動。使用者代理指令也稱為指令。
text=: 一個文字指令。這向瀏覽器提供了一個文字片段，定義了在連結文件中要連結的文字。
textStart: 一個指定連結文字開頭的文字字串。
textEnd 可選: 一個指定連結文字結尾的文字字串。
prefix- 可選: 一個後跟連字元的文字字串，指定什麼文字應緊跟在連結文字之前，只允許兩者之間存在空格。這有助於瀏覽器選擇正確的連結文字，在有多個匹配項的情況下。
-suffix 可選: 一個後跟文字字串的連字元，指定什麼文字應緊跟在連結文字之後，只允許兩者之間存在空格。這有助於瀏覽器選擇正確的連結文字，在有多個匹配項的情況下。

支援的瀏覽器將滾動到並高亮顯示連結文件中與指定指令匹配的第一個文字片段。請注意，可以透過分隔符（&）字元在同一 URL 中指定多個要高亮的文字片段。

用法說明

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

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

示例

帶有 textStart 的文字片段

https://example.com/#:~:text=for 滾動到並高亮顯示文件中文字 for 的第一個例項。
https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=human 滾動到並高亮顯示文件中文字 human 的第一個例項。
https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL 滾動到並高亮顯示文件中文字 linked URL 的第一個例項。

textStart 和 textEnd

https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=human,URL 滾動到並高亮顯示以 human 開頭並以 URL 結尾的文字字串的第一個例項。
https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,defining%20a%20value 滾動到並高亮顯示以 linked URL 開頭並以 defining a value 結尾的文字字串的第一個例項。請注意，高亮顯示的文字如何跨越多個塊級元素。

帶字首和/或字尾的示例

https://example.com/#:~:text=asking-,for 滾動到並高亮顯示文件中文字 for 的第二個例項。
https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=sent-,referrer 滾動到並高亮顯示文字 referrer 的第一個例項，該例項前面緊跟著文字 sent。這是文件中 referrer 的第 5 個例項；如果沒有字首，則會高亮顯示第一個例項。
https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format 滾動到並高亮顯示文字 linked URL 的第一個例項，該例項後面緊跟著文字 's format。這是文件中 linked URL 的第 5 個例項；如果沒有後綴，則會高亮顯示第一個例項。
https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=downgrade:-,The%20Referer,be%20sent,-to%20origins 滾動到並高亮顯示文字 The Referer ... be sent 的例項，該例項前面有 downgrade: 作為字首，後面有 to origins 作為字尾。這說明了一個更復雜的示例，其中使用字首/字尾來精確定位您要連結到的特定文字例項。例如，嘗試刪除字首，看看匹配了什麼。

帶多個文字片段的 URL

您可以透過分隔符（&）字元在同一 URL 中指定多個要高亮的文字片段。讓我們看幾個例子：

https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=Causes&text=linked 滾動到並高亮顯示文字字串 Causes 和 linked 的第一個例項。
https://mdn.club.tw/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format&text=Deprecated-,attributes,attribute 滾動到並高亮顯示兩個文字例項：
- 文字 linked URL 的第一個例項，後面緊跟著文字 's format。
- 以 attributes 開頭並以 attribute 結尾的文字字串的第一個例項，該字串以 Deprecated 作為字首。

如果您沒有看到一個或多個文字片段被高亮顯示，並且您確信語法是正確的，那麼您可能只是高亮了與您預期的不同的例項。它可能已被高亮顯示，但螢幕外。

樣式化匹配的文字片段

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

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

css

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

嘗試在支援的瀏覽器中開啟上面的連結，看看它的效果。

功能可檢測性

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

嘗試在支援的瀏覽器開發者工具中執行以下程式碼，在帶有一個或多個匹配文字片段的標籤頁中：

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

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

參考

API

FragmentDirective: 表示文字片段的物件。目前為空，主要用於功能檢測。
Document.fragmentDirective: 返回當前文件的 FragmentDirective。

CSS

::target-text: 表示當前文件中高亮顯示的文字片段。它允許作者自定義文字片段的樣式。

規範

規範
URL Fragment Text Directives # fragmentdirective
CSS 偽元素模組 Level 4 # selectordef-target-text

大膽連結無人敢連結之處：文字片段

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年9月23日，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題