網(wǎng)頁文本樣式化一直是開發(fā)者關注的焦點。令人期待的是CSS Custom Highlight API的出現(xiàn)，它將革新網(wǎng)頁文本范圍樣式化。

舉例來說，Google Docs、Word或Dropbox Paper等文本編輯軟件會檢測拼寫和語法錯誤，并在下方顯示波浪線以提示用戶。VS Code等代碼編輯器對代碼錯誤也采用類似方法。

另一個常見的文本高亮用例是搜索和高亮功能，用戶在輸入框中輸入文本，頁面會搜索匹配結果并高亮顯示?，F(xiàn)在，您可以在瀏覽器中嘗試按下Ctrl/? F，然后輸入本文中的部分文本。

瀏覽器通常會自動處理這些樣式情況?？删庉媴^(qū)域（如）會自動顯示拼寫錯誤的波浪線。查找命令會自動高亮顯示找到的文本。

但是，如果我們想自己進行這種樣式化怎么辦？長期以來，如何在網(wǎng)頁上實現(xiàn)這一點一直是一個常見問題，它可能浪費了許多人大量的時間。

這不是一個簡單的難題。我們不僅僅是用帶有class的<span></span>標簽包裹文本并應用一些CSS。實際上，這需要能夠正確地高亮顯示跨越任意復雜DOM樹的多個文本范圍，并且可能跨越DOM元素的邊界。

解決這個問題的常見方法有兩種：

1. 樣式化文本范圍偽元素，以及
2. 創(chuàng)建您自己的文本高亮系統(tǒng)。

我們首先回顧一下這兩種方法，然后看看即將推出的CSS Custom Highlight API如何改變這一切。

方法一：可樣式化文本范圍

最著名的可樣式化文本范圍可能是用戶選擇。當您使用指向設備選擇網(wǎng)頁上的文本時，會自動創(chuàng)建一個Selection對象。事實上，現(xiàn)在嘗試選擇此頁面上的文本，然后在DevTools控制臺中運行document.getSelection()。您應該會看到所選文本的位置信息。

事實證明，您還可以通過JavaScript以編程方式創(chuàng)建文本選擇。以下是一個示例：

// 首先，創(chuàng)建一個Range對象。
const range = new Range();

// 并設置其起始和結束位置。
range.setStart(parentNode, startOffset);
range.setEnd(parentNode, endOffset);

// 然后，將當前選擇設置為此范圍。
document.getSelection().removeAllRanges();
document.getSelection().addRange(range);

最后一塊拼圖是樣式化此范圍。CSS有一個名為::selection的偽元素可以做到這一點，并且它在所有瀏覽器中都受支持。

::selection {
  background-color: #f06;
  color: white;
}

以下是一個使用此技術依次高亮顯示頁面中所有單詞的示例：

除了::selection偽元素之外，還有許多其他偽元素：

• ::target-text 選擇瀏覽器中已滾動到的文本（支持滾動到文本功能的瀏覽器）。(MDN)
• ::spelling-error 選擇瀏覽器標記為包含拼寫錯誤的文本。(MDN)
• ::grammar-error 選擇瀏覽器標記為包含語法錯誤的文本。(MDN)

不幸的是，這里的瀏覽器支持不是很好，盡管這些范圍本身很有用，但它們不能用于樣式化自定義文本片段——只能樣式化瀏覽器預定義的文本片段。

因此，用戶文本選擇很好，因為它相對容易實現(xiàn)，并且不會更改頁面的DOM。實際上，Range對象本質上是頁面中段落的坐標，而不是需要創(chuàng)建才能存在的HTML元素。

然而，一個主要的缺點是，創(chuàng)建選擇會重置用戶已經(jīng)手動選擇的任何內(nèi)容。嘗試在上面的演示中選擇文本以測試這一點。您會看到代碼將選擇移動到其他位置時，它會消失。

方法二：自定義高亮系統(tǒng)

如果您使用Selection對象不足以滿足您的需求，那么第二個解決方案幾乎是唯一的選擇。此解決方案圍繞著自己動手做所有事情，使用JavaScript在您希望高亮顯示出現(xiàn)的位置插入新的HTML元素。

