最近做項(xiàng)目遇到這樣的一個(gè)功能：在網(wǎng)頁(yè)中高亮關(guān)鍵字。
本以為一個(gè) innerHTML replace 就能實(shí)現(xiàn)的簡(jiǎn)單操作，卻遇到了許多的問(wèn)題。本文就記錄這些問(wèn)題和最終的完美解決辦法， 希望能對(duì)有同樣遭遇的小伙伴有所幫助。只對(duì)結(jié)果感興趣的，忽略過(guò)程，直接跳過(guò)看結(jié)果吧~
常用做法：正則替換
思路：要想高亮元素，那么需要將關(guān)鍵字提取出來(lái)用標(biāo)簽包裹，然后對(duì)標(biāo)簽進(jìn)行樣式調(diào)整。使用 innerHTML，或 outHTML, 而不能使用 innerText,outText。
const regex = new RegExp(keyword,"g")
element.innerHTML = element.innerHTML.replace(regex,"<b class="a">"+keyword+"</b>")
element.classList.add("highlight")
這樣做存在的隱患有如下：
()\
div
<div id="parent">
<div class="test">test</div>
</div>
關(guān)鍵字父節(jié)點(diǎn) element 通過(guò) class 來(lái)進(jìn)行背景染色處理，對(duì)原始DOM有一定程度污染，可能對(duì) element 再次定位造成影響。（作為插件希望盡可能少改變?cè)糄OM）
正則優(yōu)化一：僅處理位于標(biāo)簽內(nèi)的元素
var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 轉(zhuǎn)義處理keyword包含的特殊字符，如 /.
var finder = new RegExp(">.*?"++".*?<") // 提取位于標(biāo)簽內(nèi)的文本，避免誤操作 class、id 等
element.innerHTML = element.innerHTML.replace(finder,function(matched){
return matched.replace(text,"<br>"+text+</br>)
})// 對(duì)提取的標(biāo)簽內(nèi)文本進(jìn)行關(guān)鍵字替換
以能解決大多數(shù)問(wèn)題，但依舊存在的問(wèn)題是,只要標(biāo)簽屬性存在類似 < 符號(hào)，將會(huì)打破匹配規(guī)則導(dǎo)致正則提取內(nèi)容錯(cuò)誤, HTML5 dataset 可以自定義任意內(nèi)容，故這些特殊字符是無(wú)法避免的。
<div dataset="p>d">替換</div>
正則優(yōu)化二：清除可能影響的標(biāo)簽
<div id="keyword">keyword</div>
=》將閉合標(biāo)簽用變量替換
[replaced1]keyword[replaced2]//閉合標(biāo)簽內(nèi) id="keyword" 不會(huì)被處理
=》
[replaced1]<b>keyword</b>[replaced2]
=》將暫存變量 replaced 替換為原先標(biāo)簽
<div id="keyword"><b>keyword</b></div>
- 這種思路及源碼從這里來(lái)， 但存在問(wèn)題是：
- 如果 [replaced1] 包含 keyword, 那么替換時(shí)將發(fā)生異常
最重要的，當(dāng)標(biāo)簽值中包含 <> 符號(hào)時(shí)，此方法也不能正確的提取標(biāo)簽
總之在經(jīng)過(guò)了N多嘗試之后，通過(guò)正則都沒(méi)能有效的處理各種情況。然后換了個(gè)思路，不通過(guò)字符串的方式，通過(guò)節(jié)點(diǎn)處理。element.childNodes 可以最有效的清理標(biāo)簽內(nèi)的干擾信息。
[完美解決方案]通過(guò) DOM 節(jié)點(diǎn)處理
<div id="parent">
keyword 1
<span id="child">
keyword 2
</span>
</div>
通過(guò) parent.childNodes 得到所有子節(jié)點(diǎn)。child 節(jié)點(diǎn)可以通過(guò) innerText.replce(keyword,result) 的方式替換得到想要的高亮效果,如下： <span id="child"><b>keyword</b> 2</span> （遞歸處理：當(dāng)child節(jié)點(diǎn)不含子節(jié)點(diǎn)時(shí)進(jìn)行replace操作）。
但是 keyword 1 是屬于文本節(jié)點(diǎn)，只能修改文本內(nèi)容，無(wú)法增加 HTML，更無(wú)法單獨(dú)控制其樣式。而文本節(jié)點(diǎn)也不能轉(zhuǎn)換為普通節(jié)點(diǎn)，這也是最苦惱的事情。
最后~，本文的重點(diǎn)來(lái)了，因?yàn)檫@個(gè)功能，讓我第一次認(rèn)真接觸到了文本節(jié)點(diǎn)這個(gè)東西。從這里發(fā)現(xiàn)了Text，使用切割文本節(jié)點(diǎn)并替換的方式實(shí)現(xiàn)高亮。
源碼以及還原高亮見源碼
const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
highlight = function (node,reg){
if (node.nodeType == 3) { //只處理文本節(jié)點(diǎn)
const match = node.data.match(new RegExp(reg));
if (match) {
const highlightEl = document.createElement("b");
highlightEl.dataset.highlight="y"
const wordNode = node.splitText(match.index)
wordNode.splitText(match[0].length); // 切割成前 關(guān)鍵詞 后三個(gè)Text 節(jié)點(diǎn)
const wordNew = document.createTextNode(wordNode.data);
highlightEl.appendChild(wordNew);//highlight 節(jié)點(diǎn)構(gòu)建成功
wordNode.parentNode.replaceChild(highlightEl, wordNode);// 替換該文本節(jié)點(diǎn)
}
} else if (node.nodeType == 1 && node.dataset.highlight!="y"
) {
for (var i = 0; i < node.childNodes.length; i++) {
highlight(node.childNodes[i], reg);
i++
}
}
}
總結(jié)
以上所述是小編給大家介紹的HTML高亮關(guān)鍵字的完美解決方案，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
