vue中高亮p标签中的某一个字符串

Question

循环后台返回的数据如下结构

 <div :key="num">
      <p class="sentence">
        {{ i.sentence }}
        <span>{{ i.source }}</span>
      </p>
      <p class="sentence">{{ i.senInterpret }}</p>
 </div>

其中i.sentence 是字符串"This is a pig" 渲染的页面上
This is a pig

有一个全局的变量 this.word = pig 的时候

要高亮 这个pig

Answer 1

//高亮

hightlight(str) {
  const search = this.word;
  var subStr = new RegExp(search); // 匹配关键字正则
  let replaceString = '<span class="highlights-text">' + search + "</span>"; // 高亮替换v-html值
  let result = str.replace(subStr, replaceString);
  return result;
},