SQL tools

DouMiaoO_Oo
已于 2023-06-28 18:26:09 修改
阅读量620
点赞数
文章标签： sql
于 2023-06-12 14:32:29 首次发布
本文链接：https://blog.youkuaiyun.com/DouMiaoO_Oo/article/details/131168135
版权
这是一个HTML页面，包含JavaScript代码，提供SQL字段的辅助功能。用户可以输入SQL语句，工具会自动进行字段提取、重排序和计算字段差集。页面有三个主要部分：字段提取、字段重排序和字段差集计算，分别对应不同的文本输入和输出区域。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SQL简单辅助工具</title>
    <style>
        textarea {
            /* background-color: red; */
            /* columns: 40; */
        }
        .text_output {
            /* background-color: red; */
            /* pointer-events: none; */
        }
        /* div.text_output {
            border:1px solid black;
            padding: 0px;
            display: inline-block;
        } */


    </style>
    <script type="text/javascript">
        // 动态注册 onload 事件
        window.onload = function fun(){
            // alert('window.onload');
            // 1. disable 每个用于输出结果的 input 组件
            var className = "text_output";
            var inputs = document.getElementsByClassName(className);
            for(var i = 0, n = inputs.length; i < n; ++i){
                // alert(inputs[i]);
                inputs[i].disabled = true;
            }
            // 2. 设置 textarea 大小
            // var inputs = document.getElementsByTagName("textarea");
            // var COLUMNS = "80";
            // var ROWS = "50"
            // for(var i = 0, n = inputs.length; i < n; ++i){
            //     inputs[i].cols = COLUMNS;
            //     inputs[i].rows = ROWS;
            // }

            // 3. 设置 output div 大小
            // var e = document.getElementById("id_text_input_diff_right");
            // var width = e.offsetWidth;    // 返回元素的总宽度
            // var height = e.offsetHeight;
            // // console.log("w:" + width + ", h:" + height);
            // var div = document.getElementById("id_text_output_diff");
            // div.setAttribute("style","width:" + width + "px;height:" + height + "px");
        }
    </script>
</head>
<body>
<!-- <input type="text" class="text_input" onpropertychange="resh()" οninput="resh()" id="id_text_input">
<input type="text" class="text_output" id="id_text_output"> -->
<div class="toolName">字段（简单）提取</div>
<textarea class="text_input" onpropertychange="resh()" oninput="resh()" id="id_text_input" cols="80" rows="50"></textarea>
<textarea class="text_output" id="id_text_output" cols="40" rows="50"></textarea>

<div class="toolName">字段（简单）重排序</div>
<textarea class="text_input" id="id_text_input_reorder_base" cols="20" rows="50"></textarea>
<textarea class="text_input" onpropertychange="resh_reorder()" oninput="resh_reorder()" id="id_text_input_reorder" cols="40" rows="50"></textarea>
<textarea class="text_output" id="id_text_output_reorder" cols="40" rows="50"></textarea>

<div class="toolName">字段差集</div>
<textarea class="text_input" id="id_text_input_diff_left" cols="20" rows="50"></textarea>
<textarea class="text_input" onpropertychange="resh_diff()" oninput="resh_diff()" id="id_text_input_diff_right" cols="40" rows="50"></textarea>
<textarea class="text_output" id="id_text_output_diff" cols="40" rows="50"></textarea>


</body>
<script>
    function resh(){
        // 提取字段名称
        /*
            g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即 停止；
            i：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
            m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模 式匹配的项
        */
        var str = document.getElementById("id_text_input").value;
        var comment_reg = /--.*$/gm  // \S匹配任何非空白字符, \s匹配任何空白字符
        var case_reg = /\bcase\b[\s\S]*?\bend\b[\s]*\bas\b/gim;  // .*不能匹配换行 [\s\S]*可以匹配换行
        var if_reg = /\bif\b[\s]*\([\s\S]*?\)[\s]*\bas\b/gim;  // .*不能匹配换行 [\s\S]*可以匹配换行
        var content = str.replace(comment_reg, '');
        var content = content.replace(case_reg, "as");
        var content = content.replace(if_reg, "as");
        // document.getElementById("id_text_output").value = content;

        var lines = content.split("\n");
        var res = new Array();
        var pat = /^.*?\bas\b[\s]*([a-zA-Z_][a-zA-Z0-9_]{0,127})[\s]*,*.*$/

        for(var i = 0, n = lines.length; i < n; ++i){
            lines[i] = lines[i].trim()
            if(lines[i] == "") continue;
            if(!/\bas\b/.test(lines[i])){
                // 没有使用 as 给字段重命名的情况
                var line = lines[i].replace(/.*?\.([a-zA-Z_][a-zA-Z0-9_]{0,127}),*.*$/, "$1").replace(/,+/, '');
                res.push(line);
                continue
            }
            var line = lines[i].replace(pat, "$1");
            res.push(line);
            // console.log("i=", i, ', n=', n);
            console.log(res);
        }
        var content = res.join('\n');
        document.getElementById("id_text_output").value = content;
    }

    function resh_reorder(){
        // console.log("reg: ", /\bfield\b/.test("  field"));
        // var field = "field"
        // var reg = new RegExp("\\b" + field + "\\b");
        // console.log("reg2: ", reg);
        // console.log("reg2: ", reg.test("  field"));

        // 按照给定字段顺序简单重排序
        var content = document.getElementById("id_text_input_reorder_base").value;
        var targets = content.split("\n");
        var content = document.getElementById("id_text_input_reorder").value;
        var lines = content.split("\n");
        var res = new Array();
        for(var i = 0, n = targets.length; i < n; ++i){
            targets[i] = targets[i].trim();
            if(targets[i] == "") continue;
            var reg = new RegExp("\\b" + targets[i] + "\\b");
            for (var j = 0, m = lines.length; j < m; ++j){
                if(reg.test(lines[j])){
                    res.push(lines[j]);
                    lines.slice(j, 1);
                    break
                }
            }
        }
        var content = res.join('\n');
        document.getElementById("id_text_output_reorder").value = content;
    }
    
    function getDifference(setA, setB) {
        return new Set(
            [...setA].filter(element => !setB.has(element))
        );
    }

    function resh_diff(){
        console.log("resh_diff");
        // 比较左右2个文本框内字段的差异
        var content = document.getElementById("id_text_input_diff_left").value;
        var left = new Set(content.split("\n"));
        var content = document.getElementById("id_text_input_diff_right").value;
        var right = new Set(content.split("\n"));

        var left_minus_right = Array.from(getDifference(left, right)).join('\n');
        var right_minus_left = Array.from(getDifference(right, left)).join('\n');
        var inner_html = "<span style=\"color:red\"> 左 - 右：</span>"
        var content = "".concat(
            "左 - 右：\n",
            left_minus_right,
            "\n\n##########################\n\n右 - 左：\n",
            right_minus_left
        );
        document.getElementById("id_text_output_diff").value = content;
        // document.getElementById("id_text_output_diff").innerHTML = inner_html;
    }
</script>
</html>