HTML高亮關鍵字真麻煩
有這麼一個功能:在網頁中高亮關鍵字。
本以為一個 innerHTML replace 就能實現的簡單操作,卻遇到了許多的問題。本文就記錄這些問題和最終的完美解決辦法, 希望能對有同樣遭遇的小夥伴有所幫助。只對結果感興趣的,忽略過程,直接跳過看結果吧~
常用做法:正則替換
思路:要想高亮元素,那麼需要將關鍵字提取出來用標籤包裹,然後對標籤進行樣式調整。使用 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> 複製程式碼
- 關鍵字父節點 element 通過 class 來進行背景染色處理,對原始DOM有一定程度汙染,可能對 element 再次定位造成影響。(作為外掛希望儘可能少改變原始DOM)
正則優化一:僅處理位於標籤內的元素
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>) })// 對提取的標籤內文字進行關鍵字替換 複製程式碼
以能解決大多數問題,但依舊存在的問題是,只要標籤屬性存在類似 < 符號,將會打破匹配規則導致正則提取內容錯誤, HTML5 dataset 可以自定義任意內容,故這些特殊字元是無法避免的。
<div dataset="p>d">替換</div> 複製程式碼
正則優化二:清除可能影響的標籤
<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, 那麼替換時將發生異常
- 最重要的,當標籤值中包含 <> 符號時,此方法也不能正確的提取標籤
總之在經過了N多嘗試之後,通過正則都沒能有效的處理各種情況。然後換了個思路,不通過字串的方式,通過節點處理。element.childNodes 可以最有效的清理標籤內的干擾資訊。
[完美解決方案]通過 DOM 節點處理
<div id="parent"> keyword 1 <span id="child"> keyword 2 </span> </div> 複製程式碼
通過 parent.childNodes 得到所有子節點。child 節點可以通過 innerText.replce(keyword,result) 的方式替換得到想要的高亮效果,如下:<span id="child"><b>keyword</b> 2</span>
(遞迴處理:當child節點不含子節點時進行replace操作)。
但是 keyword 1 是屬於文字節點,只能修改文字內容,無法增加 HTML,更無法單獨控制其樣式。而文字節點也不能轉換為普通節點,這也是最苦惱的事情。
最後~,本文的重點來了,因為這個功能,讓我第一次認真接觸到了文字節點這個東西。從這裡發現了Text,使用切割文字節點並替換的方式實現高亮。
ofollow,noindex">原始碼以及還原高亮見原始碼
const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')) highlight = function (node,reg){ if (node.nodeType == 3) {//只處理文字節點 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 節點 const wordNew = document.createTextNode(wordNode.data); highlightEl.appendChild(wordNew);//highlight 節點構建成功 wordNode.parentNode.replaceChild(highlightEl, wordNode);// 替換該文字節點 } } 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 的,有興趣可以去發現一下。