JavaScript如何實現(xiàn)模板生成大量數(shù)據(jù)的方法-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關JavaScript如何實現(xiàn)模板生成大量數(shù)據(jù)的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到太平網(wǎng)站設計與太平網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務覆蓋太平地區(qū)。

有時需要根據(jù)模板生成大量數(shù)據(jù)，這個代碼工具簡直就是神器。

基本思路就是：

  1. 解析模板數(shù)據(jù)，將替換的內(nèi)容解析出來

  2. 解析輸入數(shù)據(jù)，使用\t,\n將原始數(shù)據(jù)進行切分

  3. 進行數(shù)據(jù)替換，然后輸出。

此處用jquery實現(xiàn)元素的選擇，使用vue.js實現(xiàn)邏輯與展示的分離。

示例結果如下：

JavaScript如何實現(xiàn)模板生成大量數(shù)據(jù)的方法

代碼如下：

<!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/K68vbdEjh5u" 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;

                // 統(tǒng)計數(shù)據(jù)的數(shù)量個數(shù)
                for (var i = 0; i < inputLines.length; i++) {
                    var line = inputLines[i];
                    if (line) {
                        inputCount++;
                    }

                }

                // 替換數(shù)據(jù)
                var resLines = [];
                var inputIndex = 1;
                for (var i = 0; i < inputLines.length; i++) {
                    var line = inputLines[i];
                    // 忽略了空行
                    if (!line) {
                        resLines.push("");
                        continue;
                    }

                    // 將數(shù)據(jù)按\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;
                    // 先進行$?,$#這些替換，避免數(shù)據(jù)中的相同格式干擾
                    // 替換$?，下標
                    resLine = resLine.replace(/(\$\?)/g, inputIndex);

                    // 替換$#，數(shù)據(jù)數(shù)量
                    resLine = resLine.replace(/(\$#)/g, inputCount);

                    // 替換$0，整行數(shù)據(jù)
                    resLine = resLine.replace(/(\$0)/g, line);

                    // 找出模板中的`$數(shù)字`格式的內(nèi)容，并進行替換
                    resLine = resLine.replace(/(\$\d+)/g, function (match, p1) {
                        if (mColumnData[p1]) {
                            return mColumnData[p1];
                        }
                        return "";
                    });

                    // 找出模板中`${數(shù)字}`格式的內(nèi)容，進行替換
                    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:[
                            "$?: 數(shù)據(jù)的順序，從1開始，不含空行",
                            "$#: 數(shù)據(jù)的數(shù)量，不含空行",
                            "$0: 原始數(shù)據(jù)，整行數(shù)據(jù)",
                            "$數(shù)字: $1,$2,...，表示第1,2,...列數(shù)據(jù)",
                            "${數(shù)字}: ${11},${12},...，表示第11,12,...列數(shù)據(jù)，用于去除$11與$1的混淆(暫未實現(xiàn))"
                        ].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">
            <h4>模板生成器</h4>
        </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="請輸入數(shù)據(jù)" 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如何實現(xiàn)模板生成大量數(shù)據(jù)的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享標題：JavaScript如何實現(xiàn)模板生成大量數(shù)據(jù)的方法-創(chuàng)新互聯(lián)
文章轉載：http://muchs.cn/article20/dpppco.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、手機網(wǎng)站建設、云服務器、面包屑導航、電子商務、網(wǎng)頁設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設