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

最新推荐文章于 2023-06-09 16:15:15 发布

.NET跨平台

最新推荐文章于 2023-06-09 16:15:15 发布

阅读量895

点赞数

分类专栏： Html+Javascript

Html+Javascript 专栏收录该内容

258 篇文章 12 订阅

订阅专栏

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

基本思路就是：

解析模板数据，将替换的内容解析出来
解析输入数据，使用\t,\n将原始数据进行切分
进行数据替换，然后输出。

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

示例结果如下：
在这里插入图片描述

代码如下：

<!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>

.NET跨平台

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现模板生成大量数据的方法（附代码）

本篇文章给大家带来的内容是关于JavaScript实现模板生成大量数据的方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。有时需要根据模板生成大量数据，这个代码工具简直就是神器。基本思路就是：解析模板数据，将替换的内容解析出来解析输入数据，使用\t,\n将原始数据进行切分进行数据替换，然后输出。此处用jquery实现元素的选择，使用vue.js实现逻辑与...
复制链接

扫一扫

专栏目录