900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 用正则实现input输入框关键字搜索到的内容关键字高亮

用正则实现input输入框关键字搜索到的内容关键字高亮

时间:2018-09-26 10:54:39

相关推荐

用正则实现input输入框关键字搜索到的内容关键字高亮

背景:在input框中输入关键字后,后台会返回模糊搜索数据(模糊搜索前端也可以实现,后面单独写前端模糊搜索的实现),这里根据输入框搜索的关键词去匹配后台返回的结果,并将结果中的关键字高亮显示,具体效果如下:

实现思路 正则匹配:

// 关键词匹配高亮brightenKeyword(val, keyword) {var thizz = thisval = val + '';const Reg = new RegExp(keyword, 'i')if (val) {// const resCurrent = val.replace(Reg, `<span style="color: #000;background-color: orange;">${keyword}</span>`)const resCurrent = val.replace(Reg, `<span style="color: #248adf;background-color: white;">$&</span>`)return resCurrent}

在使用的地方传入val:要匹配的数据,keyword:搜索输入的关键词,既可这样的话标签上要这样写

这样关键词的样式就能出来了

方法二:使用replaceAll方法,示例代码如下:

展示效果如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。