html高亮顯示關鍵字的方法

本篇文章和大家了解一下html高亮顯示關鍵字的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

正則優化一：僅處理位于標簽內的元素

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，更無法單獨控制其樣式。而文本節點也不能轉換為普通節點。

以上就是html高亮顯示關鍵字方法的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注億速云行業資訊頻道哦！