vue中使用js实现搜索结果关键字高亮

实现效果是，搜索框中输入一个或者多个关键字，该关键字会在搜索结果中高亮显示出来，下面是两种需求（前提：我们这里搜索是和百度一样的全局搜索，只要有一个关键字匹配就会返回相应的搜索结果）

需求一：只会高亮完全匹配的关键字

比如：输入’英语‘，则不会高亮有’语‘的搜索结果，只会高亮’英语‘
两个字连在一起的搜索结果
解释： 使用了正则来匹配关键字，在搜索结果中一旦匹配中搜索词，则标红高亮
代码

methods:{
      // 高亮搜索词
      brightenKeyword(val, keyword) {
        const Reg = new RegExp(keyword, 'i');
        let res = '';
        if (val) {
             res = val.replace(Reg, `<span style="color: red;">${keyword}</span>`);
           return res;
         }
      },
      }

需求二：会高亮搜索结果中所有关键字

比如：输入’英语‘，搜索结果中只要包括其中一个关键字就都会高亮


解释：将搜索结果中的每一个字都与搜索关键字中的字进行对比，一旦有匹配上的，该搜索结果中的该字标红，如果没有匹配上则不变
代码

methods:{
      // 高亮搜索词
      brightenKeyword(val, keyword) {
        let arrVal = val.split('')
        let res = '';
        for (let i = 0; i < arrVal.length; i++) {
            let isExist = keyword.indexOf(arrVal[i])
            if (isExist != -1) {
              res += `<span style="color: red;">${arrVal[i]}</span>`;
            } else {
              res += arrVal[i]
            }
        }
            return res;
      },
      }

使用

result：搜索结果中需要标红的内容
keyWords：搜索输入框中的关键字

<div v-html="brightenKeyword(result,keyWords)"></div>

结束

事实上需求二也包括了需求一，只是需求一提供了一个正则的写法，这是我的写法，如果大家有其他的好写法欢迎与我交流~