js实现页面搜索内容后，检索到的内容高亮展示——正则匹配

ゝ一世哀愁。 2022-09-16 11:21 261阅读 0赞

最近在做电商页面时，遇到一个需求，就是要进行页面的检索，检索时，要将匹配到的内容高亮展示，效果图如下：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]  
如果要显示上面的效果需要用到正则表达式

正则表达式去匹配想要匹配的字段，如果是要同时匹配多个，则需要用`|`进行分割，匹配到内容后，通过`replace`来将匹配到的内容转化为一个`background:yellow`的`div`元素即可。渲染数据时，用`v-html`进行渲染就可以了。

# 检索时，接口返回要匹配的字段 #

比如我输入的内容是：`0603`,此时调取接口，接口返回给我要匹配的字段，是一个数组，则就是多个字段同时匹配，需要用到正则匹配多个的功能。

首先要将匹配字段的数组用`|`分割成字符串。  
匹配字段的数组为：`searchWordArr`,`gi`表示全局多个匹配并且不区分大小写;

var reg = new RegExp(`${ this.searchWordArr.join('|')}`, 'gi');

需要匹配的内容是一个字符串，字符串中可以同时存在多个要匹配的内容，因此可以将匹配到的内容存放到数组中，也就是通过  
`var str = val.match(reg);`字符串的`match`方法来匹配正则表达式，匹配到的内容是一个数组，  
对数组进行循环遍历，将匹配到的内容，都转化为`div`的`dom`元素

str && str.forEach(s => { 
        return val = val.replace(s, `<span style='background:yellow'>${ s}</span>`);
    })

# 数据渲染时，通过`v-html`进行渲染 #

`<div v-html="scope.row.package"></div>`

由于上面效果图中的内容是一个表格，则可以匹配表格中的多个字段。

highLightWord() { 
        this.tableData.map((item) => { 
        	//要匹配的哪些字段，都要进行`brightKeyword`方法来遍历处理
            item.name = item.name && this.brightKeyword(item.name)
            item.package = item.package && this.brightKeyword(item.package)
            item.desc = item.desc && this.brightKeyword(item.desc);
        })
    },
    brightKeyword(val) { 
        var reg = new RegExp(`${ this.searchWordArr.join('|')}`, 'gi');
        var str = val.match(reg);
        str && str.forEach(s => { 
            return val = val.replace(s, `<span style='background:yellow'>${ s}</span>`);
        })
        return val;
    },

完成！！！

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/df0016e8010e44c7b1f290572f7d6138.png