最近在开发项目中遇到了一个问题，需要对用户的搜索关键字进行记录和进行匹配模糊搜索词，以便于对用户的搜索记录进行统计和记录最热搜索词，这个功能之前没有遇到过，我们梳理思路实现一下
页面结构
首先页面要有一个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 }
坚持努力，无惧未来！
