自動化ツール（コード生成、パターン抽出）

于 2017-05-15 00:09:00 发布
阅读量111 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript xhtml ui ViewUI
原文链接：http://www.cnblogs.com/wangjixianyun/p/6854573.html
本文介绍了一个使用HTML和jQuery实现的动态表格生成示例，该示例能够从输入文本中解析数据并生成可视化的表格，同时提供了一个用于替换模板字符串的功能。

コード生成：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
    <script>

        function _exeInputValue() {
            var inputText = $("#inputText").val();
            var inputLines = inputText.split("\n");
            var inputGridValues = [];
            for (var i = 0 ; i < inputLines.length; i++) {
                var line = inputLines[i];
                if (line.length > 0) {
                    var values = line.split("\t");
                    var lineValues = [];

                    for (var j = 0 ; j < values.length ; j++) {
                        lineValues.push(values[j]);
                    }

                    inputGridValues.push(lineValues);
                }
            }

            return inputGridValues;
        }

        function _exeInputView(inputGridValues)
        {
            var table = $("<table class='outputViewTable'>");
            for (var i = 0 ; i < inputGridValues.length ; i++) {
                var lineValues = inputGridValues[i];

                if (i == 0) {
                    var tr = $("<tr class='w3-green'>");
                    for (var j = 0 ; j < lineValues.length; j++) {
                        var value = lineValues[j];

                        var td = $("<td class='w3-border-white'>");
                        td.html('{' + j + '}');

                        tr.append(td);
                    }
                    table.append(tr);
                }

                var tr = $("<tr>");
                for (var j = 0 ; j < lineValues.length; j++) {
                    var value = lineValues[j];

                    var td = $("<td>");
                    td.html(value);

                    tr.append(td);
                }
                table.append(tr);
            }

            $("#inputView").empty().append(table);
        }

        function _exeOutputCode(inputGridValues) {
            var template = $("#inputTemplate").val();

            var outputText = [];

            for (var i = 0 ; i < inputGridValues.length; i++) {
                var lineValues = inputGridValues[i];

                var text = template;
                for (var j = 0 ; j < lineValues.length; j++) {
                    var value = lineValues[j];
                    text = text.replace("{" + j + "}", value);
                }

                outputText.push(text);
            }

            $("#outputText").val(outputText.join("\n"));
        }

        function codeOutput() {
            
            var inputGridValues = _exeInputValue();

            _exeInputView(inputGridValues);

            _exeOutputCode(inputGridValues);
        }
    </script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
        *{
            box-sizing:border-box;
        }
        body{
            overflow:hidden;
        }
        table{
            border-collapse:collapse;
        }
        .absoluteBase {
            position: absolute;
            top: 0px;
            bottom: 0;
            left: 0;
            right: 0;
        }
        div {
            /*border: 1px solid green;*/
        }
        .leftTop {
            bottom: 50%;
            right: 50%;
        }
        .rightTop {
            bottom: 50%;
            left: 50%;
        }
        .bottom {
            top: 50%;
        }
        .relativeRoot {
            position: relative;
            height: 100%;
            width: 100%;
        }
        .title {
            padding: 8px;
            font-size: 20px;
            font-family: "Segoe UI",Arial,sans-serif;
        }
        #inputView,#outputView{
            padding:5px;
            overflow:scroll;
        }
        textarea{
            border:none;
        }
        button{
            height:35px;
        }
        .outputViewTable td {
            border: 1px solid #4CAF50;
            padding: 5px 8px;
        }
    </style>
</head>
<body>
    <div style="height:35px;">
        <button onclick="codeOutput();">コード生成</button>
    </div>
    <div style="position:absolute;top:35px;bottom:2px;left:0;right:0;border:1px solid black;">
        <div class="relativeRoot">
            <div class="absoluteBase leftTop w3-border">
                <div class="relativeRoot">
                    <div class="absoluteBase" style="bottom:50%">
                        <div class="title w3-teal" style="height:50px;">
                            入力値
                        </div>
                        <div class="absoluteBase" style="top:50px">
                            <textarea id="inputText" style="width:100%;height:100%">a1	b1	c1
a2	b2	c2
a3	b3	c3</textarea>
                        </div>
                    </div>
                    <div class="absoluteBase" style="top:50%;">
                        <div class="title w3-teal" style="height:50px;">
                            入力テンプレート
                        </div>
                        <div class="absoluteBase" style="top:50px">
                            <textarea id="inputTemplate" style="width:100%;height:100%">//{0}
public string {1}; //{2}
</textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="absoluteBase rightTop w3-border">
                <div class="relativeRoot">
                    <div class="title w3-teal" style="height:50px;">
                        入力値可視化
                    </div>
                    <div id="inputView" class="absoluteBase" style="top:50px">
                        
                    </div>
                </div>
            </div>
            <div class="absoluteBase bottom w3-border" >
                <div class="relativeRoot">
                    <div class="title w3-teal" style="height:50px;">
                        出力テキスト
                    </div>
                    <div class="absoluteBase" style="top:50px">
                        <textarea id="outputText" style="width:100%;height:100%"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

