前端怎么實現搜索內容關鍵字標紅

思路：我們可以利用js的正則表達式來匹配搜索的關鍵字，匹配的文字變紅之后的文字在寫入網頁。

js正則表達式：

var re1 = /ABC\-001/;
var re2 = new RegExp('ABC\\-001');
 
re1; // /ABC\-001/
re2; // /ABC\-001/

注意，如果使用第二種寫法，因為字符串的轉義問題，字符串的兩個\\實際上是一個\。

js實現：

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

然后將返回的字符串寫到對應元素中（vue）：

<span v-html="brightenKeyword(text,searchKey)"></span>

其他前端實現異曲同工。

轉載自:前端怎么實現搜索內容關鍵字標紅