模板引擎的实现原理
6、模板引擎的实现原理
6.1、正则与字符串的操作
6.1.1、基本语法
exec( ) 函数用于检索字符串中的正则表达式的匹配
如果字符串中有匹配的值,则返回匹配饿值,否则返回 null
语法格式如下:
RegExpoject.exec(string)
示例代码如下:
var str = "hello"
var pattern = /o/
//输出的结果["o", index: 4, input: "hello",grcups: undefined]
var r = pattern.exec(str)
console.log(r)
6.1.2、分组
在正则表达式中 ()包起来的的内容表示分一个组, 可以通过分组来提取自己想要的内容
示例代码如下:
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var r = pattern.exec(str)
//输出结果:['{{name}}', 'name', index: 7, input: '<div>我是{{name}}</div>', groups: undefined]
console.log(r);
6.1.3、字符串的 replace 函数
rep;ace( )函数用于在字符串中的一些字符替换另外一些字符
示例代码如下:
var result = '123456'.replace('123', 'abc')// 得到的result的值为字符串 'abc456'
代码实现:
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var r = pattern.exec(str)
// 将索引为0的这一项,改成为索引为1的这一项
str = str.replace(r[0], r[1])
console.log(str);
6.1.4、多次 replace
<script>
var str = '<div>{{name}}今年{{ age }} 岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
// 第一次匹配
var res1 = pattern.exec(str)
console.log(res1);// ['{{name}}', 'name', index: 5, input: '<div>{{name}}今年{{ age }} 岁了</div>', groups: undefined]
str = str.replace(res1[0], res1[0])
console.log(str); // <div>{{name}}今年{{ age }} 岁了</div>
// 第二次匹配
var res2 = pattern.exec(str)
console.log(res2);// ['{{name}}', 'name', index: 5, input: '<div>{{name}}今年{{ age }} 岁了</div>', groups: undefined]
str = str.replace(res2[0], res2[1])
console.log(str); // <div>name今年{{ age }} 岁了</div>
// 第三次匹配
var res3 = pattern.exec(str)
console.log(res3);// ['{{ age }}', 'age', index: 11, input: '<div>name今年{{ age }} 岁了</div>', groups: undefined]
str = str.replace(res3[0], res3[1])
console.log(str);// <div>name今年age 岁了</div>
</script>
6.1.5、循环多次 replace
<script>
var str = '<div>{{name}}今年{{ age }} 岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var pat = null
//只要有匹配项就一直匹配
while (pat = pattern.exec(str)) {
str = str.replace(pat[0], pat[1])
}
console.log(str);
</script>
6.1.6、replace替换成真值
<script>
var data = { name: 'zs', age: 20 }
var str = '<div>{{name}}今年{{ age }} 岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var pat = null
while (pat = pattern.exec(str)) {
str = str.replace(pat[0], data[pat[1]])
}
console.log(str);
</script>