前端高亮功能实现复盘

头像
u3xyz
    阅读 10 分钟
    35

    前端高亮功能实现复盘

    “高亮”功能，个人觉得没必要再解释什么了。作为一名程序猿，天天都会接触高亮：写代码时的语法高亮；使用搜索引擎时的搜索结果高亮。作为一名前端，如果你做过与搜索相关的功能，那么你很有可能就实现过高亮，本文也主要从前端的角度复盘一下“高亮”功能实现的关键知识点。

    高亮

    高亮实现思路

    高亮原理

    对用户的输入进行分词得到关键词，根据关键词搜索得到搜索结果。再次使用关键词从搜索结果中找到匹配，对匹配加上高亮样式，即完成高亮。细分这个过程，会有以下细节点：

    • 对用户输入分词得到关键词

    • 根据关键词得到搜索结果

    • 关键词匹配

    • 对匹配使用高亮样式

    前两步一般在后台完成，后两步才是我们前端的工作，下面通过具体例子来实际演练一下。

    普通文本高亮

    比如我们有这样的文本：“我是中国人，我爱中华人民共和国，中华人民共和国万岁！”，这时我们的关键词是“我”，即要高亮文本中所有的我。代码实现完整如下：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>普通文本高亮</title>
  <style>
    .keyword-match {
      color: red;
    }
  </style>
</head>
<body>
<div>
  原文本：我是中国人，我爱中华人民共和国，中华人民共和国万岁！<br />
  关键词: 我 <br />
  结果如下：<br /><br />
</div>
<div id="content"></div>

<script>
  const content = document.getElementById('content');
  const text = '我是中国人，我爱中华人民共和国，中华人民共和国万岁！';
  const keyword = '我';

  // 根据关键词，对匹配加上高亮样式
  let hightlightText = text.replace(new RegExp(`(${keyword})`, 'g'), `<span class="keyword-match">$1</span>`);

  // 通过innerHTML写入匹配后的内容
  content.innerHTML = hightlightText;
</script>
</body>
</html>

    上面的demo运行效果如下

    普通文本高亮

    上面的例子虽然很简单，但已经完整实现了高亮功能，说明了高亮的实现原理。在实际应用中，我们的关键词多半不会是一个简简单单的“我”，而是一个List，下面我们将关键词改成：我，中华。只需稍加修改，就可以实现同时对“我”，“中华”两个关键词高亮

    <body>
<div>
  原文本：我是中国人，我爱中华人民共和国，中华人民共和国万岁！<br />
  关键词: 我，中华 <br />
  结果如下：<br /><br />
</div>
<div id="content"></div>

<script>
  const content = document.getElementById('content');
  const text = '我是中国人，我爱中华人民共和国，中华人民共和国万岁！';
  const keyword = ['我', '中华']; // 关键词是一个数组

  // new RegExp(`(${keyword})` 改成 new RegExp(`(${keyword.join('|')})`
  let hightlightText = text.replace(new RegExp(`(${keyword.join('|')})`, 'g'), `<span class="keyword-match">$1</span>`);

  // 通过innerHTML写入匹配后的内容
  content.innerHTML = hightlightText;
</script>
</body>

    运行效果：

    普通文本高亮

    上面的代码似乎已经完美了。但如果我们将关键词改成：我，中华，中华人民共和国。再次运行看结果，会发现“中华人民共和国”这个关键词没有被高亮，而“中华”高亮了，但这并不是我们想要的结果。

    注意：如果一个关键词包含另一个关键词，要优先高亮长度较长的词才对。要修复这个Bug也很简单，只需要将字数多的关键词放到关键词数组的最前面即可

    <body>
<div>
  原文本：我是中国人，我爱中华人民共和国，中华人民共和国万岁！<br />
  关键词: 我，中华，中华人民共和国 <br />
  结果如下：<br /><br />
</div>
<div id="content"></div>
<div id="content2"></div>

