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

先来一个效果图

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

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

2、字符串split转换为数组

3、v-html 

好，那么首先看下代码

  <div  v-html="brightenKeyword(content,keyword)"></div>

对于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'),
              '<font color="#f75353">' + item + "</font>"
            );
          }
        });
        return val;
      } else {
        return val;
      }
    }