vue2实现搜索结果中的搜索关键字高亮的代码

具体代码如下所示：

// 筛选变色
brightenkeyword(val, keyword) {
  val = val + '';
  if (val.indexof(keyword) !== -1 && keyword !== '') {
    return val.replace(keyword, '<font color="#409eff">' + keyword + '</font>')
  } else {
   return val
  }
}
// 或者用正则表达式
brightenkeyword(val, keyword) {
  const reg = new regexp(keyword, 'i');
  if (val) {
    return val.replace(reg, `<span style="color: #409eff;">${keyword}</span>`);
  }
}
// 使用方法
<el-table-column label="维护内容">
  <template slot-scope="scope">
   <span v-html="brightenkeyword(scope.row.strcontent, filters.strcontent)" ></span>
  </template>
</el-table-column>

开源项目地址：

效果演示

总结

以上所述是小编给大家介绍的vue2实现搜索结果中的搜索关键字高亮的代码，希望对大家有所帮助