在某些开发过程中，有些搜索需要模糊搜索并且高亮显示搜索框中搜索的内容。

    也有情况下是模糊搜索是使用防抖函数进行接口的调用，将调用回来的数据重新覆盖掉原有的数据，然后高亮显示搜索的字体。

    具体的效果如下图所示：
    image.pngimage.png

    在本文中，使用vue框架进行开发，但是大体的JS代码是基本一致的。

    1. search(text){
    2.                 var reg = RegExp(`(${text})`);
    3.                 var anotherValue = JSON.parse(JSON.stringify(this.infos));
    4.               //这里是筛选含有输入内容的值（这里也可以根据接口返回的值直接显示）
    5.                 var matches = anotherValue.filter(info=>info.name.match(reg));
    6.                 console.log(matches) 
    7.                 matches.forEach(info=>{
    8.                     info.name = info.name.replace(reg,`<span class='highlight'>$1</span>`
    9.                     )});
    10.                 this.results = matches;
    11.                 console.log(this.results)
    12.             }

    在html中的input代码，可以使用@input=search来进行input的监听（vue框架下），监听代码中使用正则表达来匹配输入框中的输入内容。需要注意的是，每次监听进行的内容，我们都会先将原先的数据（保持不变）赋值给另外一个变量，然后对新的变量进行正则匹配修改。最后将插入了高亮class的变量赋值给vue.data中的变量，页面直接v-for该变量即可。