为了对整个模板进行连续的匹配将这两个正则式合并在一起，但是注意，所有能够匹配interpolate的字符串都能匹配evaluate，所以interpolate需要有较高的优先级：
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g
设计一个函数用于转化模板，输入参数为模板文本字串和数据对象
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g //text: 传入的模板文本字串 //data: 数据对象 var template = function(text,data){ ... }
使用replace方法，进行正则的匹配和“替换”，实际上我们的目的不是要替换interpolate或evaluate，而是在匹配的过程中构建出“方法体”：
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g //text: 传入的模板文本字串 //data: 数据对象 var template = function(text,data){ var index = 0;//记录当前扫描到哪里了 var function_body = "var temp = '';"; function_body += "temp += '"; text.replace(matcher,function(match,interpolate,evaluate,offset){ //找到第一个匹配后，将前面部分作为普通字符串拼接的表达式 function_body += text.slice(index,offset); //如果是<% ... %>直接作为代码片段，evaluate就是捕获的分组 if(evaluate){ function_body += "';" + evaluate + "temp += '"; } //如果是<%= ... %>拼接字符串，interpolate就是捕获的分组 if(interpolate){ function_body += "' + " + interpolate + " + '"; } //递增index，跳过evaluate或者interpolate index = offset + match.length; //这里的return没有什么意义，因为关键不是替换text，而是构建function_body return match; }); //最后的代码应该是返回temp function_body += "';return temp;"; }
至此，function_body虽然是个字符串，但里面的内容实际上是一段函数代码，可以用这个变量来动态创建一个函数对象，并通过data参数调用：
var render = new Function('obj', function_body); return render(data);
这样render就是一个方法，可以调用，方法内部的代码由模板的内容构造，但是大致的框架应该是这样的：
function render(obj){ var temp = ''; temp += ... ... return temp; }
注意到，方法的形参是obj，所以模板内部引用的变量应该是obj：
<script type='javascript/template'> <ul> <% for(var i in obj){ %> <li><%= obj[i].text %></li> <% } %> </ul> </script>
看似到这里就OK了，但是有个必须解决的问题。模板文本中可能包含\r \n \u2028 \u2029等字符，这些字符如果出现在代码中，会出错，比如下面的代码是错误的：
temp += ' <ul> ' + ... ;
我们希望看到的应该是这样的代码：
temp += '\n \t\t<ul>\n' + ...;
这样需要把\n前面的\转义成\\即可，最终变成字面的\\n。
另外，还有一个问题是，上面的代码无法将最后一个evaluate或者interpolate后面的部分拼接进来，解决这个问题的办法也很简单，只需要在正则式中添加一个行尾的匹配即可：
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g;
相对完整的代码
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g //模板文本中的特殊字符转义处理 var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g; var escapes = { "'": "'", '\\': '\\', '\r': 'r', '\n': 'n', '\t': 't', '\u2028': 'u2028', '\u2029': 'u2029' }; //text: 传入的模板文本字串 //data: 数据对象 var template = function(text,data){ var index = 0;//记录当前扫描到哪里了 var function_body = "var temp = '';"; function_body += "temp += '"; text.replace(matcher,function(match,interpolate,evaluate,offset){ //找到第一个匹配后，将前面部分作为普通字符串拼接的表达式 //添加了处理转义字符 function_body += text.slice(index,offset) .replace(escaper, function(match) { return '\\' + escapes[match]; }); //如果是<% ... %>直接作为代码片段，evaluate就是捕获的分组 if(evaluate){ function_body += "';" + evaluate + "temp += '"; } //如果是<%= ... %>拼接字符串，interpolate就是捕获的分组 if(interpolate){ function_body += "' + " + interpolate + " + '"; } //递增index，跳过evaluate或者interpolate index = offset + match.length; //这里的return没有什么意义，因为关键不是替换text，而是构建function_body return match; }); //最后的代码应该是返回temp function_body += "';return temp;"; var render = new Function('obj', function_body); return render(data); }
调用代码可以是这样：