<script>
  const content = document.getElementById('content');
  const text = '我是中国人，我爱中华人民共和国，中华人民共和国万岁！';
  const keyword = ['我', '中华', '中华人民共和国']; // 关键词是一个数组

  let hightlightText = text.replace(new RegExp(`(${keyword.join('|')})`, 'g'), `<span class="keyword-match">$1</span>`);

  // 通过innerHTML写入匹配后的内容
  content.innerHTML = hightlightText;
</script>

<script>
  const content2 = document.getElementById('content2');
  const text2 = '我是中国人，我爱中华人民共和国，中华人民共和国万岁！';
  const keyword2 = ['中华人民共和国', '中华', '我']; // 将字数多的关键词放到前面，保证字数多的关键词优先匹配

  let hightlightText2 = text.replace(new RegExp(`(${keyword2.join('|')})`, 'g'), `<span class="keyword-match">$1</span>`);

  content2.innerHTML = hightlightText2;
</script>
</body>

    效果如下：

    匹配优先级问题

    富文本高亮

    说完了普通文本的高亮，我们来说说富文本的高亮。所谓富文本，即待高亮的字符串不再是单独的文本，而是html代码。如果你需要富文本编辑器，可以考虑百度的UEditor，富文本编辑器生成的代码就是可以直接插入到页面的html串。

    // 普通文本
我是中国人，我爱中华人民共和国，中华人民共和国万岁！

// 富文本,即html串
<div>我是<span style="font-size: 20px; font-weight: bold; background-color: cyan;">中国人</span>，我爱中华人民共和国，中华人民共和国万岁！</div>
    <body>
富文本高亮
<br />
<br />

<h3>未高亮</h3>
<div id="text">
  <div style="font-style: italic;">我是<span style="font-size: 20px; font-weight: bold; background-color: cyan;">中国人</span>，我爱中华人民共和国，中华人民共和国万岁！</div>
</div>

<br />
<h3>高亮效果</h3>
<div id="content"></div>

<script>
  const content = document.getElementById('content');
  const text = document.getElementById('text').innerHTML; // 富文本串
  const keyword = ['中华人民共和国', '中华', '我'];

  let hightlightText = text.replace(new RegExp(`(${keyword.join('|')})`, 'g'), `<span class="keyword-match">$1</span>`);

  content.innerHTML = hightlightText;
</script>

</body>

    富文本高亮

    这里的高亮实现直接使用了前面普通文本高亮，似乎也能正常工作。但前提是这个富文本串太简单了。我们现在考虑这样一种情况，如果富文本串中的元素属性具有完全匹配关键词的内容，会发生什么呢？

    // 待高亮富文本串
<div style="font-style: italic;" data-attr="中华人民共和国">我是<span style="font-size: 20px; font-weight: bold; background-color: cyan;">中国人</span>，我爱中华人民共和国，中华人民共和国万岁！</div>

    对于上面的字符串，直接使用前面的高亮逻辑，得到的字符串是：

    <div style="font-style: italic;" data-attr="<span class="keyword-match">中华人民共和国</span>"><span class="keyword-match">我</span>是<span style="font-size: 20px; font-weight: bold; background-color: cyan;">中国人</span>，<span class="keyword-match">我</span>爱<span class="keyword-match">中华人民共和国</span>，<span class="keyword-match">中华人民共和国</span>万岁！</div>

    显然，第一个div属性中的“中华人民共和国”不应该被匹配到。如果直接匹配会破坏原来的富文本串，使之不再是一个有效的html串。这是富文本高亮的最大难题，那这个难题怎么解决呢？

    当然，第一反应可能就是改正则。但根据个人经验，对于一个模式内包含自己时，正则几乎无能为力。比如下面我们常见的字符串结构：

    // 这是常见的less语法。现在如果要求使用正则将最未的选择器名称加上“$”，大家可以试一下，能否做到
