问题

实现模糊搜索结果的关键词高亮显示

思路

搜索的关键字使用正则表达式替换

实现功能

在考虑下节流缓存关键字搜索

答案

<!--
 * @Description: 搜索高亮
 * @Author: Jasper
 * @Github: https://github.com/yuanxinfeng
 * @Date: 2019-10-31 14:25:10
 * @LastEditors: Jasper
 * @LastEditTime: 2019-10-31 16:01:29
 -->
<!DOCTYPE html>
<html lang="z-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Search highlight</title>
    <style>
      b {
        color: red;
      }
      li {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <input id="ipt" type="text" />
    <section>
      <ul id="container"></ul>
    </section>
  </body>
  <script>
    const container = document.getElementById("container");
    const ipt = document.getElementById("ipt");
    function throttle(_func_) {
      let run = true;
      return function() {
        if (!run) return;
        run = false;
        setTimeout(() => {
          _func_.apply(this, arguments);
          run = true;
        }, 300);
      };
    }
    function memorize(fn) {
      const cache = new Map();
      return (name) => {
        if (!name) {
          container.innerHTML = "";
          return;
        }
        if (cache.get(name)) {
          container.innerHTML = cache.get(name);
          return;
        }
        const res = fn.call(fn, name).join("");
        cache.set(name, res);
        container.innerHTML = res;
      };
    }

    function handleInput(value) {
      const reg = new RegExp(`\(${value}\)`);
      const search = data.reduce((res, cur) => {
        if (reg.test(cur)) {
          const match = RegExp.$1;
          res.push(`<li>${cur.replace(match, "<b>$&</b>")}</li>`);
        }
        return res;
      }, []);
      return search;
    }
    const data = [
      "济南大明湖",
      "济南大明湖公园",
      "济南大明湖饭店",
      "济南大酒店",
      "济南趵突泉"
    ];
    const memorizeInput = memorize(handleInput);
    ipt.addEventListener(
      "input",
      throttle((e) => {
        memorizeInput(e.target.value);
      })
    );
  </script>
</html>

例子