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

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

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>');
原文地址:https://www.cnblogs.com/yangqing22/p/14065778.html