HTML高亮关键字的实现代码


Posted in HTML / CSS onOctober 22, 2018

本以为一个 innerHTML replace 就能实现的简单操作,却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法, 希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的,忽略过程,直接跳过看结果吧~

常用做法:正则替换

思路:要想高亮元素,那么需要将关键字提取出来用标签包裹,然后对标签进行样式调整。使用 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 如果是 ()\ 等正则对象的关键字将会构建正则对象失败。(可以通过转义解决)
  • keyword 如果是一些 HTML 标签如 div 将会对 innerHTML 进行错误的替换
  • keyword 如果和一些DOM属性名、值相同,也会导致异常替换。如下当 keyword 为 test 时,会将 class 名也错误的替换掉:
<div id="parent">
    <div class="test">test</div>
  </div>

关键字父节点 element 通过 class 来进行背景染色处理,对原始DOM有一定程度污染,可能对 element 再次定位造成影响。(作为插件希望尽可能少改变原始DOM)

正则优化一:仅处理位于标签内的元素

var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 转义处理keyword包含的特殊字符,如 /.
var finder = new RegExp(">.*?"++".*?<") // 提取位于标签内的文本,避免误操作 class、id 等

element.innerHTML = element.innerHTML.replace(finder,function(matched){
        return matched.replace(text,"<br>"+text+</br>)
})// 对提取的标签内文本进行关键字替换

以能解决大多数问题,但依旧存在的问题是,只要标签属性存在类似 < 符号,将会打破匹配规则导致正则提取内容错误, HTML5 dataset 可以自定义任意内容,故这些特殊字符是无法避免的。

<div dataset="p>d">替换</div>

正则优化二:清除可能影响的标签

<div id="keyword">keyword</div>
  =》将闭合标签用变量替换
  [replaced1]keyword[replaced2]//闭合标签内 id="keyword" 不会被处理
  =》
  [replaced1]<b>keyword</b>[replaced2]
  =》将暂存变量 replaced 替换为原先标签
  <div id="keyword"><b>keyword</b></div>

这种思路及源码从这里来, 但存在问题是:

  • 如果 [replaced1] 包含 keyword, 那么替换时将发生异常
  • 最重要的,当标签值中包含 <> 符号时,此方法也不能正确的提取标签

总之在经过了N多尝试之后,通过正则都没能有效的处理各种情况。然后换了个思路,不通过字符串的方式,通过节点处理。element.childNodes 可以最有效的清理标签内的干扰信息。

[完美解决方案]通过 DOM 节点处理

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

通过 parent.childNodes 得到所有子节点。child 节点可以通过 innerText.replce(keyword,result) 的方式替换得到想要的高亮效果,如下: <span id="child"><b>keyword</b> 2</span> (递归处理:当child节点不含子节点时进行replace操作)。

但是 keyword 1 是属于文本节点,只能修改文本内容,无法增加 HTML,更无法单独控制其样式。而文本节点也不能转换为普通节点,这也是最苦恼的事情。

最后~,本文的重点来了,因为这个功能,让我第一次认真接触到了文本节点这个东西。从这里发现了Text,使用切割文本节点并替换的方式实现高亮。

源码以及还原高亮见源码

const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
highlight = function (node,reg){
    if (node.nodeType == 3) {  //只处理文本节点
        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); // 切割成前 关键词 后三个Text 节点
          const wordNew = document.createTextNode(wordNode.data);
          highlightEl.appendChild(wordNew);//highlight 节点构建成功
          wordNode.parentNode.replaceChild(highlightEl, wordNode);// 替换该文本节点
        }
    } else if (node.nodeType == 1 && node.dataset.highlight!="y"
    ) {
        for (var i = 0; i < node.childNodes.length; i++) {
            highlight(node.childNodes[i], reg);
            i++
        }
    }  
}

最后,留个彩蛋,以上方法也是存在一个小 bug 的,有兴趣可以去发现一下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
详解rem 适配布局
Oct 31 #HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 #HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 #HTML / CSS
canvas像素画板的实现代码
Nov 21 #HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 #HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 #HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 #HTML / CSS
You might like
php的array_multisort()使用方法介绍
2012/05/16 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
Python导入oracle数据的方法
2015/07/10 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
审计班子对照检查材料
2014/08/27 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
个人收入证明范本
2014/09/18 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python