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)

這樣做存在的隱患有如下：

• keyword 如果是()/ 等正規物件的關鍵字將會建構正規物件失敗。 （可以透過轉義解決）
• keyword 如果是一些HTML 標籤如div 將會對innerHTML 進行錯誤的替換
• keyword 如果和一些DOM屬性名稱、值相同，也會導致異常替換。如下當keyword 為test 時，會將class 名也錯誤的替換掉：

 <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 可以最有效的清理標籤內的干擾資訊。

 <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，使用切割文字節點並替換的方式來實現高亮。

源碼以及還原高亮見源碼

 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 的，有興趣可以去發現一下。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。