JavaScript method to implement templates to generate large amounts of data (code attached)

本篇文章给大家带来的内容是关于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 id="模板生成器">模板生成器</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>

The above is the detailed content of JavaScript method to implement templates to generate large amounts of data (code attached). For more information, please follow other related articles on the PHP Chinese website!