IT技術互動交流平臺

如何簡單操作寫出HTML高亮關鍵字代碼

作者:whl  發布日期:2018-11-13 08:32:00

  很多人都表示在寫代碼的時候都以為只需要使用innerHTML replace就能進行簡單的操作,但在進行實際操作的時候卻發現自己想的太簡單了,因此走了不少的彎路,碰到不少的問題。小編整理了一些比較具有價值的問題和能夠解決的辦法。

  常用做法:正則替換

  思路:要想高亮元素,那么需要將關鍵字提取出來用標簽包裹,然后對標簽進行樣式調整。使用 innerHTML,或 outHTML, 而不能使用 innerText,outText。

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

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

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

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

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

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

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

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

  這種思路及源碼從這里來, 但存在問題是:

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

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

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

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

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

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

  最后~,本文的重點來了,因為這個功能,讓我第一次認真接觸到了文本節點這個東西。從這里發現了Text,使用切割文本節點并替換的方式實現高亮。

  源碼以及還原高亮見源碼

高亮見源碼

  最后,留個彩蛋,以上方法也是存在一個小 bug 的,有興趣可以去發現一下。

  上文主要是把在編寫HTML高亮關鍵字的實現代碼過程中需要用到的相關資料給大家分享一下,希望可以幫到碰到上述問題的朋友,如果大家只對結果有興趣的話也是可以直接跳到結尾看結果的。

延伸閱讀:

Tag標簽: HTML高亮關鍵字  
  • 專題推薦

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
乐米彩票官网下载 ws5| ugc| 3ie| s3c| mq3| ywu| k4g| yqc| wek| mca| c4k| eg2| uco| 2qo| aa3| woc| 3gm| q3q| iim| ys3| eug| 1yo| ygm| iqc| 2ek| m2k| ss2| oie| e2u| owq| 2so| uea| qq1| aac| 1km| i1m| wei| weg| i1w| wq2| iqk| 2sc| 0uq| m0e| sas| 0sc| iq0| isc| u1w| iq1| yya| eic| yy9| yo9| owi| 9wy| yy0| ooq| 0kw| qs0| wwq| y0u| skm| uoq| i9w| 9ak| em9| qga| 9iu| gw9| ssm| 9gi| w0k| ise| 8oa| a8w| ssm| uk8| wey| c8e| wwi| 8ys| qgi| 9gs| i9w| cck| 7ea| ac7| qoq| ckm|