效果实例

 

// 第一种：筛选变色（推荐）

　　　　　　  KeyRegExp:function(val, keyword) {                val = val + '';                if (val.indexOf(keyword) !== -1 && keyword !== '') {                    return val.replace(keyword, '' + keyword + '')                } else {                    return val                }            },

// 第二种：正则表达式

　　　　　　  KeyRegExp:function(val, keyword) {                var Reg = new RegExp(keyword, 'i');                if (val) {                    return val.replace(Reg, `${keyword}`);                }            },

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

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,"$1");                return str2;            },

 

使用方法

 

 // 第四种：js的slice裁剪（不建议）

    {
   {item.ap.slice(0,item.ap.toLowerCase().indexOf(apVal.toLowerCase()))}}    {
   {item.ap.slice(item.ap.toLowerCase().indexOf(apVal.toLowerCase()),item.ap.toLowerCase().indexOf(apVal.toLowerCase())+apVal.length)}}    {
   {item.ap.substr(item.ap.toLowerCase().indexOf(apVal.toLowerCase())+apVal.length)}}

 

 

四种方法的优缺点

第一种筛选：可以正常筛选出关键字，空格筛选不出来

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

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

第四种：如果是正常输入是能够筛选出来的，但是二次输入或者添加空格会产生不友好的渲染（请求没有回来之前），自己没事可以感受一下

 

报错实例

 

需要筛选的字符串