前端搜索框怎么实现关键字变色？

要达成的效果

思路

先通过input的input事件，获取到输入框里输入的关键字，再把请求回来的数据做一个预处理，在渲染到页面上

代码

预处理函数

// 传入要匹配的关键字和要被更改的字符串,
export default function(kw, str) {
  // 添加正则
  const reg = new RegExp(kw, 'ig') // ig 是所有的意思 而非在发现第一个匹配项时立即停止

  // 使用replace方法替换元素产生高亮
  return str.replace(reg, function(match) {
    return `<span style="color:red">${match}</span>`
  })
}
// kw 传入的关键字
// str 需要检索关键字的字符串

请求的数据解构

使用(vue2)

1.先导入

2.在methods中注册

3.html绑定

一定要加在v-html中否则不会读取你代码里的html结构