携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

最近在开发项目中遇到了一个问题，需要对用户的搜索关键字进行记录和进行匹配模糊搜索词，以便于对用户的搜索记录进行统计和记录最热搜索词，这个功能之前没有遇到过，我们梳理思路实现一下

页面结构

首先页面要有一个input用于进行搜索关键词，这里需要向后端发送接口获取到模糊搜索词的，我们这里直接写一个模糊搜索词列表，通过无序列表的方式循环出来，然后让匹配到的字进行变色，也算是变相的向后端发送接口和获取模糊搜索词了

 <div>
      关键字：<input
        type="text"
        v-model="keywordsVal"
        @input="onChangeKeywordsVal"
      />
    </div>
    <!-- 关键词列表 -->
    <ul>
      <li
        v-for="(item, index) in keywordsList"
        :key="index"
        v-html="item.name"
      ></li>
    </ul>

我们在data上定义数据，定义一个存储input的变量在通过v-model指令和input关联起来，在定义一个模糊词数据列表，可以通过循环的方式展示到页面中

  data() {
    return {
      //关键字
      keywordsVal: "",
      // 显示的模糊词列表
      keywordsList: [],
    };
  },

我们给input绑定一个input事件方法，用于监听input的值的变动

  onChangeKeywordsVal() {
      // 总模糊词列表
 let keywordsData   =  [
        { name: "前端" },
        { name: "后端" },
        { name: "Java" },
        { name: "Node" },
      ];
      //定义一个空数组，用于存储匹配到的模糊词
        let keywordsList=[]
        //对当前input框中的值进行截取成数组，对每个字符进行遍历
      this.keywordsVal.split("").forEach((data) => {
      //对总模糊词列表进行遍历
       keywordsData.forEach((item) => {
       //将总模糊词的遍历值和当前input的每个字符进行匹配，如果当前总模糊词遍历的该项没有包含input的字符则进行退出当前项的遍历，进行下一次项，依次往复，如果匹配上了则进行下一步操作
          if (!item.name.includes(data)) return;
      //声明一个标签模板字符串，用于替换匹配到模糊词的进行高亮
          const HTMLSTR = `<span style="color:red;">${data}</span>`;
          //声明正则，匹配全部字符且不区分大小写
          const STR = new RegExp(data, "gi");
          //对当前的模糊词进行匹配替换
          item.name = item.name.replace(STR, HTMLSTR);
          //追加到存储匹配模糊词中
          keywordsList.push(item)
        });
      });
      //赋值给当前显示的模糊词列表，让页面进行渲染，由于我们是通过标签的方式对匹配词进行高亮的，所以需要使用v-html执行，将每个循环出来模糊词进行显示即可
      this.keywordsList=keywordsList
    }

坚持努力，无惧未来！

vue实现用户搜索关键字匹配

页面结构