主頁(yè) > 知識(shí)庫(kù) > HTML高亮關(guān)鍵字的實(shí)現(xiàn)代碼

HTML高亮關(guān)鍵字的實(shí)現(xiàn)代碼

熱門(mén)標(biāo)簽:洛陽(yáng)市伊川縣地圖標(biāo)注中心官網(wǎng) 電銷機(jī)器人視頻 會(huì)聲會(huì)影怎樣做地圖標(biāo)注效果 搜狗星級(jí)酒店地圖標(biāo)注 地圖標(biāo)注自己去過(guò)的地方 平頂山電子地圖標(biāo)注怎么修改 高德地圖標(biāo)注錯(cuò)誤怎么修改 江蘇高頻外呼系統(tǒng)線路 標(biāo)準(zhǔn)智能外呼系統(tǒng)

本以為一個(gè) innerHTML replace 就能實(shí)現(xiàn)的簡(jiǎn)單操作,卻遇到了許多的問(wèn)題。本文就記錄這些問(wèn)題和最終的完美解決辦法, 希望能對(duì)有同樣遭遇的小伙伴有所幫助。只對(duì)結(jié)果感興趣的,忽略過(guò)程,直接跳過(guò)看結(jié)果吧~

常用做法:正則替換

思路:要想高亮元素,那么需要將關(guān)鍵字提取出來(lái)用標(biāo)簽包裹,然后對(duì)標(biāo)簽進(jìn)行樣式調(diào)整。使用 innerHTML,或 outHTML, 而不能使用 innerText,outText。

const regex = new RegExp(keyword,"g")
element.innerHTML = element.innerHTML.replace(regex,"<b class="a">"+keyword+"</b>")
element.classList.add("highlight")

這樣做存在的隱患有如下:

  • keyword 如果是 ()\ 等正則對(duì)象的關(guān)鍵字將會(huì)構(gòu)建正則對(duì)象失敗。(可以通過(guò)轉(zhuǎn)義解決)
  • keyword 如果是一些 HTML 標(biāo)簽如 div 將會(huì)對(duì) innerHTML 進(jìn)行錯(cuò)誤的替換
  • keyword 如果和一些DOM屬性名、值相同,也會(huì)導(dǎo)致異常替換。如下當(dāng) keyword 為 test 時(shí),會(huì)將 class 名也錯(cuò)誤的替換掉:
<div id="parent">
    <div class="test">test</div>
  </div>

關(guān)鍵字父節(jié)點(diǎn) element 通過(guò) class 來(lái)進(jìn)行背景染色處理,對(duì)原始DOM有一定程度污染,可能對(duì) element 再次定位造成影響。(作為插件希望盡可能少改變?cè)糄OM)

正則優(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>)
})// 對(duì)提取的標(biāo)簽內(nèi)文本進(jìn)行關(guān)鍵字替換

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

<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" 不會(huì)被處理
  =》
  [replaced1]<b>keyword</b>[replaced2]
  =》將暫存變量 replaced 替換為原先標(biāo)簽
  <div id="keyword"><b>keyword</b></div>

這種思路及源碼從這里來(lái), 但存在問(wèn)題是:

  • 如果 [replaced1] 包含 keyword, 那么替換時(shí)將發(fā)生異常
  • 最重要的,當(dāng)標(biāo)簽值中包含 <> 符號(hào)時(shí),此方法也不能正確的提取標(biāo)簽

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

[完美解決方案]通過(guò) DOM 節(jié)點(diǎn)處理

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

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

但是 keyword 1 是屬于文本節(jié)點(diǎn),只能修改文本內(nèi)容,無(wú)法增加 HTML,更無(wú)法單獨(dú)控制其樣式。而文本節(jié)點(diǎn)也不能轉(zhuǎn)換為普通節(jié)點(diǎn),這也是最苦惱的事情。

最后~,本文的重點(diǎn)來(lái)了,因?yàn)檫@個(gè)功能,讓我第一次認(rèn)真接觸到了文本節(jié)點(diǎn)這個(gè)東西。從這里發(fā)現(xiàn)了Text,使用切割文本節(jié)點(diǎn)并替換的方式實(shí)現(xiàn)高亮。

源碼以及還原高亮見(jiàn)源碼

const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
highlight = function (node,reg){
    if (node.nodeType == 3) {  //只處理文本節(jié)點(diǎn)
        const match = node.data.match(new RegExp(reg));
        if (match) {
          const highlightEl = document.createElement("b");
          highlightEl.dataset.highlight="y"
          const wordNode = node.splitText(match.index)
          wordNode.splitText(match[0].length); // 切割成前 關(guān)鍵詞 后三個(gè)Text 節(jié)點(diǎn)
          const wordNew = document.createTextNode(wordNode.data);
          highlightEl.appendChild(wordNew);//highlight 節(jié)點(diǎn)構(gòu)建成功
          wordNode.parentNode.replaceChild(highlightEl, wordNode);// 替換該文本節(jié)點(diǎn)
        }
    } else if (node.nodeType == 1 && node.dataset.highlight!="y"
    ) {
        for (var i = 0; i < node.childNodes.length; i++) {
            highlight(node.childNodes[i], reg);
            i++
        }
    }  
}

最后,留個(gè)彩蛋,以上方法也是存在一個(gè)小 bug 的,有興趣可以去發(fā)現(xiàn)一下。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:廣西 蚌埠 阿克蘇 廣東 常德 果洛 松原 鄂爾多斯

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML高亮關(guān)鍵字的實(shí)現(xiàn)代碼》,本文關(guān)鍵詞  HTML,高亮,關(guān)鍵字,的,實(shí)現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML高亮關(guān)鍵字的實(shí)現(xiàn)代碼》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于HTML高亮關(guān)鍵字的實(shí)現(xiàn)代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章