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

 <style>
        ul, li {
            list-style: none;
        }


        .container {
            width: 200px;
            margin: 20px auto;
            padding: 5px;
            background-color: #1B6540;
        }


        .list_box li {
            color: #fff;
            height: 60px;
            margin-bottom: 5px;
            background-color: #4FA46B;
        }
    </style>






    <div class="container">
        <ul class="list_box" id="list_box">
            <script type="text/template" data-number="list_tple">
                <li class="list_item">
                    {#  $title$  之间的字符串表示json的key                  #}
                    <p>$content$</p>
                    <h3>$title$</h3>
                </li>
            </script>
        </ul>
    </div>




 <script>
        json_data = {
            page: "1",
            records: "3",
            data: [{
                title: "标题1",
                content: "内容1"
            }, {
                title: "标题2",
                content: "内容2"
            }, {
                title: "标题3",
                content: "内容3"
            }, {
                title: "标题4",
                content: "内容4"
            }, {
                title: "标题5",
                content: "内容5"
            },]
        }
        String.prototype.tmple = function (obj) {
            //  '/'  一般用于 正则的开始和结束,中途要使用/就得用\符号来转义了,
            //  '\$'  我猜想是值 $$ 之间的东西
            //  '\w+'  匹配任何字类字符，包括下划线。与“[A-Za-z0-9_]”等效。
            //  '/g'  意思就是：global可选标志，带这个标志表示替换将针对行中每个匹配的串进行，否则则只替换行中第一个匹配串
            return this.replace(/\$\w+\$/g, function (matchs) {
                var returns = obj[matchs.replace(/\$/g, "")];
                return (returns + "") == "undefined" ? "" : returns;
            });
        };


        //使用 data-* 属性来嵌入自定义数据： 这个用的是id


        var htmlList = '',
                htmlTemp = $("#list_box script[data-number='list_tple']").html();
        json_data.data.forEach(function (object) {
            // tmple 这里指正则表达式
            htmlList += htmlTemp.tmple(object);
        });
        $("#list_box").html(htmlList);
    </script>