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

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

 

 

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>\');