vue3实现搜索关键字高亮

其实这个需求非常常见，平时用app、浏览网页时都能用到，那具体是怎么实现的？我做了小案例，先看下效果

我们先梳理下这个需求

• 获取搜索关键字，并过滤出符合条件的数据

• 匹配出要高亮的关键字

• 增加样式

那其实关键点就在于怎么匹配，如何高亮？

这里我们使用正则匹配，再用replace替换，replace的第二个参数也可以是函数，接受的值就是正则匹配到的值：

const searchKey = (val: string) => {
  if (!val) {
    shopList.value = JSON.parse(JSON.stringify(apiData));
    return;
  }

  let reg = new RegExp(val, "gi"); // 正则匹配
  inputValue.value = val;
  shopList.value = JSON.parse(JSON.stringify(apiData));
  shopList.value = shopList.value.filter((item) => {
    item.name = item.name.replace(reg, (value: any) => {
      console.log(value); // 匹配到的值
      return `<span style="color: red">${value}</span>`;
    });
    return item.name.indexOf(inputValue.value) > -1;
  });

  console.log(shopList.value);
};

是不是很简单，有兴趣的小伙伴留个关注吧！

代码地址：ministeryi/highLightKeyword