// 原串
@media (max-width: 600px) {
  .header {
    .hd {
      width: 100px;
    }

    .bd {
      background-color: #fff;
    }
  }
}

// 要求结果
@media (max-width: 600px) {
  .header {
    .hd$ { // 加上$
      width: 100px;
    }

    .bd$ {
      background-color: #fff;
    }
  }
}

    对于富文本串，它也可能是模式自包含的字符串类型，比如

    // 这是一个标准得不能再标准的html串了
<div data-html="<div>hello world!</div>">hello world!</div>

    如果要使用正则去匹配上面字符串的hello内容，这个正则应该怎么写？先提醒一下，真正的富文本串要比这复杂太多太多,真实的用户输入也比这复杂太多太多。我当时做富文本高亮时，遇到这个问题也是一时找不到办法。某天，突然灵光一闪，不要硬碰硬啊，曲线救国嘛(这其实应该早就想到，只是走入正则的死胡同了)：如果能够先把富文本串中的html标签去掉，剩下的不就是普通文本了吗？匹配普通文本简直是不要太简单了哦。匹配完成后，再把去掉的html还原，就完成高亮匹配了。不过这里有几个难题：

    • 如何去掉html标签。别笑，这真心难，不信你试下

    • 占位符一定要够特殊，不能在关键词匹配时被破坏

    • 如何还原html串

    富文本高亮原理

    根据上面的思路，完成了新一版的高亮逻辑，代码如下：

    富文本高亮，关键词：['中华人民共和国', '中华', '我'];
<br />

<h3>未高亮</h3>
<div id="text">
  <div style="font-style: italic;" data-attr="中华人民共和国">我是<span style="font-size: 20px; font-weight: bold; background-color: cyan;">中国人</span>，我爱中华人民共和国，中华人民共和国万岁！</div>
</div>
<h3>高亮效果</h3>
<div id="content"></div>

<script>
  const content = document.getElementById('content');
  const text = document.getElementById('text').innerHTML; // 富文本串
  const keyword = ['中华人民共和国', '中华', '我'];

  let hightlightText = hightlightKeyword(text, keyword.join('|'));

  content.innerHTML = hightlightText;

  /**
   * 高亮
   * @param input - 待高亮的富文本串
   * @param keyword - 由关键词生成的匹配串，格式 'xxxx|xxx|x'
   * @returns {string}
   */
  function hightlightKeyword(input, keyword) {
    let store = {
      length: 0
    };

    try {
      return input
          .replace(/^\s+/, ' ') // 去掉多余的空白

          // 去掉Html标签，并使用特殊占位符占位，方便后面还原
          .replace(/(<\w+[^>]*?>)|(<\/\w+[^>]*?>)/g, function(match) {
            var key = '\t' + store.length++; // 注意这里使用了\t

            store[key] = match;
            return key;
          })

          // 关键词高亮
          .replace(new RegExp('(' + keyword + ')', 'gi'), '<span class="keyword-match">' + '$1' + '</span>')

          // html标签还原
          .replace(/\t\d+/g, function(match) {
            return store[match] || '';
          });
    } catch (e) {
      return input;
    }
  }

</script>

    上面的hightlightKeyword函数已经能够满足大多数情况下富文本高亮,博主曾经负责的一个项目，使用这个高亮逻辑安全运行1年多，也没出现大问题。但其实，上面的高亮逻辑还是有bug，对于一些十分特殊的富文本串还是存在问题，比如下面的富文本串

    <div>
    <div data-html="<div>hello world!</div>">
      hello world!
      <div data-html="<div>hello world!</div>">hello world!</div>
    </div>
</div>

    经过多次尝试，碰壁，最后决定借用浏览器来将html转成DOM，通过DOM操作来完成高亮。下面是高亮终极版本

    <body>
富文本高亮，关键词：['中华人民共和国', '中华', '我'];
<br />

