标签：console name pattern age 引擎 str var 原理 模板

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>

标签：console,name,pattern,age,引擎,str,var,原理,模板
来源： https://www.cnblogs.com/zhengwenfang/p/16214208.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。