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 能夠最有效的清理標籤內的干擾信息。

[完美解決方案]經過 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，使用切割文本節點並替換的方式實現高亮。

源碼以及還原高亮見源碼

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