IT技術互動交流平台

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

作者||-虞城教育网:whl  發布日期||038彩票网信得过吗:2018-11-13 08:32:00

  很多人都表示在寫代碼的時候都以為隻需要使用innerHTML replace就能進行簡單的操作_qq游戏2011官方下载正式版,但在進行實際操作的時候卻發現自己想的太簡單了--坛缘坊,因此走了不少的彎路--csol防沉迷,碰到不少的問題__锦江区公众信息网。小編整理了一些比較具有價值的問題和能夠解決的辦法||铠甲勇士刑天后传全集。

  常用做法|-海伦二中贴吧:正則替換

  思路--谢园的学生:要想高亮元素||_金太郎爱米小米歌词,那麼需要將關鍵字提取出來用標簽包裹-__jellybird果冻酒,然後對標簽進行樣式調整-11086棋牌官网。使用 innerHTML|北京466鼻腔科医院,或 outHTML, 而不能使用 innerText,outText|盈彩彩票真的假的。

  這樣做存在的隱患有如下_||160彩票春秋网站:

  keyword 如果是 ()\ 等正則對象的關鍵字將會構建正則對象失敗-|东北二嫂水仙。(可以通過轉義解決)

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

  keyword 如果和一些DOM屬性名_戴刘菲、值相同_-csol防沉迷,也會導致異常替換-||132彩票苹果版。如下當 keyword 為 test 時-amy rachle,會將 class 名也錯誤的替換掉_123期富婆看①肖①特:

  關鍵字父節點 element 通過 class 來進行背景染色處理__|桑拿爽记,對原始DOM有一定程度汙染-|_亿贝平台网页,可能對 element 再次定位造成影響_|04年双色球事件。(作為插件希望盡可能少改變原始DOM)

  正則優化一||易彩压大小怎么玩:僅處理位於標簽內的元素

  以能解決大多數問題_qq2009精简版,但依舊存在的問題是,隻要標簽屬性存在類似 < 符號_-都匀蓝宇装饰,將會打破匹配規則導致正則提取內容錯誤, HTML5 dataset 可以自定義任意內容-封丘县政府,故這些特殊字符是無法避免的|||新密五个人火了全照。

  正則優化二_令狐冲甲:清除可能影響的標簽

  這種思路及源碼從這裏來|_|网游快车金牌网吧下载, 但存在問題是|_科瑞计算簿注册码:

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

  最重要的|-_腋自清,當標簽值中包含 <> 符號時__十堰物流云帆配,此方法也不能正確的提取標簽

  總之在經過了N多嚐試之後-||窖口客运站网上订票,通過正則都沒能有效的處理各種情況--_御龙在天野蘑菇。然後換了個思路_|_2d横版格斗网游,不通過字符串的方式赢钱彩是什么东西,通過節點處理__金牛数据财经日历。element.childNodes 可以最有效的清理標簽內的幹擾信息||牛网卡盟。

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

  通過 parent.childNodes 得到所有子節點--|诺基亚7070拆机。child 節點可以通過 innerText.replce(keyword,result) 的方式替換得到想要的高亮效果,如下|-云顶国际登录官网首页: keyword 2 (遞歸處理---青岛友信机场宾馆:當child節點不含子節點時進行replace操作)_|_沪通铁路规划图。

  但是 keyword 1 是屬於文本節點东升伟业股票,隻能修改文本內容_|_038彩票平台怎么样,無法增加 HTML_--3g彩票门户网站,更無法單獨控製其樣式-|-卓易彩票里的钱怎么取。而文本節點也不能轉換為普通節點-_年年顺调和油,這也是最苦惱的事情--娱乐天地检点手机版怎么下载。

  最後~__-咖啡恋人馆,本文的重點來了-|_二胡几根玄,因為這個功能-_口工漫画里库番本,讓我第一次認真接觸到了文本節點這個東西_|金天桥。從這裏發現了Text-||现任北京市委书记是谁,使用切割文本節點並替換的方式實現高亮_-369彩票。

  源碼以及還原高亮見源碼

高亮見源碼

  最後-_|105彩票官网苹果,留個彩蛋-|长途电话前面加什么,以上方法也是存在一個小 bug 的___云顶娱乐李逵捕鱼,有興趣可以去發現一下|_易彩票网站。

  上文主要是把在編寫HTML高亮關鍵字的實現代碼過程中需要用到的相關資料給大家分享一下|_陈少游,希望可以幫到碰到上述問題的朋友-|保健按摩师培训教材,如果大家隻對結果有興趣的話也是可以直接跳到結尾看結果的_|-男科悍医。

延伸閱讀|-汾西矿业吧:

Tag標簽__13彩怎么玩不亏: HTML高亮關鍵字  
  • 專題推薦

  • Windows7係統入門 優化 技巧技術專題
  • Windows7係統專題 無論是升級操作係統||长青贝妮、資料備份_-和讯模拟炒股、加強資料的安全及管...... 詳細
About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯係方式
本站內容來自於互聯網,僅供用於網絡技術學習,學習中請遵循相關法律法規
腾讯分分彩众发彩票秒速赛车亿客隆彩票一品彩票平安彩票

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!