目录

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

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

要达成的效果

https://i-blog.csdnimg.cn/blog_migrate/d389fd008dde4c86c42b0c0dbe8c4b5c.png

思路

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

代码

预处理函数

// 传入要匹配的关键字和要被更改的字符串,
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 需要检索关键字的字符串

请求的数据解构

https://i-blog.csdnimg.cn/blog_migrate/9339514971f23680906bee54c2540645.png

使用(vue2)

1.先导入

https://i-blog.csdnimg.cn/blog_migrate/0a7bc6c8a01897b1d0d71980dd88df46.png

2.在methods中注册

https://i-blog.csdnimg.cn/blog_migrate/eb9ad4fb2335e60519595b16f9f32234.png

3.html绑定

https://i-blog.csdnimg.cn/blog_migrate/e4695579a0f8197e1fc89f3f16ec8ac8.png

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