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

exec()函数

11. 正则

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

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

RegExpObject.exec(string)

例子

let str='hello'
let pattern=/e/
console.log(pattern.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}}","anme",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=document.getElementById(id).innerHTML
    let pattern=/{{\s*([a-zA-Z]+)\s*}}/

    let pattResult = null;
    while (pattResult=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>