模板引擎小结-原理

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 我的地址是共和国

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


html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11自己封装模板引擎title>
head>
<body>
<div id="box">div>
<img src="pic/template-5my.jpg" alt="">
<script type="text/html" id="tpl">
  <div>姓名：{{name}}div>
  <div>性别：{{sex}}div>
  <div>年龄：{{  age}}div>
  <div>地址：{{address  }}div>
script>
 
<script>
  // 定义数据
  let data = {
    name:'张朝阳',
    sex:'男',
    age:58,
    address:'搜狐'
  }
 
  // 调用模板函数
  let htmlStr = template('tpl',data)
 
  // 渲染到文档当中
  document.querySelector('#box').innerHTML = htmlStr
 
  function template(id,data) {
      // 找到模板里面的字符串/模板代码
      let str = document.getElementById(id).innerHTML
      // 定义正则表达式
      const Reg = /{{\s*([a-zA-Z0-9]+)\s*}}/
    let result = null
    while (result = Reg.exec(str)){
      str = str.replace(result[0],data[result[1]])
    }
    return str  // return 出去 上面的 htmlStr 接收 再传入目标盒子当中
  }
 
script>
body>
html>

相关阅读:
C Primer Plus(6) 中文版第8章字符输入/输出和输入验证 8.7 菜单浏览 8.8 关键概念 8.9 本章小结
猿辅导联合多方专家共议新课标：语文将更强调“实践性”
Docker学习路线
百万奖补！2022年湖北省双创战略团队申报条件、材料和支持奖补
PDA 红外扫码 uniapp
flutter dio 网络封装。记录
嵌入式Linux--进程间通讯--消息队列
L4.linux命令每日一练 -- 第二章文件和目录操作命令 -- pwd和cd命令
合宙Air724UG LuatOS-Air LVGL API控件-标签 (Label)
linux 中jdk的下载与安装

原文地址：https://blog.csdn.net/benlalagang/article/details/126139828