vue--根据数据变量动态创建正则表达式(实现部分文字高亮效果)

实现效果 搜索关键字 实现高亮效果

根据输入的关键字 动态创建 正则表达式

heightLight(str) {
    console.log('高亮');
    //正则表达式 的书写   //中间的内容都会当作匹配字符来使用
    //需要根据数据变量动态创建正则表达式  手动 new RegExp
    //正则构造函数  参数1 匹配模式字符串  根据字符串创建正则表达式
    //参数2   匹配模式  g表示全局  i表示忽略大小写
    const reg = new RegExp(this.search_val, 'gi')
    return str.replace(reg, `<span class="lightBox" >${this.search_val}</span>`)
},

调用

<van-cell @click="toInfo(obj)" v-for="obj in sugList" icon="search">
     <div slot="title" v-html="heightLight(obj)"></div>
 </van-cell>