模糊查询关键字高亮显示以及多个关键字的匹配定位


需求中我们经常会遇到模糊查询的方式渲染数据,效果类似于下图:

js渲染数据的方式如下:

var keyword = $("#searchSchool").val();
for(var i=0;i<data.schoolNames.length;i++){
   var renderPage = '<li dataId="'+data.schoolNames[i].id+'"><p>'+data.schoolNames[i].schoolName.replace(new RegExp(keyword,'g'),'<lable style="color: #28c4ff">'+keyword+'</lable>')+'</p></li>'
   $(".searchSchoolList").append(renderPage);
 }

 其中关键部分在于,replace需要替换的值是通过变量的方式进去的,如果通过replace(keyword,'')的方式的话,匹配一个是没有问题的,但如果要匹配全局的,replace(/keyword/g,'')这样的方式是不行的,变量keyword是传不到正则里面的,于是利用 JS 的 RegExp 对象,将 g 参数单拿了出来,这样的话,正则的内容可以用变量来代替了,

string.replace(new RegExp(keyword,'g'),'<lable>'+keyword+'</lable>');

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM