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

1

2

3

4

5

6

var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 轉義處理keyword包含的特殊字符，如 /.

var finder = new RegExp(">.*?"++".*?

element.innerHTML = element.innerHTML.replace(finder,function(matched){

return matched.replace(text,"
"+text+)

})// 對提取的標簽內文本進行關鍵字替換

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

1

替換

(推薦教程：html教程)

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

1

2

3

4

5

6

7

keyword

=》將閉合標簽用變量替換

[replaced1]keyword[replaced2]//閉合標簽內 id="keyword" 不會被處理

=》

[replaced1]keyword[replaced2]

=》將暫存變量 replaced 替換為原先標簽

keyword

問題：如果 [replaced1] 包含 keyword, 那么替換時將發生異常。

最重要的，當標簽值中包含 <> 符號時，此方法也不能正確的提取標簽。

總之在經過了N多嘗試之后，通過正則都沒能有效的處理各種情況。然后換了個思路，不通過字符串的方式，通過節點處理。element.childNodes 可以最有效的清理標簽內的干擾信息。

[完美解決方案]通過 DOM 節點處理

1

2

3

4

5

6

keyword 1

keyword 2

通過 parent.childNodes 得到所有子節點。child 節點可以通過 innerText.replce(keyword,result) 的方式替換得到想要的高亮效果,如下： keyword 2 (遞歸處理：當child節點不含子節點時進行replace操作)。

但是 keyword 1 是屬于文本節點，只能修改文本內容，無法增加 HTML，更無法單獨控制其樣式。而文本節點也不能轉換為普通節點。

總結

以上是生活随笔為你收集整理的html5中加亮文本,html实现高亮关键字的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。