vue で js を使用して検索結果のキーワードを強調表示する

検索ボックスに 1 つ以上のキーワードを入力すると、そのキーワードが検索結果で強調表示されます。次の 2 つの要件があります (前提: ここでの検索は、Baidu と同じグローバル検索です。 1 つのキーで単語が一致すると、対応する検索結果が返されます)

要件 1: 完全に一致するキーワードのみが強調表示されます

例：「英語」と入力した場合、「言語」を含む検索結果は強調表示されず、「英語」という 2 つの単語がつながった検索結果のみが強調表示されます。説明
: キーワードの照合には正規表現が使用されます。検索結果検索語が一致すると、
コードが

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;
         }
      },
      }

要件 2: 検索結果内のすべてのキーワードが強調表示される

例: 「English」と入力すると、検索結果にキーワードが含まれていれば強調表示されます説明
ここに画像の説明を挿入します

: 検索結果の各単語と検索キーワードの単語を比較し、一致するものがあれば強調表示しますを選択すると、検索結果が強調表示されます。単語 in は赤で強調表示され、一致しない場合は変更されません。
コード

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>

仕上げる

実は、要件2には要件1も含まれていますが、要件1は通常の書き方です。これは私の書き方です。他に良い書き方があれば、お気軽にご連絡ください〜