在上一篇博客中,写了简单的模板引擎的例子,是存在一定的局限性的,所以打算再看看这个模板引擎
查找要替换的部分
这次的模板是类似下面这样的
var str = "今天是{{day}},天气{{weather}}, 我今天的计划是, {{plan}}";
var reg = /{{\w+}}/g;
console.log(str.match(reg));
[“{{day}}”, “{{weather}}”, “{{plan}}”]
上面的是通过正则进行匹配到的,很明显匹配到了{{}}
这样子的,\w
是匹配单词,但是下面的模板就没办法都匹配了
var str = "今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}";
var reg = /{{\w+}}/g;
console.log(str.match(reg));
[“{{weather}}”]
只匹配到了weather
,所以需要重新写正则表达式了,因为变量是以字母数字下划线或者$开头的,还要注意这个点的存在,重写的如下面所示:
var reg = /{{[a-zA-Z0-9\.]+}}/g;
[“{{day.today}}”, “{{weather}}”, “{{day.plan}}”]
可以看到结果,是我们想让它匹配到的,那么接下来只要将进行一个替换操作就行,比如replace
那么现在就该想如何完成替换这个问题了?
替换
var s = "今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}";
var reg = /{{[a-zA-Z0-9\.]+}}/g;
var str = s.replace(reg, function(raw, key, offset, string) {
console.log(arguments);
})
- [object Arguments] {
0: “{{day.today}}”,
1: 3,
2: “今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}”
}- [object Arguments] {
0: “{{weather}}”,
1: 19,
2: “今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}”
}- [object Arguments] {
0: “{{day.plan}}”,
1: 41,
2: “今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}”
}
可以发现,raw这个参数是带有{{}}
的,要匹配数据中的键,就需要去掉{{}}
var s = "今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}";
var reg = /{{([a-zA-Z0-9_$][a-zA-Z0-9\.]+)}}/g;
var str = s.replace(reg, function(raw, key, offset, string) {
console.log(arguments);
})
输出结果如下:
- [object Arguments] {
0: “{{day.today}}”,
1: “day.today”,
2: 3,
3: “今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}”
}- [object Arguments] {
0: “{{weather}}”,
1: “weather”,
2: 19,
3: “今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}”
}- [object Arguments] {
0: “{{day.plan}}”,
1: “day.plan”,
2: 41,
3: “今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}”
}
可以看到通过给正则上加了一个()
,就达到了目的
var s = "今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}";
var reg = /{{([a-zA-Z0-9_$][a-zA-Z0-9\.]+)}}/g;
var data = {
day : {
today : '周六',
plan : '学习'
},
weather: '晴'
}
var str = s.replace(reg, function(raw, key, offset, string) {
return data[key] || raw; ///返回raw是为了防止data中不包含key这个键,所以原样返回
});
console.log(str);
结果如下,带有点的没有正确替换
“今天是{{day.today}},天气晴, 我今天的计划是, {{day.plan}}”
改进
封装为一个函数:
function template(str, data) {
var reg = /{{([a-zA-Z0-9_$][a-zA-Z0-9\.]+)}}/g;
return str.replace(reg, function(raw, key, offset, string) {
var paths = data,
ary = key.split('.');
while(ary.length > 0) {
paths = paths[ary.shift()];
}
return paths || raw;
});
}
使用:
var s = "今天是{{day.today}},天气{{weather}}, 我今天的计划是, {{day.plan}}";
var data = {
day : {
today : '周六',
plan : '学习'
},
weather: '晴'
}
console.log(template(s, data));
“今天是周六,天气晴, 我今天的计划是, 学习”
今天的任务是学习,哈哈,学习去了,希望这篇博客对你有帮助 ^_^