介紹一個比較前沿但是非常有用的新特性：一個瀏覽器原生支持的 CSS? 文本高亮高亮功能，官方名稱叫做 CSS Custom Highlight API[1]，有了它，可以在不改變 dom 結(jié)構(gòu)的情況下自定義任意文本的樣式，例如：
再例如搜索詞高亮。
還可以輕易實現(xiàn)代碼高亮。
多么令人興奮的功能啊，現(xiàn)在在 Chrome 105 中已經(jīng)正式支持了（無需開啟實驗特性），一起學(xué)習(xí)一下吧
一、偽元素 ::highlight()
要自定義任意文本樣式需要 CSS 和 JS 的共同作用。
首先來看 CSS 部分，一個新的偽元素，非常簡單、
::highlight(custom-highlight-name) {
color: red
}和::selection這類偽元素比較類似，僅支持部分文本相關(guān)樣式，如下
- 文本顏色 color。
- 背景顏色 background-color。
- 文本修飾 text-decoration。
- 文本陰影 text-shadow。
- 文本描邊 -webkit-text-stroke。
- 文本填充 -webkit-text-fill-color。
注意，注意，注意不支持background-image，也就是漸變之類的也不支持。
但是，僅僅知道這個偽類是沒用的，她還需要一個“參數(shù)”，也就是上面的custom-highlight-name，表示高亮的名稱，那這個是怎么來的呢？或者換句話說，如何去標(biāo)識頁面中需要自定義樣式的那部分文本呢？
這就需要借助下面的內(nèi)容了，看看如何生成這個“參數(shù)”，這才是重點
二、CSS Custom Highlight API
大部分操作其實和這個原理是相同的，只是把拿到的選區(qū)做了進(jìn)一步處理，具體分以下幾步
1、創(chuàng)建選區(qū)（重點）
首先，通過Range[2]對象創(chuàng)建文本選擇范圍，就像用鼠標(biāo)滑過選區(qū)一樣，這也是最復(fù)雜的一部分，例如：
const parentNode = document.getElementById("foo");
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);
const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);這樣可以得到選區(qū)對象range1、range2。
2、創(chuàng)建高亮
然后，將創(chuàng)建的選區(qū)高亮實例化，需要用到Highlight[3]對象。
const highlight = new Highlight(range1, range2, ...);
當(dāng)然也可以根據(jù)需求創(chuàng)建多個。
const highlight1 = new Highlight(user1Range1, user1Range2);
const highlight2 = new Highlight(user2Range1, user2Range2, user2Range3);
這樣可以得到高亮對象highlight1、highlight2。
3、注冊高亮
接著，需要將實例化的高亮對象通過[CSS.Highlight](HighlightRegistry - Web APIs | MDN (mozilla.org "CSS.Highlight"))注冊到頁面。
有點類似于Map對象的操作。
CSS.highlights.set("highlight1", highlight1);
CSS.highlights.set("highlight2", highlight2);目前兼容性比較差，所以需要額外判斷一下。
if (CSS.highlights) {
//...支持CSS.highlights
}注意看，上面注冊的key名，highlight1就是上一節(jié)提到的高亮名稱，也就是 CSS 中需要的“參數(shù)”
4、自定義樣式
最后，將定義的高亮名稱結(jié)合::highlight，這樣就可以自定義選中樣式了
::highlight(highlight1) {
background-color: yellow;
color: black;
}以上就是全部過程了，稍顯復(fù)雜，但是還是比較好理解的，關(guān)鍵是第一步創(chuàng)建選區(qū)的過程，最為復(fù)雜。
原理就是這樣，下面看一些實例。
三、彩虹文本
現(xiàn)在來實現(xiàn)文章開頭圖示效果，彩虹文本效果?？偣?種顏色，文字依次變色，不斷循環(huán)，而且僅有一個標(biāo)簽。
<p id="rainbow-text">CSS Custom Highlight API</p>
這里總共有7?種顏色，所以需要創(chuàng)建7?個高亮區(qū)域，可以先定義高亮 CSS，如下：
::highlight(rainbow-color-1) { color: #ad26ad; text-decoration: underline; }
::highlight(rainbow-color-2) { color: #5d0a99; text-decoration: underline; }
::highlight(rainbow-color-3) { color: #0000ff; text-decoration: underline; }
::highlight(rainbow-color-4) { color: #07c607; text-decoration: underline; }
::highlight(rainbow-color-5) { color: #b3b308; text-decoration: underline; }
::highlight(rainbow-color-6) { color: #ffa500; text-decoration: underline; }
::highlight(rainbow-color-7) { color: #ff0000; text-decoration: underline; }現(xiàn)在肯定不會有什么變化，因為還沒創(chuàng)建選區(qū)
先創(chuàng)建一個高亮區(qū)域試試，比如第一個文字。
const textNode = document.getElementById("rainbow-text").firstChild;
if (CSS.highlights) {
const range = new Range();
range.setStart(textNode, 0); // 選區(qū)起點
range.setEnd(textNode, 1); // 選區(qū)終點
const Highlight = new Highlight(range);
CSS.highlights.set(`rainbow-color-1`, Highlight);
}效果如下：
下面通過循環(huán)，創(chuàng)建7個高亮區(qū)域。
const textNode = document.getElementById("rainbow-text").firstChild;
if (CSS.highlights) {
const highlights = [];
for (let i = 0; i < 7; i++) {
// 給每個顏色實例化一個Highlight對象
const colorHighlight = new Highlight();
highlights.push(colorHighlight);
// 注冊高亮
CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);
}
// 遍歷文本節(jié)點
for (let i = 0; i < textNode.textContent.length; i++) {
// 給每個字符創(chuàng)建一個選區(qū)
const range = new Range();
range.setStart(textNode, i);
range.setEnd(textNode, i + 1);
// 添加到高亮
highlights[i % 7].add(range);
}
}這樣就在不改變dom的情況下實現(xiàn)了彩虹文字效果。
完整代碼可以查看以下任意鏈接：（注意需要Chrome 105+）
- CSS Custom Highlight API (juejin.cn)[4]
- CSS Custom Highlight API (codepen.io)[5]
- CSS Custom Highlight API (runjs.work)[6]
四、文本搜索高亮
大家都知道瀏覽器的搜索功能，ctrl+f就可以快速對整個網(wǎng)頁就行查找，查找到的關(guān)鍵詞會添加黃色背景的高亮，如下：
以前一直很疑惑這個顏色是怎么添加的，畢竟沒有任何包裹標(biāo)簽?，F(xiàn)在有了CSS Custom Highlight API ，完全可以手動實現(xiàn)一個和原生瀏覽器一模一樣的搜索高亮功能。
到目前為止，還無法自定義原生搜索高亮的黃色背景，以后可能會開放。
假設(shè)HTML結(jié)構(gòu)是這樣的，一個搜索框和一堆文本。
<label>搜索 <input id="query" type="text"></label>
<article>
<p>
閱文旗下囊括 QQ 閱讀、起點中文網(wǎng)、新麗傳媒等業(yè)界知名品牌，匯聚了強大的創(chuàng)作者陣營、豐富的作品儲備，覆蓋 200 多種內(nèi)容品類，觸達(dá)數(shù)億用戶，已成功輸出《慶余年》《贅婿》《鬼吹燈》《全職高手》《斗羅大陸》《瑯琊榜》等大量優(yōu)秀網(wǎng)文 IP，改編為動漫、影視、游戲等多業(yè)態(tài)產(chǎn)品。
</p>
<p>
《盜墓筆記》最初連載于起點中文網(wǎng)，是南派三叔成名代表作。2015年網(wǎng)劇開播首日點擊破億，開啟了盜墓文學(xué) IP 年。電影于2016年上映，由井柏然、鹿晗、馬思純等主演，累計票房10億元。
</p>
<p>
慶余年》是閱文集團(tuán)白金作家貓膩的作品，自2007年在起點中文網(wǎng)連載，持續(xù)保持歷史類收藏榜前五位。改編劇集成為2019年現(xiàn)象級作品，播出期間登上微博熱搜百余次，騰訊視頻、愛奇藝雙平臺總播放量突破160億次，并榮獲第26屆白玉蘭獎最佳編?。ǜ木帲⒆罴涯信浣莾身棿螵?。
</p>
<p>《鬼吹燈》是天下霸唱創(chuàng)作的經(jīng)典懸疑盜墓小說，連載于起點中文網(wǎng)。先后進(jìn)行過漫畫、游戲、電影、網(wǎng)絡(luò)電視劇的改編，均取得不俗的成績，是當(dāng)之無愧的超級IP。</p>
</article>
簡單美化一下后效果如下：
然后就是監(jiān)聽輸入框，遍歷文本節(jié)點（推薦使用原生的treeWalker，當(dāng)然普通的遞歸也可以），根據(jù)搜索詞創(chuàng)建選區(qū)，詳細(xì)代碼如下。
const query = document.getElementById("query");
const article = document.querySelector("article");
// 創(chuàng)建 createTreeWalker 迭代器，用于遍歷文本節(jié)點，保存到一個數(shù)組
const treeWalker = document.createTreeWalker(article, NodeFilter.SHOW_TEXT);
const allTextNodes = [];
let currentNode = treeWalker.nextNode();
while (currentNode) {
allTextNodes.push(currentNode);
currentNode = treeWalker.nextNode();
}
// 監(jiān)聽inpu事件
query.addEventListener("input", () => {
// 判斷一下是否支持 CSS.highlights
if (!CSS.highlights) {
article.textContent = "CSS Custom Highlight API not supported.";
return;
}
// 清除上個高亮
CSS.highlights.clear();
// 為空判斷
const str = query.value.trim().toLowerCase();
if (!str) {
return;
}
// 查找所有文本節(jié)點是否包含搜索詞
const ranges = allTextNodes
.map((el) => {
return { el, text: el.textContent.toLowerCase() };
})
.map(({ text, el }) => {
const indices = [];
let startPos = 0;
while (startPos < text.length) {
const index = text.indexOf(str, startPos);
if (index === -1) break;
indices.push(index);
startPos = index + str.length;
}
// 根據(jù)搜索詞的位置創(chuàng)建選區(qū)
return indices.map((index) => {
const range = new Range();
range.setStart(el, index);
range.setEnd(el, index + str.length);
return range;
});
});
// 創(chuàng)建高亮對象
const searchResultsHighlight = new Highlight(...ranges.flat());
// 注冊高亮
CSS.highlights.set("search-results", searchResultsHighlight);
});最后，通過CSS設(shè)置高亮的顏色。
::highlight(search-results) {
background-color: #f06;
color: white;
}實時搜索效果如下：
完整代碼可以查看以下任意鏈接：（注意需要Chrome 105+）
- CSS Highlight search (juejin.cn)[7]
- CSS Highlight search (codepen.io)[8]
- CSS Highlight search (runjs.work)[9]
還可以將高亮效果改成波浪線。
::highlight(search-results) {
text-decoration: underline wavy #f06;
}效果如下，是不是也可用作錯別字標(biāo)識呢？
除了避免dom?操作帶來的便利外，性能也能得到極大的提升，畢竟創(chuàng)建、移除dom也是性能大戶，下面是一個測試 demo，搬運自
??https://ffiori.github.io/highlight-api-demos/demo-performance.html??[10]
測試代碼可以查看以下任意鏈接：
- Highlight performance demo (juejin.cn)[11]
- Highlight performance demo (codepen.io)[12]
- Highlight performance demo (runjs.work)[13]
測試效果如下：
在10000?個節(jié)點的情況下，兩者相差100倍的差距！而且數(shù)量越大，性能差距越明顯，甚至直接導(dǎo)致瀏覽器卡死！
五、代碼高亮編輯器
最后再來看一個非常實用的例子，可以輕易實現(xiàn)一個代碼高亮的編輯器。
假設(shè) HTML結(jié)構(gòu)是這樣的，很簡單，就一個純文本的標(biāo)簽。
<pre class="editor" id="code">ul{
min-height: 0;
}
.sub {
display: grid;
grid-template-rows: 0fr;
transition: 0.3s;
overflow: hidden;
}
:checked ~ .sub {
grid-template-rows: 1fr;
}
.txt{
animation: color .001s .5 linear forwards;
}
@keyframes color {
from {
color: var(--c1)
}
to{
color: var(--c2)
}
}</pre>簡單修飾一下，設(shè)置為可編輯元素。
.editor{
white-space: pre-wrap;
-webkit-user-modify: read-write-plaintext-only; /* 讀寫純文本 */
}效果如下：
那么，如何讓這些代碼高亮呢？
這就需要對內(nèi)容進(jìn)行關(guān)鍵詞分析提取了，我們可以用現(xiàn)有的代碼高亮庫，比如highlight.js[14]。
hljs.highlight(pre.textContent, {
language: 'css'
})._emitter.rootNode.children通過這個方法可以獲取到CSS語言的關(guān)鍵詞以及類型，如下：
簡單解釋一下，這是一個數(shù)組，如果是純文本，表示普通的字符，如果是對象，表示是關(guān)鍵詞，例如第一個，children?里面的ul?就是關(guān)鍵詞，類型是selector-tag?，也就是選擇器，除此之外，還有attribute、number、selector-class等各種類型。有了這些關(guān)鍵詞，我們就可以把這些文本單獨選取出來，然后高亮成不同的顏色。
接下來，就需要對代碼內(nèi)容進(jìn)行遍歷了，方法也是類似的，如下：
const nodes = pre.firstChild
const text = nodes.textContent
const highlightMap = {}
let startPos = 0;
words.filter(el => el.scope).forEach(el => {
const str = el.children[0]
const scope = el.scope
const index = text.indexOf(str, startPos);
if (index < 0) {
return
}
const item = {
start: index,
scope: scope,
end: index + str.length,
str: str
}
if (highlightMap[scope]){
highlightMap[scope].push(item)
} else {
highlightMap[scope] = [item]
}
startPos = index + str.length;
})
Object.entries(highlightMap).forEach(function([k,v]){
const ranges = v.map(({start, end}) => {
const range = new Range();
range.setStart(nodes, start);
range.setEnd(nodes, end);
return range;
});
const highlight = new Highlight(...ranges.flat());
CSS.highlights.set(k, highlight);
})
}
highlights(code)
code.addEventListener('input', function(){
highlights(this)
})
最后，根據(jù)不同的類型，定義不同的顏色就行了，如下：
::highlight(built_in) {
color: #c18401;
}
::highlight(comment) {
color: #a0a1a7;
font-style: italic;
}
::highlight(number),
::highlight(selector-class){
color: #986801;
}
::highlight(attr) {
color: #986801;
}
::highlight(string) {
color: #50a14f;
}
::highlight(selector-pseudo) {
color: #986801;
}
::highlight(attribute) {
color: #50a14f;
}
::highlight(keyword) {
color: #a626a4;
}這樣就得到了一個支持代碼高亮的簡易編輯器了。
相比傳統(tǒng)的編輯器而言，這個屬于純文本編輯，非常輕量，在高亮的同時也不會影響光標(biāo)，因為不會生成新的??dom??，性能也是超級棒。
完整代碼可以查看以下任意鏈接：
- CSS highlight editor (juejin.cn)[15]
- CSS highlight editor (codepen.io)[16]
- CSS highlight editor (runjs.work)[17]
六、最后總結(jié)一下
以上就是關(guān)于CSS Custom Highlight API的使用方式以及應(yīng)用示例了，下面再來回顧一下使用步驟：
- 創(chuàng)建選區(qū)，new Range。
- 創(chuàng)建高亮，new Highlight。
- 注冊高亮，CSS.highlights.set。
- 自定義樣式，::highlight()。
相比傳統(tǒng)使用標(biāo)簽的方式而已，有很多優(yōu)點
- 使用場景更廣泛，很多情況下不能修改dom或者成本極大
- 性能更高，避免了操作dom?帶來的額外開銷，在dom?較多情況下性能差異至少100倍
- 幾乎沒有副作用，能有效減少dom變化引起的其他影響，比如光標(biāo)選區(qū)的處理
其實歸根結(jié)底，都是dom?變化帶來的，而Highlight API恰好能有效避開這個問題。當(dāng)然也有一些缺陷，由于僅僅能改變文本相關(guān)樣式，所以也存在一些局限性，這個就需要權(quán)衡了，目前兼容性也還不足，僅適用于內(nèi)部項目，敬請期待
參考資料
[1]CSS Custom Highlight API: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API。
[2]Range: https://developer.mozilla.org/en-US/docs/Web/API/Range。
[3]Highlight: https://developer.mozilla.org/en-US/docs/Web/API/Highlight。
[4]CSS Custom Highlight API (juejin.cn): https://code.juejin.cn/pen/7198496899391815736。
[5]CSS Custom Highlight API (codepen.io): https://codepen.io/xboxyan/pen/qByzGYr。
[6]CSS Custom Highlight API (runjs.work): https://runjs.work/projects/450431c8f0064298。
[7]CSS Highlight search (juejin.cn): https://code.juejin.cn/pen/7198488612801871929。
[8]CSS Highlight search (codepen.io): https://codepen.io/xboxyan/pen/eYjwoqo。
[9]CSS Highlight search (runjs.work): https://runjs.work/projects/a661feba3dad44c9。
[10]https://ffiori.github.io/highlight-api-demos/demo-performance.html: https://ffiori.github.io/highlight-api-demos/demo-performance.html。
[11]Highlight performance demo (juejin.cn): https://code.juejin.cn/pen/7198487962978353208。
[12]Highlight performance demo (codepen.io): https://codepen.io/xboxyan/pen/YzjoMmp。
[13]Highlight performance demo (runjs.work): https://runjs.work/projects/e5fe09f70d324d99。
[14]highlight.js: https://highlightjs.org/。
[15]CSS highlight editor (juejin.cn): https://code.juejin.cn/pen/7198487629262749756。
[16]CSS highlight editor (codepen.io): https://codepen.io/xboxyan/pen/RwBzOmK。
[17]CSS highlight editor (runjs.work): https://runjs.work/projects/9ff7ab8f12844ce1。
