在Vue框架下使用JS开发一个支持关键词高亮的功能

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

• • 需求一：仅对与关键字完全一致的部分进行高亮处理
    • 需求二：对搜索结果中出现的所有关键字均进行高亮显示
    • 应用场景
    • 结束

实际呈现的效果为，当在搜索框中输入一个或多个关键词后，这些关键词将在对应的搜索结果中被突出显示。以下为两种具体需求（前提条件：此处的搜索方式与百度相同，属于全局搜索模式，只要存在任一关键词匹配，即可返回相关搜索结果）

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

例如：当输入‘英语’时，系统将不会对包含‘语’字的结果进行高亮显示，仅对完整匹配‘英语’两个字的搜索结果进行标红处理。
说明：该功能通过正则表达式实现关键词的匹配，一旦在搜索结果中检测到与搜索词相符的内容，便会自动进行高亮标注。
代码

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