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