vue实现搜索内容与结果中文字匹配并高亮

1、可以先看一下效果图

2、直接上代码

<template>
  <div class="wrap">
    <div class="inp">
      <el-input v-model="keyword" placeholder="请输入内容"></el-input>
      <button @click="changeColor(list)">搜索</button>
    </div>
    <div class="box_wrap" v-for="(item, index) in list" :key="index">
      <div class="titile" v-html="highlight(item.title)">
        {{ item.title }}
      </div>
      <div class="conten" v-html="highlight(item.content)">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: "东皇太一中单", content: "辅助、中单、对抗、打野" },
        { title: "百里玄策", content: "辅助、中单、对抗、打野" },
        { title: "诸葛亮", content: "辅助、中单、对抗、打野" },
        { title: "妲己", content: "辅助、中单、对抗、打野" },
        { title: "安其拉", content: "辅助、中单、对抗、打野" },
        { title: "张飞", content: "辅助、中单、对抗、打野" },
      ],
      keyword: "",
    };
  },
  methods: {
    highlight(text) {
      const highlightStr = `<font color="#f75353">${this.keyword}</font>`;
      const reg = new RegExp(this.keyword, "gi");
      return text.replace(reg, highlightStr);
    },
  },
};
/*
	/i (忽略大小写)
	/g (全文查找出现的所有匹配字符)
	/m (多行查找)
	/gi(全文查找、忽略大小写)
	/ig(全文查找、忽略大小写)
*/
</script>

<style>
</style>