欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

JavaScript实现模板生成大量数据的方法（附代码）

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

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

基本思路就是：

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

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

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

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

示例结果如下：

JavaScript实现模板生成大量数据的方法（附代码）

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板生成器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <script>
        $(document).ready(function () {
            function combineTemplateAndInput(template, input) {
                if (!template || !input) {
                    return "";
                }
                var inputLines = input.split('\n');
                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('\t');
                    var mColumnData = {};
                    for (var j = 0; j < dColumns.length; j++) {
                        mColumnData['$' + (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>
</head>
<body>


<div id="container" class="container ">

    <div>

        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
            <h3>模板生成器</h3>
        </div>
        
        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 bs-callout bs-callout-warning">
            <div class="alert alert-warning" v-html="msg.content"></div>
        </div>
        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">

            <div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="inputTemplate">
                    <div>
                        <label class="col-sm-4 col-xs-4">模板</label>
                    </div>
                    <div>
                        <textarea type="text" rows="10" name="inputTemplate" id="inputTemplateText" v-model="inputTemplate"
                                  placeholder="请输入模板"
                                 ></textarea>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="inputContent">
                    <div>
                        <label class="col-sm-4 col-xs-4">输入</label>
                    </div>

                    <div>
                        <textarea type="text" rows="10" name="inputTemplate" v-model="inputContent"
                                  placeholder="请输入数据" id="inputContentText"
                                  class="form-control col-md-12 text-to-copy-1"></textarea>

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


        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 text-right" id="opButtons">
            <button class="btn btn-primary" @click="clearInputTemplate()">清空模板</button>
            <button class="btn btn-primary" @click="clearInputContent()">清空输入</button>
            <button class="btn btn-primary" @click="clearOutputContent()">清空输出</button>
            <button class="btn btn-success" @click="aiGen()">生成</button>
        </div>


        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12" id="outputContent">

            <div>
                <label class="col-sm-2 col-xs-2">输出</label>
            </div>
            <div>
                <textarea type="text" rows="20" name="outputContent" id="outputTextContent" v-model="outputContent"
                          placeholder=""
                          readonly></textarea>
            </div>
        </div>
    </div>


</div>



</body>
</html>

以上就是JavaScript实现模板生成大量数据的方法（附代码）的详细内容，更多请关注其它相关文章！

相关标签： javascript vue.js

上一篇： 请教字符串运算符比较的问题？

下一篇： javascript是静态语言吗

推荐阅读