<h3>未高亮</h3>
<div id="text">
  <div data-html="<div>hello world!</div>">hello world!</div>
  <div>
    <div data-html="<div>hello world!</div>">
      hello world!
      <div data-html="<div>hello world!</div>">hello world!</div>
    </div>
  </div>
  <div style="font-style: italic;" data-attr="中华人民共和国">
    我是
    <span style="font-size: 20px; font-weight: bold; background-color: cyan;">中国人</span>
    ，我爱中华人民共和国，中华人民共和国万岁！
  </div>
</div>

<h3>高亮效果</h3>
<div id="content"></div>

<script>
  const content = document.getElementById('content');
  const text = document.getElementById('text').innerHTML; // 富文本串
  const keyword = ['中华人民共和国', 'hello', '中华', '我'];

  let hightlightText = hightlightKeyword(text, keyword.join('|'));

  content.innerHTML = hightlightText;

  /**
   * 借助浏览器完成高亮。
   * 深度优先遍历所有的节点，对文本节点进行高亮
   *
   * @param input - 待高亮的富文本串
   * @param keyword - 由关键词生成的匹配串，格式 'xxxx|xxx|x'
   * @returns {string}
   */

  function hightlightKeyword(html, keyword) {
    // 复制一个节点去进行遍历操作
    let wrap = document.createElement('div');

    wrap.innerHTML = html;

    return DFSTraverseAndHightlight(wrap);

    function DFSTraverseAndHightlight (node) {
      const rootNodes = node.childNodes;
      const childNodes = Array.from(rootNodes);

      for(let i = 0, len = childNodes.length; i < len; i++) {
        const node = childNodes[i];

        // 文本节点，要进行高亮
        if (node.nodeType === 3) {
          let span = document.createElement('span');
          let a = span.innerHTML = node.nodeValue.replace(new RegExp(`(${keyword})`, 'g'), `<span class="keyword-match">$1</span>`);
          console.log(node.nodeValue);
          node.parentNode.insertBefore(span, node);
          node.parentNode.removeChild(node);
        }

        //文本节点不会有childNodes属性，如果有子节点，继续遍历
        if (node.childNodes.length) {
          DFSTraverseAndHightlight(node);
        }
      }

      return node.innerHTML;
    }
  }

</script>
</body>

    简单的分词实现

    文章最开始说了，分词逻辑一般是后台通过专门的库来完成的。但其实，前端也可以自己实现一个简单的分词，只不过会产生许多无意义的词而已,思路大家一看就明白了

    // 简单，粗暴分词
function splitWord(word) {
  var len = word.length,
    splitWordList = word.split(''); // 一字分组


  // 分词
  for(var i = 2; i <= len; i++) {
    for (var j = 0; j + i <= len; j++) {
        splitWordList.push(word.slice(j, j+i));
    }
  }

  // 必须把长度最长的放到最前面，否则会造成匹配不全的情况
  return splitWordList.reverse();
}

    运行效果

    简单分词

    小结

    本文主要从前端的角度，介绍了如何实现高亮功能，包括普通文本高亮和富文本高亮。关键的知识点是：

    • 利用new RegExp((${keyword}), 'g')方式动态创建正则

    • 利用str.replace(regexp, <span class="keyword-match">$1</span>)为匹配加上高亮样式

    • 最长的关键词一定要优先匹配，否则会造成匹配不全的情况

    • 富文本匹配，用正则很难做到100%精确。但如果有浏览器环境，可以借助浏览器先将富文本串转换成DOM，通过DOM操作来实现一个更精确的富文本高亮

    • 前端也可以自己实现分词，只不过会产生大量无意义词组而已

    原文地址：http://www.u3xyz.com/#/detail/22

    前端搜索搜索引擎算法
    u3xyz
    940 声望22 粉丝
    « 上一篇
    微信小程序页面间通信的5种方式
    下一篇 »
    为微信小程序增加mixin扩展

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    Vue项目SSR改造实战

    u3xyz赞 81阅读 44.8k评论 23

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.4k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    0 条评论
    得票最新