正則優(yōu)化一：僅處理位于標(biāo)簽內(nèi)的元素

1

2

3

4

5

6

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

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

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

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

})// 對提取的標(biāo)簽內(nèi)文本進(jìn)行關(guān)鍵字替換

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

1

替換

(推薦教程：html教程)

正則優(yōu)化二：清除可能影響的標(biāo)簽

1

2

3

4

5

6

7

keyword

=》將閉合標(biāo)簽用變量替換

[replaced1]keyword[replaced2]//閉合標(biāo)簽內(nèi) id="keyword" 不會被處理

=》

[replaced1]keyword[replaced2]

=》將暫存變量 replaced 替換為原先標(biāo)簽

keyword

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

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

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

[完美解決方案]通過 DOM 節(jié)點處理

1

2

3

4

5

6

keyword 1

keyword 2

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。