• 模板引擎小结-原理

    exec()

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

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

    RegExpObject.exec(string)

    它返回一个伪数组有五项内容

    0：匹配到的内容

    1：需要提取的内容

    index 索引值 从哪里开始找到的

    input 被搜索的文本

    groups: 分组

    正则表达式中（）小括号包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，实例代码如下

      let str = '

    我的名字是{{name}} 我的年龄是{{age}}
    '

      const Reg2 = /{{\s*([a-zA-Z0-9]+)\s*}}/

    // \s* 空格  + 表示一次或多次  （）内表示要提取

      console.log(Reg2.exec(str))

    字符串replace方法

    用一些字符替换另一些字符

    while循环多次使用replace

      let data = {name:'人生赢家',age:108,address:'共和国'}

     let stt = '

    我的名字是{{name}} 我的年龄是{{age}} 我的地址是{{address}}
    '

      let result = null

      while (result = Reg2.exec(stt)){

         stt = stt.replace(result[0],data[result[1]])

      }

      console.log(stt);

    结果：

    我的名字是人生赢家 我的年龄是108 我的地址是共和国
     

    自己写一个简易的模板引擎：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>11自己封装模板引擎title>
    6. head>
    7. <body>
    9. <div id="box">div>
    10. <img src="pic/template-5my.jpg" alt="">
    12. <script type="text/html" id="tpl">
    13.   <div>姓名：{{name}}div>
    14.   <div>性别：{{sex}}div>
    15.   <div>年龄：{{  age}}div>
    16.   <div>地址：{{address  }}div>
    17. script>
    18.  
    20. <script>
    21.   // 定义数据
    22.   let data = {
    23.     name:'张朝阳',
    24.     sex:'男',
    25.     age:58,
    26.     address:'搜狐'
    27.   }
    28.  
    29.   // 调用模板函数
    30.   let htmlStr = template('tpl',data)
    31.  
    32.   // 渲染到文档当中
    33.   document.querySelector('#box').innerHTML = htmlStr
    34.  
    35.   function template(id,data) {
    36.       // 找到模板里面的字符串/模板代码
    37.       let str = document.getElementById(id).innerHTML
    38.       // 定义正则表达式
    39.       const Reg = /{{\s*([a-zA-Z0-9]+)\s*}}/
    40.     let result = null
    41.     while (result = Reg.exec(str)){
    42.       str = str.replace(result[0],data[result[1]])
    43.     }
    44.     return str  // return 出去 上面的 htmlStr 接收 再传入目标盒子当中
    45.   }
    46.  
    47. script>
    48. body>
    49. html>

  • 相关阅读:
    pnp单目相机标定测距
    JavaScript 显示数据
    计算机演变过程
    Unity学习笔记–无限地图
    AI绘画API：提升艺术创作的效率和品质
    深度学习与神经网络：最值得关注的6大趋势
    DSPE-PEG-Biotin,CAS:385437-57-0,磷脂-聚乙二醇-生物素可延长循环半衰期
    ssm项目启动，控制台tomcat相关日志乱码
    Chrome插件精选 — 扩展管理插件
    酒店订房退房管理系统（数组应用）
  • 原文地址：https://blog.csdn.net/benlalagang/article/details/126139828