JavaScript實作範本產生大量資料的方法（附程式碼）

本篇文章给大家带来的内容是关于JavaScript实现模板生成大量数据的方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

有时需要根据模板生成大量数据，这个代码工具简直就是神器。

基本思路就是：

1. 解析模板数据，将替换的内容解析出来

2. 解析输入数据，使用\t,\n将原始数据进行切分

3. 进行数据替换，然后输出。

此处用jquery实现元素的选择，使用vue.js实现逻辑与展示的分离。

示例结果如下：

代码如下：

nbsp;html>


    <meta>
    <title>模板生成器</title>
    <meta>

    <script></script>
    <script></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script></script>


    <script>
        $(document).ready(function () {
            function combineTemplateAndInput(template, input) {
                if (!template || !input) {
                    return "";
                }
                var inputLines = input.split(&#39;\n&#39;);
                var inputCount = 0;

                // 统计数据的数量个数
                for (var i = 0; i < inputLines.length; i++) {
                    var line = inputLines[i];
                    if (line) {
                        inputCount++;
                    }

                }

                // 替换数据
                var resLines = [];
                var inputIndex = 1;
                for (var i = 0; i < inputLines.length; i++) {
                    var line = inputLines[i];
                    // 忽略了空行
                    if (!line) {
                        resLines.push("");
                        continue;
                    }

                    // 将数据按\t分隔生成$1=xx,$2=xx,$3=xx
                    var dColumns = line.split(&#39;\t&#39;);
                    var mColumnData = {};
                    for (var j = 0; j < dColumns.length; j++) {
                        mColumnData[&#39;$&#39; + (1 + j)] = dColumns[j];
                    }


                    var resLine = template;
                    // 先进行$?,$#这些替换，避免数据中的相同格式干扰
                    // 替换$?，下标
                    resLine = resLine.replace(/(\$\?)/g, inputIndex);

                    // 替换$#，数据数量
                    resLine = resLine.replace(/(\$#)/g, inputCount);

                    // 替换$0，整行数据
                    resLine = resLine.replace(/(\$0)/g, line);

                    // 找出模板中的`$数字`格式的内容，并进行替换
                    resLine = resLine.replace(/(\$\d+)/g, function (match, p1) {
                        if (mColumnData[p1]) {
                            return mColumnData[p1];
                        }
                        return "";
                    });

                    // 找出模板中`${数字}`格式的内容，进行替换
                    resLine = resLine.replace(/(\$\{\d+\})/g, function (match, p1) {
                        if (mColumnData[p1]) {
                            return mColumnData[p1];
                        }
                        return "";
                    });

                    inputIndex++;


                    resLines.push(resLine);

                }
                return resLines.join("");
            }


            var vm = new Vue({
                el: "#container",
                data: {
                    inputTemplate: [
                        "mkdir -p $4",
                        "touch $4$2.proto",
                        "\n"
                    ].join("\n"),
                    inputContent: [
                        "/abc/getNearbyOrgs/1.0    GetNearbyOrgs    GetNearbyOrgs.proto    abc/    getNearbyOrgs    /abc/getNearbyOrgs/1.0",
                        "/abc/getOrgByArea/1.0    GetOrgByArea    GetOrgByArea.proto    abc/    getOrgByArea    /abc/getOrgByArea/1.0",
                        "/abc/addFeedback/1.0    AddFeedback    AddFeedback.proto    abc/    addFeedback    /abc/addFeedback/1.0",
                        "/abc/getOrgCities/1.0    GetOrgCities    GetOrgCities.proto    abc/    getOrgCities    /abc/getOrgCities/1.0",
                        "/abc/getServiceInfo/1.0    GetServiceInfo    GetServiceInfo.proto    abc/    getServiceInfo    /abc/getServiceInfo/1.0",
                        "/hello/sayNearbyOrgs/1.0    sayNearbyOrgs    sayNearbyOrgs.proto    hello/    sayNearbyOrgs    /hello/sayNearbyOrgs/1.0",
                        "/hello/sayOrgByArea/1.0    sayOrgByArea    sayOrgByArea.proto    hello/    sayOrgByArea    /hello/sayOrgByArea/1.0",
                        "/hello/sayOrgCities/1.0    sayOrgCities    sayOrgCities.proto    hello/    sayOrgCities    /hello/sayOrgCities/1.0",
                        "/hello/sayServiceInfo/1.0    sayServiceInfo    sayServiceInfo.proto    hello/    sayServiceInfo    /hello/sayServiceInfo/1.0"
                    ].join("\n"),
                    outputContent: "",
                    msg:{
                        title:"帮助",
                        content:[
                            "$?: 数据的顺序，从1开始，不含空行",
                            "$#: 数据的数量，不含空行",
                            "$0: 原始数据，整行数据",
                            "$数字: $1,$2,...，表示第1,2,...列数据",
                            "${数字}: ${11},${12},...，表示第11,12,...列数据，用于去除$11与$1的混淆(暂未实现)"
                        ].join("<br/>")
                    }
                },
                methods: {
                    aiGen: function () {
                        var self = this;
                        self.outputContent = combineTemplateAndInput(self.inputTemplate, self.inputContent);
                    },
                    clearInputContent:function () {
                        var self = this;
                        self.inputContent = "";
                    },
                    clearInputTemplate:function () {
                        var self = this;
                        self.inputTemplate = "";
                    },
                    clearOutputContent:function () {
                        var self = this;
                        self.outputContent = "";
                    }
                }
            });


        });
    </script>




<div>

    <div>

        <div>
            <h3>模板生成器</h3>
        </div>
        
        <div>
            <div></div>
        </div>
        <div>

            <div>
                <div>
                    <div>
                        <label>模板</label>
                    </div>
                    <div>
                        <textarea></textarea>
                    </div>
                </div>

                <div>
                    <div>
                        <label>输入</label>
                    </div>

                    <div>
                        <textarea></textarea>

                    </div>
                </div>
            </div>
        </div>


        <div>
            <button>清空模板</button>
            <button>清空输入</button>
            <button>清空输出</button>
            <button>生成</button>
        </div>


        <div>

            <div>
                <label>输出</label>
            </div>
            <div>
                <textarea></textarea>
            </div>
        </div>
    </div>


</div>

以上是JavaScript實作範本產生大量資料的方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！