前端搜索框怎么实现关键字变色
目录
前端搜索框怎么实现关键字变色?
要达成的效果
思路
先通过
input
的
inpu
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 需要检索关键字的字符串
请求的数据解构
使用(vue2)
1.先导入
2.在methods中注册
3.html绑定
一定要加在
v-html
中否则不会读取你代码里的html结构