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 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规