需求中我们经常会遇到模糊查询的方式渲染数据,效果类似于下图:
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>');