实现一个简单的模板引擎，输入模板和数据，输出html

最新推荐文章于 2025-08-02 10:45:01 发布

原创最新推荐文章于 2025-08-02 10:45:01 发布 · 646 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端学习专栏收录该内容

53 篇文章

订阅专栏

本文介绍了如何利用JavaScript创建一个简单的模板引擎，该引擎能够根据输入的模板字符串和数据数组，生成HTML输出。通过正则表达式匹配并替换模板中的占位符，实现了动态内容的插入。这个功能在前端开发中常用于动态渲染页面元素。

实现一个简单的模板引擎，输入模板和数据，输出html

示例：
输入：

"<div>{{$1}}（{{$2}}）{{$3}}</div>",["第一个","第二个","第三个"]

输出：

"<div>第一个（第二个）第三个</div>"

function tpl(templateStr, arr) {
    const reg = /\{\{([^}]*)\}\}/g;
    const string = templateStr.trim().replace(reg, function (match,s) {
        //console.log(s==match.substring(2,4));
        if (s == match.substring(2,4)) {
            //console.log(s);
            let i = Number.parseInt(match.substring(3,4));
            //console.log(i);
            return arr[i-1]
        }
        else {
            return ''
        }
    })
    console.log(string)
}