简单来讲就是正则与字符串操作

exec() 函数

正则
exec()函数用于 检索字符串 中的正则表达式的匹配

如果字符串中有匹配的值，则返回该匹配值，否则返回 null

RegExpObject.exec(string)

例子：

let str = 'hello'
let pattern = /e/
console.log(patten.exec(str))     //["e",index:1,groups:undefinde]

分组

正则表达式中（）包起来的内容表示一个分组，可以通过分组来 提取自己想要的内容，示例如下
3.选择、分组和指定匹配位置

let arr = "<div>我是{{name}}</div>
let pattern = /{{([a-zA-Z]+)}}/        //这个正则选择{{}}及内部的元素
var patternResult = pattern.exec(str)        //获得于正则相关的数组
console.log(patternResult)     //["{{name}}", "name", index:7,input:"<div>我是{{name}}</div>",groups:underfined]

字符串的replace函数

replace() 函数用于在字符串中，用一些字符 替换 另一些字符

let result = '123456'.replace('123456','abc')        // 将字符串的123456替换成abc

9.原始值包装类型
多次的 replace 可以通过循环来实现
因为用户输入的字符串长度不确定，我们replace次数不确定，所以我们可以利用while循环来进行

// 包装成函数进行使用
function template(id,data) {
  let str = documet.getElementById(id).innerHTML
  let pattern = /{{s*([a-zA-Z]+)\s*}}/
  let pattResult = null 
  while(pattRsult = pattern.exec(str)) {
    str = str.replace(pattResult[0],data[pattResult[1]])
  }
  return str
}

replace() 使用（不通过循环来实现替换）

<script>
   //设置一个对象实例
    let person = {
      name: "other",
      age: 22,
    };
  //设置一个自己的模板引擎
    let template = (id, data) => {
      let templateStr = document.querySelector("#" + id).innerHTML;
      //   创建正则表达式
      let reg = /{{(\w+)}}/g;
      //下面通过replace方法自带函数实现循环替换
    //   let str = templateStr.replace(reg, (a, b) => person[b]);
      let str =templateStr.replace(reg,function(a,b){
          console.log(a); //{{name}}  {{age}}
          console.log(b); // name       age
          return person[b];
      })
      return str;
    };
    let htmlStr = template("tql", person);
    document.querySelector(".box").innerHTML = htmlStr;
  </script>