今天做了一个关键字搜索,后台匹配写好了,前端做搜素关键字高亮色操作,踩了一上午正则的坑,在这里给大家分享一下。
首先将搜索的值及其搜索出来的标题传递到处理函数然后进行正则判断。
这里我用的是RegExp方法,这个方法是对字符串执行模式匹配,非常好用,具体的介绍大家可以去W3C官网查看,在这里我就不多赘述了。
redKeywords:function(title,nowSearch){//关键字红色
var reg = new RegExp( nowSearch , "g" )
title.replace(reg,'<font color="#CC0000">'+ nowSearch +'</font>')
},
一开始我也没发现漏洞,测试后来提bug说大小写区分不开,自己测试发现确实正则有问题,就改写了一下
redKeywords:function(title,nowSearch){//关键字红色
// var reg = new RegExp( nowSearch , "g" )
var regs=new RegExp( nowSearch , "gi" ) //区分大小写
// var c=title.replace(reg,'<font color="#CC0000">'+ nowSearch +'</font>')
return title.replace(regs,'<font color="#CC0000">'+ nowSearch +'</font>')
},
好像是没问题了,自己再经过反复测试发现搜索的内容标题会跟随搜索值一起改变大小写,这个坑爬了一上午才发现人家正则里有可以自动改变所有的匹配字符的方法
redKeywords:function(title,nowSearch){//关键字红色
// var reg = new RegExp( nowSearch , "g" )
// var regs=new RegExp( nowSearch , "gi" )
// var c=title.replace(reg,'<font color="#CC0000">'+ nowSearch +'</font>')
// var d=title.replace(regs,'<font color="#CC0000">'+ nowSearch +'</font>')
var regs=new RegExp(nowSearch , "gi" )
return title.replace(regs, '<font color="#CC0000">$&</font>')
},
说白了,这个坑就是自身对正则匹配不太熟悉才会掉进去。在这里分享给大家,希望对大家有所帮助