《VUE》搜索关键字高亮显示

效果实例

 

// 第一种：筛选变色

　　　　　　  KeyRegExp:function(val, keyword) {
                val = val + '';
                if (val.indexOf(keyword) !== -1 && keyword !== '') {
                    return val.replace(keyword, '<font color="#f00">' + keyword + '</font>')
                } else {
                    return val
                }
            },

// 第二种：正则表达式

　　　　　　  KeyRegExp:function(val, keyword) {
                var Reg = new RegExp(keyword, 'i');
                if (val) {
                    return val.replace(Reg, `<span style="color: #f00;">${keyword}</span>`);
                }
            },

// 第三种：正则表达式（对于第二种的优化）

            keyRegExp:function (str,key){  // 搜索关键字高亮显示
                // 正则匹配中文、英文关键字高亮，高亮后的关键字和之前的大小写保持一致
                var key  = key;//这里定义关键词
                key = '('+key.replace(/([\+\.\*\|\?\-\(\[\^\$])/g,'\\$1' ).replace(/\s+/g,'|')+')';//把匹配关键字中的正则符转义
                var patt = new RegExp(key ,'igm'); //传  igm  可避免关键词后面的空格造成文字不匹配问题
                var str2 = str.replace(patt,"<span style='color:#f00;'>$1</span>");
                return str2;
            },

 

使用方法

<p v-html="keyRegExp(需要筛选的字符串,关键字)"></p>

 

三种方法的优缺点

第一种筛选：可以正常筛选出关键字，英文小括号也可以筛选出来，但是中文括号和空格筛选不出来

第二种正则：可以筛选出关键字，但是不支持中英文小括号和空格，并且英文小括号会报错

第三种正则：可以筛选出关键字，支持中文小括号，关键词后面添加空格也不影响筛选，但是也不支持英文小括号，并且英文小括号会报错

 

报错实例

 

来源：https://www.cnblogs.com/chensv/p/11381641.html