不幸的是，這意味著需要編寫和維護更多的JavaScript代碼，更不用說每當高亮顯示更改時，它都會強制瀏覽器重新創(chuàng)建頁面的布局。此外，還有一些復雜的邊緣情況，例如，當您想高亮顯示跨越多個DOM元素的文本片段時。

有趣的是，CodeMirror和Monaco（為VS Code提供支持的JavaScript文本編輯器庫）有自己的高亮邏輯。它們使用稍微不同的方法，其中高亮顯示包含在DOM樹的單獨部分中。文本行和高亮顯示的段落在DOM中的兩個不同位置呈現(xiàn)，然后彼此定位。如果您檢查包含文本的DOM子樹，則沒有高亮顯示。通過這種方式，可以重新渲染高亮顯示而不會影響文本行，并且不必在文本行中引入新的元素。

總的來說，感覺缺少一個瀏覽器支持的高亮顯示功能。某些功能可以幫助解決所有這些缺點（不會干擾用戶文本選擇，支持多選，代碼簡單）并且比自定義解決方案更快。

幸運的是，這就是我們在這里要討論的內(nèi)容！

CSS Custom Highlight API

CSS Custom Highlight API是一個新的W3C規(guī)范（目前處于工作草案狀態(tài)），它使得可以從JavaScript樣式化任意文本范圍！這里的方法與我們前面回顧的用戶文本選擇技術非常相似。它為開發(fā)人員提供了一種方法來創(chuàng)建任意范圍（來自JavaScript），然后使用CSS對其進行樣式化。

創(chuàng)建文本范圍

第一步是創(chuàng)建要高亮顯示的文本范圍，這可以使用JavaScript中的Range來完成。因此，就像我們在設置當前選擇時所做的那樣：

const range = new Range();
range.setStart(parentNode, startOffset);
range.setEnd(parentNode, endOffset);

值得注意的是，如果作為第一個參數(shù)傳遞的節(jié)點是文本節(jié)點或不是文本節(jié)點，則setStart和setEnd方法的工作方式不同。對于文本節(jié)點，偏移量對應于節(jié)點中的字符數(shù)。對于其他節(jié)點，偏移量對應于父節(jié)點中的子節(jié)點數(shù)。

還值得注意的是，setStart和setEnd并不是描述范圍起始和結束位置的唯一方法。查看Range類上可用的其他方法以查看其他選項。

創(chuàng)建高亮顯示

第二步包括為上一步中創(chuàng)建的范圍創(chuàng)建Highlight對象。Highlight對象可以接收一個或多個Range。因此，如果您想以完全相同的方式高亮顯示許多文本片段，則可能應該創(chuàng)建一個Highlight對象并使用與這些文本片段對應的所有Range來初始化它。

const highlight = new Highlight(range1, range2, ..., rangeN);

但是您也可以根據(jù)需要創(chuàng)建任意數(shù)量的Highlight對象。例如，如果您正在構建一個協(xié)作文本編輯器，其中每個用戶獲得不同的文本顏色，那么您可以為每個用戶創(chuàng)建一個Highlight對象。然后可以對每個對象進行不同的樣式化，正如我們接下來將看到的。

注冊高亮顯示

現(xiàn)在，Highlight對象本身不會執(zhí)行任何操作。它們首先需要在所謂的突出顯示注冊表中注冊。這是使用CSS Highlights API完成的。注冊表就像一個地圖，您可以通過為高亮顯示指定名稱來注冊新的高亮顯示，以及刪除高亮顯示（甚至清除整個注冊表）。

以下是注冊單個高亮顯示的方法。

CSS.highlights.set('my-custom-highlight', highlight);

其中my-custom-highlight是您選擇的名稱，highlight是上一步中創(chuàng)建的Highlight對象。

樣式化高亮顯示

最后一步是實際樣式化已注冊的高亮顯示。這是使用新的CSS ::highlight()偽元素完成的，使用您在注冊Highlight對象時選擇的名稱（在我們的示例中為my-custom-highlight）。

::highlight(my-custom-highlight) {
  background-color: yellow;
  color: black;
}

值得注意的是，就像::selection一樣，只有一部分CSS屬性可以與::highlight()偽元素一起使用：

