以大膽連結的方式沒有任何人連結：文字片段

「文字片段」可讓您在網址片段中指定文字片段。 瀏覽含有這類文字片段的網址時，瀏覽器可以強調 和/或吸引使用者的注意力

片段 ID

Chrome 80 版本是重大版本，其中包含許多備受期待的功能，例如 Web Workers 中的 ECMAScript 模組， 空值合併、 選用鏈結等等。這邊的版本跟往常一樣 透過 網誌文章 Chromium 網誌。您可以在下方的螢幕截圖中查看網誌文章摘錄。

您可能想知道所有紅色方塊代表的意義。是執行 下列程式碼片段。它會醒目顯示所有具有 id 屬性的元素。

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

我也可以插入任何以紅色方塊醒目顯示的元素深層連結 片段 ID 以便我將這項功能用於 指定網頁網址如果要開啟「提供意見」連結， 「產品論壇」方塊 我也可以手動把網址 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1。 如同開發人員工具的「元素」面板所示，有問題的元素具有 id 屬性值為 HTML1。

如果我使用 JavaScript 的 URL() 建構函式剖析這個網址，就會顯示不同元件。 請注意，hash 屬性含有 #HTML1 值。

new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
  hash: "#HTML1"
  host: "blog.chromium.org"
  hostname: "blog.chromium.org"
  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
  origin: "https://blog.chromium.org"
  password: ""
  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
  port: ""
  protocol: "https:"
  search: ""
  searchParams: URLSearchParams {}
  username: ""
}
*/

雖然我必須開啟開發人員工具，才能找出元素的 id 朗讀了磁碟區 深入瞭解 此特定章節後，由 網誌文章

如果要連結至沒有 id 的項目，該怎麼做？假設我想連結到 ECMAScript 模組 標題。如以下螢幕截圖所示，相關 <h1> 不會 具有 id 屬性，表示我無法連結至這個標題。這就是問題所在 文字片段解析。

文字片段

文字片段提案新增對 在網址雜湊中指定文字片段。瀏覽至含有這類文字片段的網址時， 使用者代理程式可以強調和/或吸引使用者的注意力

瀏覽器相容性

基於安全性，這項功能規定使用者必須在 noopener 背景資訊。 因此，請務必加入 rel="noopener"在您的 <a> 錨點或新增 將 noopener 傳送到 Window.open() 視窗功能清單。

start

文字片段的最簡單語法如下：雜湊符號 # 後面接著 :~:text= 和 start，代表 百分比編碼 我想連結文字

#:~:text=start

舉例來說，假設我想連結至「Web Workers 中的 ECMAScript 模組」標題 發表 Chrome 80 版新功能的網誌文章 在此情況下，網址會是：

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

文字片段強調類似這樣， 在 Chrome 等支援瀏覽器中按一下該連結時，系統會醒目顯示該文字片段， 捲動至檢視區塊：

start和end

如果我要連結至名為 Web Workers 中的 ECMAScript 模組的整個章節，而不是 變成標題？對區段的全部文字進行百分比編碼後，就可以得出的結果網址 不是那麼長

幸好有更好的方法。與其使用全部文字，我可以使用 start,end 語法。因此，我會在開頭指定幾個百分比編碼的字詞 所需文字，以及所需文字結尾加上幾個百分比編碼的字詞，並以半形逗號分隔 逗號 ,。

看起來會像這樣：

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.。

以 start 來說，我依序有 ECMAScript%20Modules%20in%20Web%20Workers、半形逗號 , 和半形逗號 由 ES%20Modules%20in%20Web%20Workers. 以 end 格式上傳。當您點選支援的瀏覽器時 和 Chrome 一樣，整個部分都會醒目顯示，然後捲動至檢視畫面中：

現在你可能會好奇我選擇的 start 和 end。其實，較短的網址 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers.敬上 兩邊只輸入兩個字詞 效果也很不錯比較 start 和 end 與 先前的值

如果我採取進一步的做法，現在 start 和 end 都使用一個字詞，你可以 您會發現我有麻煩了網址 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers.敬上 縮短了，但醒目顯示的文字片段已不是原本想要的片段。 系統會在「Workers.」這個字詞第一個出現時停止醒目顯示文字，但這個字詞正確，但我不是 用於突顯重點問題在於，您要指定的片段並不是 目前的單字 start 和 end 值：

prefix-和-suffix

為 start 和 end 使用過長的值是取得不重複連結的解決方案。 但在某些情況下無法這麼做。另外，我為什麼要選擇 Chrome 80 發布網誌文章做為我的範例答案就是這個版本的「文字片段」 版本：

請注意螢幕截圖中的「text」字樣出現 4 次第 4 次 綠色程式碼字型如果要連結這個特定字詞，將 start 至 text。自「text」一詞是，只有一個字，不可以有 end。該怎麼辦？ 網址 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text敬上 與「文字」字詞的第一個出現比對相符標題中：

，瞭解如何調查及移除這項存取權。

