匹配文本内容高亮

老规矩，先图后解：

方法一：

brightenKeyword(val,keyword) {
            // keyword为输入框绑定的值
            if (val.includes(keyword) && keyword !== "") {
                 return val.replace(       // 替换掉keyword 加上颜色标签
                     keyword,
                     '<font color="red">' + keyword + "</font>"
                 );
          
            } else {
                return val;
            }
 },

方法二：

// 检索文字高亮
brightenKeyword(val,keyword) {
   if (keyword) {
        // i表示不区分大小写 g全局匹配
        const Reg = new RegExp(keyword, "ig");
        const res = val.replace(
           Reg,
           `<span style="color: red;">$&</span>`
        );
        return res;
     } else {
       return val;
     }
},

1、正则表达式的i,g,m:

  g ：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
  i ：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
  m ：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
2、$&:     replace:  第二个参数：必需。一个字符串值。规定了替换文本或生成替换文本的函数

$1、$2、...、$99	与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$&	与 regexp 相匹配的子串。
$`	位于匹配子串左侧的文本。
$'	位于匹配子串右侧的文本。
$$	直接量符号。

 

使用：

添加到页面上  要使用innerHTML的方式向页面上添加

this.data.map((ele, i) => {  // this.data是列表的数组
   this.$refs.query_content[
        i
   ].innerHTML = this.brightenKeyword(ele.content,this.keyword);
});