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

var formatKeyword = text.replace(/[-////^$*+?.()|[/]{}]/g, '//$&') // 轉義處理keyword包含的特殊字符，如 /.var finder = new RegExp(">.*?"++".*?<") // 提取位于標簽內的文本，避免誤操作 html' target='_blank'>class、id 等 element.innerHTML = element.innerHTML.replace(finder,function(matched){        return matched.replace(text,"<br>"+text+</br>)})// 對提取的標簽內文本進行關鍵字替換

以能解決大多數問題，但依舊存在的問題是,只要標簽屬性存在類似 < 符號，將會打破匹配規則導致正則提取內容錯誤, HTML5 dataset 可以自定義任意內容，故這些特殊字符是無法避免的。

<div dataset="p>d">替換</div>

（推薦教程：html教程）

正則優化二：清除可能影響的標簽

<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實現高亮關鍵字的詳細內容，更多請關注武林網其它相關文章！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。