字体高亮

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

：在线体验地址

正文：

如图所示，有一个输入框，输入的时候会有联想词，点击搜索会有一些结果， 每条结果里面的关键词会有高亮(字符串匹配、替换)，怎么设计？会有哪些限制和问题？

首先获取到button，div，input三者的dom节点，同时获取到input当中输入的value，通过全局获取到联想词，将其替换为加粗且背景颜色为红色的关键词。

var div = document.querySelector("div");
var search = document.querySelector("input");
const btn = document.querySelector("button");
let content = div.innerText;
btn.onclick = function () {
//点击之后，进行文字的替换。
  let res = new RegExp(search.value, "g");
  div.innerHTML = content.replace(res, item => {
    return `<b style="background-color:red">${item}</b>`
  })
}

现在，解决其中一个问题，那么会有哪些限制的问题，比如说，点击很多次搜索按钮之后是否会持续进行多次的后台请求？答案是：否。如果点击多次搜索按钮也进行相应的请求次数势必会造成请求冗余甚至堵塞，两秒钟之内点击了5次，那就要请求5次后台吗？当然不。于是要进行优化，也就是防抖。防止以上情景产生的请求冗余。

防抖：

所谓防抖，在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。纯理论是比较抽象的,还是用代码来的实在。

倘若没有防抖，我们只是输入了 几个字,事件就执行了很多次。假设我们每一次输入都是和后台进行一次数据交互的话,那执行这么多次事件就会太影响性能了。 那么我们考虑的就是怎样减少与后台数据库请求的次数,那么防抖就应用而生了。 也就是说 用户触发时间过于频繁,只要最后一次请求的操作就叫做防抖。

 function debounce(fn, delay) {
            let time = null;//time用来控制事件的触发
            return function () {
                if (time !== null) {
                    clearTimeout(time);
                }
                time = setTimeout(() => {
                    fn.apply(this);
                    //apply(),让this的指针从指向window 转成指向input
                }, delay)
            }
        }