　　パターン抽出：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
    <script>

        function _exeOutputView(arr)
        {
            var table = $("<table class='outputViewTable'>");
            for (var i = 0 ; i < arr.length ; i++) {
                var lineValues = arr[i];

                if (i == 0) {
                    var tr = $("<tr class='w3-green'>");
                    for (var j = 0 ; j < lineValues.length; j++) {
                        var value = lineValues[j];

                        var td = $("<td class='w3-border-white'>");
                        td.html('{' + j + '}');

                        tr.append(td);
                    }
                    table.append(tr);
                }

                var tr = $("<tr>");
                for (var j = 0 ; j < lineValues.length; j++) {
                    var value = lineValues[j];

                    var td = $("<td>");
                    td.html(value);

                    tr.append(td);
                }
                table.append(tr);
            }

            $("#outputView").empty().append(table);
        }

        function _exeOutputCode(arr) {

            var outputText = [];

            for (var i = 0 ; i < arr.length; i++) {
                var lineValues = arr[i];

                var text = "";
                for (var j = 0 ; j < lineValues.length; j++) {
                    var value = lineValues[j];
                    if (j != 0) {
                        text += '\t';
                    }
                    text += value;
                }

                outputText.push(text);
            }

            $("#outputText").val(outputText.join("\n"));
        }

        function codeOutput(matchFromFirst) {
            
            var resultArray = [];

            var text = $("#inputText").val();

            var regexText = $("#inputRegex").val();

            var regex = new RegExp(regexText, "g");

            if (!text || !regexText) {
                return;
            }

            var result = regex.exec(text);
            while (result) {
                var arr = [];
                var i = 0;
                if (matchFromFirst == false) {
                    i = 1;
                }
                for ( ; i < result.length ; i++) {
                    arr.push(result[i]);
                }
                resultArray.push(arr);
                result = regex.exec(text);
            }
            //var mm = regex.exec(text);
            //var m = text.match(regex);

            _exeOutputCode(resultArray);
            _exeOutputView(resultArray);
        }
    </script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
        *{
            box-sizing:border-box;
        }
        table{
            border-collapse:collapse;
        }
        .absoluteBase {
            position: absolute;
            top: 0px;
            bottom: 0;
            left: 0;
            right: 0;
        }
        div {
            /*border: 1px solid green;*/
        }
        .leftTop {
            bottom: 50%;
            right: 50%;
        }
        .rightTop {
            bottom: 50%;
            left: 50%;
        }
        .leftBottom {
            top: 50%;
            right: 50%;
        }
        .rightBottom {
            top: 50%;
            left: 50%;
        }
        .relativeRoot {
            position: relative;
            height: 100%;
            width: 100%;
        }
        .title {
            padding: 8px;
            font-size: 20px;
            font-family: "Segoe UI",Arial,sans-serif;
        }
        #inputView,#outputView{
            padding:5px;
            overflow:scroll;
        }
        textarea{
            border:none;
        }
        button{
            height:35px;
        }
        .outputViewTable td {
            border: 1px solid #4CAF50;
            padding: 5px 8px;
        }
    </style>
</head>
<body>
    <div style="height:35px;">
        <button onclick="codeOutput(true);">パターン抽出(0含む)</button>
        <button onclick="codeOutput(false);">パターン抽出(0含まない)</button>
    </div>
    <div style="position:absolute;top:35px;bottom:0;left:0;right:0;border:1px solid black;">
        <div class="relativeRoot">
            <div class="absoluteBase leftTop w3-border">
                <div class="relativeRoot">
                    <div class="title w3-teal" style="height:50px;">
                        入力値
                    </div>
                    <div class="absoluteBase" style="top:50px">
                        <textarea id="inputText" style="width:100%;height:100%">//a1
public string b1; //c1

//a2
public string b2; //c2

//a3
public string b3; //c3
</textarea>
                    </div>
                </div>
            </div>
            <div class="absoluteBase rightTop w3-border">
                <div class="relativeRoot">
                    <div class="title w3-teal" style="height:50px;">
                        Regex
                    </div>
                    <div class="absoluteBase" style="top:50px">
                        <textarea id="inputRegex" style="width:100%;height:100%">//(.+)\n.*public string (.+); //(.+)</textarea>
                    </div>
                </div>
            </div>
            <div class="absoluteBase leftBottom w3-border">
                <div class="relativeRoot">
                    <div class="title w3-teal" style="height:50px;">
                        出力テキスト
                    </div>
                    <div class="absoluteBase" style="top:50px">
                        <textarea id="outputText" style="width:100%;height:100%"></textarea>
                    </div>
                </div>
            </div>
            <div class="absoluteBase rightBottom w3-border">
                <div class="relativeRoot">
                    <div class="title w3-teal" style="height:50px;">
                        出力値可視化
                    </div>
                    <div id="outputView" class="absoluteBase" style="top:50px">

                    </div>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>

　　

转载于:https://www.cnblogs.com/wangjixianyun/p/6854573.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值