JS使用正则+JSON对HTML模板进行数据填充

最新推荐文章于 2023-11-08 20:37:57 发布

原创

最新推荐文章于 2023-11-08 20:37:57 发布 · 8.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#JS #模板渲染 #数据填充 #JSON #正则

本文介绍了如何在WEB前端开发中利用JavaScript的正则表达式和JSON数据来实现HTML模板的数据填充。通过扩展String类的方法，将JSON数据插入到含有特定标识的HTML模板中，实现动态内容的展示。示例代码展示了如何处理模板、获取服务器数据并进行填充，强调了使用`<script>`标签存储模板以避免DOM污染和不必要的执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在WEB前端开发中，经常会根据动态的数据加载一些具有相同结构、不同内容的HTML控件，如果把这些HTML代码全写入JS中，根据不同的数据显示的控件也不一样，操作起来会显得比较繁琐，而且极不利于代码的维护，怎么办呢？不知道你是否听说过模板，模板渲染，数据填充。使用模板方法，直接把数据往里面套就好了。憋说话，先上个示例，用心去感受。

这里有个非常重要的方法，此方法是对原生js的string类进行的扩展，也就是我们要用来填充格式数据的方法。

JS:

String.prototype.tmp = function(obj) {
    return this.replace(/\$\w+\$/g, function(matchs) {
        var returns = obj[matchs.replace(/\$/g, "")];
        return (returns + "") == "undefined"? "": returns;
    });
};

方法定义好了，接下来写好HTML模板：
HTML:

<div class="container">
    <ul class="list_box" id="list_box">
        <script type="text/template" data-id="list_tpl">
            <li class="list_item">
                <h3>$title$</h3>
                <p>$content$</p>
            </li>
        </script>
    </ul>
</div>

不知道慧眼如炬的你有没有注意到这段HTML与普通的HTML有什么不同之处，首先是script标签，标签里有type=”text/template”属性；其次就是