模板引擎的实现原理(正则)

m0_63400611

已于 2022-05-18 16:14:04 修改

阅读量137

点赞数

分类专栏： ajax 文章标签： ajax

于 2022-03-23 22:37:26 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123692403

版权

ajax 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

正则与字符串操作

基本语法

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

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

RegExpObject.exec(string)

示例代码如下:

var str = 'hello'
var pattern = /o/
//输出的结果{"o", index: 4, input: "hello", groups: undefined}
console.log(pattern.exec(str)}

将需要匹配的字符串以参数的形式传入

分组

正则表达式中"()"包来的内容表示一个分组,可以通过分组来提取自己想要的内容,示例代码如下:

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z])+}}/

var patternResult = pattern.exec(str)
console.log(patternResult);
//得到name相关的分组信息
/*
0: "{{name}}"
1: "name"
groups: undefined
index: 7
input: "<div>我是{{name}}</div>"
length: 2
*/

字符串的replace函数

replace()函数用于在字符串中用一些字符替换另一些字符,语法格式如下:

var result = '123456'.replace('123', 'abc')//得到的result值为字符串'abc456'

示例代码如下:

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/

var patternResult = pattern.exec(str);
//replace函数返回值为替换后的新字符串
str = str.replace(patternResult[0], patternResult[1])
console.log(str);
/*
输出的结果是: <div>我是name</div>
*/

多次replace

代码示例:

var str = '<div>{{name}}今年{{age}}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/

//匹配两次 第一次匹配{{name}} 第二次匹配{{age}}
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str); //输出<div>name今年{{age}}岁了</div>

patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str); //输出<div>name今年age岁了</div>

patternResult = pattern.exec(str)
console.log(patternResult);

使用while循环replace

var str = '<div>{{name}}今年{{age}}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/

var patternResult = null;
//把pattern.exec(str)赋值给patternResult
//如果匹配失败 exec()会返回一个false while循环随即终止
while (patternResult = pattern.exec(str)) {
    console.log(pattern.exec(str));
    str = str.replace(patternResult[0], patternResult[1])
}

console.log(str);
/*
输出: <div>name今年age岁了</div>
*/

replace替换为真值

var data = {
    name: '张三',
    age: 20
}
var str = '<div>{{name}}今年{{age}}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/

var patternResult = null
while (patternResult = pattern.exec(str)) {
    str = str.replace(patternResult[0], data[patternResult[1]])
}

console.log(str);
/*
输出: <div>张三今年20岁了</div>
*/

实现简单的模板引擎

实现步骤

定义模板结构
预调用模板引擎
封装template函数
导入并使用自定义的模板引擎

定义模板结构

<script type="text/html" id="tpl-user">
    <div>姓名: {{name}}</div>
    <div>年龄: {{age}}</div>
    <div>性别: {{gender}}</div>
    <div>住址: {{address}}</div>
</script>

预调用模板引擎

<script>
    //定义函数
    var data = {
        name: 'zs',
        age: 20,
        gender: '男',
        address: '未知'
    };

    //调用模板函数
    var htmlstr = template('tpl-user', data);

    //渲染html结构
    document.getElementById('user-box').innerHTML = htmlstr;
</script>

此时还未封装template()函数

封装template函数

function template(id, data) {
    var str = document.getElementById(id).innerHTML;
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/;

    var patternResult = null;

    while (patternResult = pattern.exec(str)) {
        str = str.replace(patternResult[0], data[patternResult[1]]);
    };

    return str;
}

此处是完整template.js代码

导入并使用自定义的模板引擎

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/template.js"></script>
</head>

<body>
    <div id="user-box"></div>
    <script type="text/html" id="tpl-user">
        <div>姓名: {{name}}</div>
        <div>年龄: {{age}}</div>
        <div>性别: {{gender}}</div>
        <div>住址: {{address}}</div>
    </script>

    <script>
        //定义数据
        var data = {
            name: 'zs',
            age: 20,
            gender: '男',
            address: '未知'
        };

        //调用模板函数
        var htmlstr = template('tpl-user', data);

        //渲染html结构
        document.getElementById('user-box').innerHTML = htmlstr;
    </script>
</body>

</html>

此处是完整html代码

m0_63400611

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模板引擎的实现原理(正则)

正则与字符串操作基本语法exec()函数用于检索字符串中的正则表达式的匹配如果字符串中有匹配的值,则返回该匹配值,否则返回nullRegExpObject.exec(string)示例代码如下:var str = 'hello'var pattern = /o///输出的结果{"o", index: 4, input: "hello", groups: undefined}console.log(pattern.exec(str)}将需要匹配的字符串以参数的形式传入
复制链接

扫一扫