【vue】vue实现搜索内容文字高亮，在结果中文字高亮

先来一个效果图

讲真的想实现这个功能的时候疯狂百度但是都不是非常的称心如意，所以自己摸索了一会，先说一下用到的知识点

1、replace正则全文匹配（这里主要是因为使用replace默认替换第一个元素，所以使用正则）

2、字符串split转换为数组

3、v-html 

好，那么首先看下代码

对于html部分 ，就是这么简单，使用v-html标签，会输出运算以后的结果，brightenKeyword是我们在下面写的一个方法，他的两个参数，第一个参数content就是我们本身显示的文本的内容，也就是想要遍历寻找关键字的内容，keyword就是我们搜索的内容，

下面是具体的方法，首先我们要把关键字分成数组去遍历，如果content中有keyword，我们就进行替换，替换用的是正则表达，很简单的正则，就是全文替换的意思，遇到关键字就变成红色，然后把修改后的内容返回就可以了，使用v-html他会自己读取标签和样式

  //搜索高亮brightenKeyword(val, keyword) {if (keyword.length > 0) {let keywordArr = keyword.split("");val = val + "";keywordArr.forEach(item => {if (val.indexOf(item) !== -1 && item !== "") {val = val.replace(new RegExp(item,'g'),'' + item + "");}});return val;} else {return val;}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！