vue搜索高亮效果

186 阅读1分钟

记录掘金打卡第一天

在utils中封装一个搜索高亮的函数 使用export进行抛出 第一个参数是所有的数据 第二个参数是用户输入的关键字

  1. 使用正则的方式进行搜索 使用js的正则new RegExp(你要搜索的关键字,i是匹配第一个,g是匹配全部)
  2. 如果你当前的数据吧存在 就直接返回出去 存在就进行replace进行替换 第一个是你当前的数据 第二个是你要替换的样式

export function brightenKeyword(val, keyword) { // i是匹配一个 g是匹配全局 const Reg = new RegExp(keyword, "g"); if (val) { return val.replace(Reg, <span style="color: #409EFF;">${keyword}</span>); } }

SearchActive(){
  let name=[{
    title:"我是"
  },{
    title:"我我是是是"
  },{
    title:"是是是"
  }]
  let res=name.map((item)=>{
    return brightenKeyword(item.title,'是')
  })
  this.text=res
  console.log(res);
}