幸好有解決方法。在這種情況下，我可以指定 prefix​- 和 -suffix。 綠色代碼字型「text」前一字是「the」，之後的單字是「parameter」。以上皆非 其他三個字詞「text」字詞的周圍字詞也相同用這個星球發動攻擊 我們知道，我可以調整先前的網址並新增 prefix- 和 -suffix。對另一半 參數也必須經過百分比編碼，而且可包含多個字詞。 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter。 為了讓剖析器清楚識別 prefix- 和 -suffix，這兩個項目必須分隔出去 由 start 和選用的 end 搭配破折號 -。

完整語法

文字片段的完整語法如下所示。(方括號表示選用參數)。 所有參數值都必須使用百分比編碼。這對破折號來說特別重要 -、& 符號和 & 和半形逗號 , 字元，因此不會被解讀為文字的一部分 指令語法。

#:~:text=[prefix-,]start[,end][,-suffix]

prefix-、start、end 和 -suffix 每個項目都只會比對單一文字內的文字 區塊層級元素 但完整的 start,end 範圍「可以」橫跨多個區塊。例如： :~:text=The quick,lazy dog 不相符，因為開頭 字串「The Quick」皆不在單一、不中斷的區塊層級元素中：

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

不過，這項範例相符如以下範例所示：

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

使用瀏覽器擴充功能建立文字片段網址

手動建立文字片段網址的做法很繁瑣，尤其是確認網址是為了確認 。如果需要的話，規格可以提供一些訣竅 產生文字片段網址的步驟。 我們提供開放原始碼的瀏覽器擴充功能 文字片段連結： 只要選取文字，然後按一下 [複製連結至所選文字] 即可將其連結至任何文字。在使用情境中 或前往 Google 試算表選單這項擴充功能適用於下列瀏覽器：

• Google Chrome 文字片段連結
• Microsoft Edge 文字片段連結
• Mozilla Firefox 的文字片段連結
• Apple Safari 的文字片段連結

，瞭解如何調查及移除這項存取權。

使用同一個網址處理多個文字片段

請注意，同一個網址可以顯示多個文字片段。特定的文字片段 並以 & 字元分隔。以下是含有三個文字片段的連結範例： https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet。

混合元素和文字片段

傳統元素片段可以與文字片段合併使用。您可以同時 ，以提供有意義的備用文字，以因應網頁上的原始文字 使文字片段不再相符網址 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.敬上 請到這裡的「請提供寶貴意見」連結 產品論壇專區 包含元素片段 (HTML1) 和文字片段 (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

片段指令

我尚未說明的語法中有一個元素：片段指令 :~:。為了避免 如上所示， 文字片段規格導入了片段 指令。片段指令是部分網址片段，以程式碼序列分隔 :~:。這個值會保留用於使用者代理程式操作說明 (例如 text=)，並從網址中移除 載入期間，因此作者指令碼無法直接與它互動。使用者代理程式操作說明如下 (也稱為指令)。在具體案例中，text= 因此稱為「文字指令」。

特徵偵測

如要偵測支援情形，請在 document 上測試唯讀 fragmentDirective 屬性。片段 指示詞是網址的機制，可以為瀏覽器指定指示，而非導向 文件。避免與作者指令碼直接互動，因此日後的使用者代理程式 並附上任何指示，不必擔心會對現有內容造成破壞性變更。一 像是翻譯提示等等

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

功能偵測主要適用於動態產生連結 (例如 搜尋引擎)，避免將文字片段連結至不支援這類程式碼的瀏覽器。

設定文字片段樣式

根據預設，瀏覽器會設定與文字片段相同的樣式 mark (通常是黃色的黑色， CSS 系統顏色 (mark))。使用者代理程式樣式表包含的 CSS，如下所示：

:root::target-text {
  color: MarkText;
  background: Mark;
}

如您所見，瀏覽器會提供虛擬選取器 ::target-text，您可以用來 自訂套用的醒目顯示項目舉例來說，您可以將文字片段設計成黑色 並排顯示紅色背景的文字和往常一樣，請務必 檢查色彩對比 因此，覆寫樣式不會造成無障礙功能問題，並確保醒目顯示內容實際上 讓視覺元素脫穎而出

:root::target-text {
  color: black;
  background-color: red;
}

多元包容性

文字片段功能在某些程度上可以進行折線填滿。我們提供 polyfill，會在內部 擴充功能，適用於不支援 為文字片段提供內建支援，這項功能是以 JavaScript 實作。

產生程式輔助文字片段連結

polyfill 包含檔案 您可以匯入並用來產生文字片段連結的 fragment-generation-utils.js。這是 如以下程式碼範例所示：

const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
  let url = `${location.origin}${location.pathname}${location.search}`;
  const fragment = result.fragment;
  const prefix = fragment.prefix ?
    `${encodeURIComponent(fragment.prefix)}-,` :
    '';
  const suffix = fragment.suffix ?
    `,-${encodeURIComponent(fragment.suffix)}` :
    '';
  const start = encodeURIComponent(fragment.textStart);
  const end = fragment.textEnd ?
    `,${encodeURIComponent(fragment.textEnd)}` :
    '';
  url += `#:~:text=${prefix}${start}${end}${suffix}`;
  console.log(url);
}

