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

10年積累的成都做網(wǎng)站、網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計制作后付款的網(wǎng)站建設(shè)流程，更有印臺免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

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

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

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

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

<div id="keyword">keyword</div>
  =》將閉合標(biāo)簽用變量替換
  [replaced1]keyword[replaced2]//閉合標(biāo)簽內(nèi) id="keyword" 不會被處理
  =》
  [replaced1]<b>keyword</b>[replaced2]
  =》將暫存變量 replaced 替換為原先標(biāo)簽
  <div id="keyword"><b>keyword</b></div>

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

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

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

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

<div id="parent">
    keyword 1
  <span id="child">
    keyword 2
  </span>
 </div>

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

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

以上就是html高亮顯示關(guān)鍵字方法的簡略介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道哦！

當(dāng)前名稱：html高亮顯示關(guān)鍵字的方法-創(chuàng)新互聯(lián)
標(biāo)題來源：http://chinadenli.net/article30/edopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、虛擬主機、自適應(yīng)網(wǎng)站、移動網(wǎng)站建設(shè)、ChatGPT、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)