前端怎么实现搜索内容关键字标红

程序员文章站 2022-03-04 14:45:21

思路：我们可以利用js的正则表达式来匹配搜索的关键字，匹配的文字变红之后的文字在写入网页。js正则表达式：var re1 = /ABC\-001/;var re2 = new RegExp('ABC\\-001');re1; // /ABC\-001/re2; // /ABC\-001/注意，如果使用第二种写法，因为字符串的转义问题，字符串的两个\\实际上是一个\。js实现： brightenKeyword(val, keyword) { const Reg...

思路：我们可以利用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>

其他前端实现异曲同工。

本文地址：https://blog.csdn.net/Mr_carry/article/details/107359761