取得用於數據分析的文字片段

許多網站都會使用片段進行轉送，因此瀏覽器會移除文字片段 以免破壞這些網頁另有 已確認的需求 向網頁顯示文字片段連結，例如進行分析 但目前尚未實作提議的解決方案 目前先使用以下程式碼 並輸入所需資訊

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

安全性

文字片段指令只有在發生完整 (非相同網頁) 瀏覽時，才能叫用 a 使用者啟用。 此外，如果導覽來源與目的地不同，就需要 以便進行 noopener 背景資訊，例如 確認到達網頁已充分隔離。只有文字片段指令 已套用至主影格也就是說，系統不會在 iframe 和 iframe 內搜尋文字 導覽動作不會叫用文字片段。

隱私權

請務必確保 Text Fragments 規格的實作不會洩漏文字 網頁上是否有片段。雖然元素片段完全由 任何人都可以建立文字片段；在我的範例中，還記得 沒有辦法連結至 Web Workers 中的 ECMAScript 模組標題，因為 <h1> 沒有 id，但任何人 (包括我在內) 都能透過精心打造 文字片段？

假設我放送了一個邪惡廣告聯播網，evil-ads.example.com。再假設有一則廣告 我利用文字動態建立對 dating.example.com 的隱藏跨來源 iframe 片段網址 dating.example.com#:~:text=Log%20Out 因為使用者與廣告互動後如果畫面上顯示「登出」字樣我知道受害者目前就在 已登入 dating.example.com，可用於剖析使用者。既然文字 實作片段時，可能會判定成功的相符結果應導致焦點切換， evil-ads.example.com 我可以監聽 blur 事件，進而知道發生配對的時間。於 為滿足上述情況，我們在 Chrome 中實作「文字片段」的方式不盡其一。

另一種攻擊可能是根據捲動位置入侵網路流量。假設我能夠 受害者的網路流量記錄，例如公司內部網路的管理員。想像一下 目前已有一份長篇人力資源說明文件「如果遭受攻擊該怎麼辦...」，然後 例如 燒掉、焦慮等。我可以將追蹤像素放在 請參考閱讀清單，進一步瞭解 如何選擇 Kubeflow Pipelines SDK 或 TFX如果我們接著判斷載入文件時， 追蹤像素旁邊顯示「消耗」項目，我接下來能以內部網路管理員的身分判斷要處理的 員工點選與員工有關的:~:text=burn%20out文字片段連結 可能會認定為機密內容，並未公開顯示因為這個範例 問題持續發生，因為入侵行為需要符合非常的特定先決條件。 Chrome 安全性團隊進行評估，評估是否導入捲動導覽功能的風險。 其他使用者代理程式可能會決定改為顯示手動捲動的 UI 元素。

如果網站不希望瀏覽器顯示上述資訊，Chromium 會支援 文件政策 可傳送給使用者代理程式的標頭值，因此使用者代理程式不會處理文字片段網址。

Document-Policy: force-load-at-top

停用文字片段

如要停用此功能，最簡單的方法是使用可插入 HTTP 回應的擴充功能 標題 ModHeader (非 Google 產品) 如何插入回應 (「不是」要求) 標頭，如下所示：

Document-Policy: force-load-at-top

另一種方式的停用方法是使用企業設定 ScrollToTextFragmentEnabled。 如要透過 macOS 執行這項操作，請在終端機中貼上以下指令。

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

如果使用 Windows，請按照 Google Chrome Enterprise 說明支援 網站。

網頁搜尋中的文字片段

針對某些搜尋，Google 搜尋引擎會提供快速解答或內容摘要 程式碼片段這些精選摘要最有可能出現在搜尋時顯示 就是透過問句的形式按一下精選摘要後，系統會將使用者直接導向精選摘要 來源網頁上的摘要文字這都要歸功於自動建立的文字片段網址。

，瞭解如何調查及移除這項存取權。

結論

文字片段網址是一項強大的功能，可以連結網頁上的任意文字。學術 社群也能使用它來提供非常準確的引文或參考連結。搜尋引擎 藉此建立網頁上文字搜尋結果的深層連結。可以供使用者分享 網頁的特定段落 而不是無法存取的螢幕截圖希望你開始行動 使用文字片段網址 這些內容就能派上用場請務必安裝 Text Fragment 連結瀏覽器 。

相關連結

• 規格草稿
• TAG 審查
• Chrome 平台狀態項目
• Chrome 追蹤錯誤
• 意圖傳送討論串
• WebKit-Dev 討論串
• Mozilla 標準位置執行緒

特別銘謝

文字片段是由 Nick Burris 和 David Bokan (作者：Bokan) Grant Wang。感謝 Joe Medley 會仔細閱讀這篇文章主頁橫幅由 Greg Rakozy 提供 Unsplash。