IT技(ji)術互動交流平台

火红彩票网官网

作者︰whl  發布日期︰2020-02-26 01:43:00

  很(hen)多人(ren)都(du)表(biao)示在寫代碼的時候(hou)都(du)以(yi)為只需要(yao)使用(yong)innerHTML replace就能(neng)進行簡單的操作,但在進行實際操作的時候(hou)卻(que)發現自(zi)己(ji)想的太(tai)簡單了,因此走了不少的彎路,踫到不少的問題。小編整理了一些比(bi)較具有價值的問題和能(neng)夠解決的辦(ban)法。

  常用(yong)做(zuo)法︰正則替換

  思路︰要(yao)想高亮元素,那麼需要(yao)將關鍵(jian)字(zi)提取(qu)出來(lai)cong)yong)標簽(qian)包裹,然後對標簽(qian)進行樣(yang)式調整。使用(yong) innerHTML,或 outHTML, 而(er)不能(neng)使用(yong) innerText,outText。

  這樣(yang)做(zuo)存在的隱患jia)腥縵攏/p>

  keyword 如果是 ()\ 等正則對象的關鍵(jian)字(zi)將會構建正則對象失敗。(可以(yi)通過(guo)轉(zhuan)義解決)

  keyword 如果是一些 HTML 標簽(qian)如 div 將會對 innerHTML 進行錯(cuo)誤的替換

  keyword 如果和一些DOM屬(shu)性名、值相同,也會導致異常替換。如下當 keyword 為 test 時,會將 class 名也錯(cuo)誤的替換掉︰

  關鍵(jian)字(zi)父(fu)節點(dian) element 通過(guo) class 來(lai)進行背景染(ran)色(se)處理,對原始DOM有一定程度(du)污染(ran),可能(neng)對 element 再次定位造(zao)成影(ying)響。(作為插件希(xi)望盡可能(neng)少改變原始DOM)

  正則優化一︰僅處理位于標簽(qian)內的元素

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

  正則優化二︰清除可能(neng)影(ying)響的標簽(qian)

  這種思路及(ji)源碼從(cong)這里來(lai), 但存在問題是︰

  如果 [replaced1] 包含 keyword, 那麼替換時將發生異常

  最重(zhong)要(yao)的,當標簽(qian)值中包含 <> 符號時,此方法也不能(neng)正確的提取(qu)標簽(qian)

  總之在經過(guo)了N多嘗試之後,通過(guo)正則都(du)沒能(neng)有效(xiao)的處理各(ge)種情況。然後換了個思路,不通過(guo)字(zi)符串(chuan)的方式,通過(guo)節點(dian)處理。element.childNodes 可以(yi)最有效(xiao)的清理標簽(qian)內的干擾信息(xi)。

  [完美(mei)解決方案]通過(guo) DOM 節點(dian)處理

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

  但是 keyword 1 是屬(shu)于文本節點(dian),只能(neng)修(xiu)改文本內容(rong),無法增加(jia) HTML,更無法單獨控制其樣(yang)式。而(er)文本節點(dian)也不能(neng)轉(zhuan)換為普(pu)通節點(dian),這也是最苦惱的事情。

  最後~,本文的重(zhong)點(dian)來(lai)了,因為這個功能(neng),讓我第一次認真(zhen)接觸到了文本節點(dian)這個東西(xi)。從(cong)這里發現了Text,使用(yong)切割文本節點(dian)並(bing)替換的方式實現高亮。

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

高亮見源碼

  最後,留(liu)個彩蛋,以(yi)上xi)椒ㄒ彩譴嬖諞桓魴bug 的,有興趣可以(yi)去發現一下。

  上文主(zhu)要(yao)是把在編寫HTML高亮關鍵(jian)字(zi)的實現代碼過(guo)程中需要(yao)用(yong)到的相關資料給大家分享一下,希(xi)望可以(yi)幫到踫到上述(shu)問題的朋友,如果大家只對結果有興趣的話(hua)也是可以(yi)直接跳到結尾(wei)看(kan)結果的。

火红彩票网官网

    Tag標簽(qian)︰HTML高亮關鍵(jian)字(zi)  
    • 火红彩票网官网

    About IT165 - 廣告服(fu)務 - pc28官网隱私聲(sheng)明 - 版權申明 - 腾讯分分彩代理官网免責條款(kuan) - 網站(zhan)地圖 - 彩乐园官网網友投(tou)稿 - 聯系方式
    本站(zhan)內容(rong)來(lai)自(zi)于互聯網,僅供用(yong)于網絡技(ji)術學習,學習中請遵循相關法律法規(gui)
    火红彩票网官网 | 下一页