• background-color
• caret-color
• color
• cursor
• fill
• stroke
• stroke-width
• text-decoration（這可能只在規(guī)范的版本2中受支持）
• text-shadow

更新高亮顯示

有多種方法可以更新頁面上的高亮顯示文本。

例如，您可以使用CSS.highlights.clear()完全清除高亮顯示注冊表，然后從頭開始?；蛘撸€可以更新底層范圍，而無需重新創(chuàng)建任何對象。為此，再次使用range.setStart和range.setEnd方法（或任何其他Range方法），瀏覽器將重新繪制高亮顯示。

但是，Highlight對象的工作方式類似于JavaScript Set，這意味著您還可以使用highlight.add(newRange)將新的Range對象添加到現(xiàn)有的Highlight中，或者使用highlight.delete(existingRange)刪除Range。

第三，您還可以向CSS.highlights注冊表添加或刪除特定的Highlight對象。由于此API的工作方式類似于JavaScript Map，您可以使用set和delete來更新當前已注冊的Highlights。

瀏覽器支持

CSS Custom Highlight API的規(guī)范相對較新，其在瀏覽器中的實現(xiàn)仍不完整。因此，盡管這將成為Web平臺的一個非常有用的補充，但它還不太適合用于生產(chǎn)環(huán)境。

Microsoft Edge團隊目前正在Chromium中實現(xiàn)CSS Custom Highlight API。事實上，通過啟用實驗性Web平臺功能標志（在about:flags下），現(xiàn)在就可以在Canary版本中使用此功能。目前還沒有關于該功能何時將在Chrome、Edge和其他基于Chromium的瀏覽器中發(fā)布的明確計劃，但它已經(jīng)非常接近了。

Safari 99 也支持此API，但在實驗標志（Develop → Experimental Features → Highlight API）之后，并且接口略有不同，因為它使用StaticRange對象而不是Range對象。

Firefox尚不支持此API，不過您可以閱讀Mozilla關于此API的立場以了解更多信息。

演示

說到Microsoft Edge，他們已經(jīng)設置了一個演示，您可以在其中試用CSS Custom Highlight API。但在嘗試演示之前，請確保您使用的是啟用了about:flags頁面中實驗性Web平臺功能標志的Chrome或Edge Canary。

/button 查看演示

該演示使用Custom Highlight API根據(jù)您在頁面頂部搜索字段中輸入的內(nèi)容來高亮顯示頁面中的文本范圍。

頁面加載后，JavaScript代碼檢索頁面中的所有文本節(jié)點（使用TreeWalker），當用戶在搜索字段中鍵入內(nèi)容時，代碼會迭代這些節(jié)點，直到找到匹配項。然后使用這些匹配項創(chuàng)建Range對象，然后使用Custom Highlight API對其進行高亮顯示。

總結

那么，這個新的瀏覽器提供的高亮顯示API真的值得嗎？絕對值得！

首先，即使CSS Custom Highlight API起初看起來有點復雜（例如，必須創(chuàng)建范圍，然后是高亮顯示，然后注冊它們，最后樣式化它們），它仍然比創(chuàng)建新的DOM元素并將它們插入到正確的位置要簡單得多。

更重要的是，瀏覽器引擎可以非常非?？焖俚貥邮交@些范圍。

僅允許使用一部分CSS屬性與::highlight()偽元素一起使用的理由是，這部分屬性只包含瀏覽器可以非常有效地應用的屬性，而無需重新創(chuàng)建頁面的布局。通過在頁面周圍插入新的DOM元素來高亮顯示文本范圍，需要引擎做更多工作。

但不要相信我的話。Fernando Fiori參與了該API的開發(fā)，他創(chuàng)建了這個不錯的性能比較演示。在我的電腦上，CSS Custom Highlight API的性能平均比基于DOM的高亮顯示快5倍。

由于Chromium和Safari已經(jīng)提供了實驗性支持，我們正越來越接近可以在生產(chǎn)環(huán)境中使用的東西。我迫不及待地想看到瀏覽器一致地支持Custom Highlight API，并看看這將解鎖哪些功能！

以上是CSS自定義突出顯示API：首次查看的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！