Vue实现搜索关键字高亮显示

过滤的方法

ruleTitle(titleString) {
  if (!titleString) {
    return '';
  }
  if (this.searchName && this.searchName.length > 0) {
    // 匹配关键字正则
    let replaceReg = new RegExp(this.searchName, 'g');
    // 高亮替换v-html值
    let replaceString = '<span style="color: #3C8AFF">' + this.searchName + '</span>';
    // 开始替换
    titleString = titleString.replace(replaceReg, replaceString);
  }
  return titleString;
},

搜索结果列表

this.organizationList.map((item, index) => {
	item.users.map((item2, index2) => {
		this.organizationList[index].users[index2].name = this.ruleTitle(this.organizationList[index].users[index2].name)
	})
})

效果图