<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="icon" type="image/png" href="NIKO.png">
    <title>JSON在线解析及格式化验证</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="HandheldFriendly" content="True"/>
    <meta name="MobileOptimized" content="320"/>
    <meta http-equiv="Cache-Control" content="max-age=7200"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all"/>
    <meta name="author" content="BAOGUTANG-JSON"/>
    <link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{css/bootstrap.min.css}">
    <link href="css/font-awesome.min.css" rel="stylesheet" th:href="@{css/font-awesome.min.css}">
    <link href="css/base.css" rel="stylesheet" th:href="@{css/base.css}">
    <style>
        body, html {
            min-height: 100%;
            margin: 0;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        main {
            min-height: calc(100% - 60px); /* 减去页脚的高度，这里假设页脚高度为60px */
        }

        footer {
            padding: 30px;
            text-align: center;
            font-family: 'JetBrains Mono NL', Monaco, monospace;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Favicons -->
</head>
<body style="over-flow:hidden;">
<header class="header">
    <div class="row-fluid">
        <div class="col-md-5" style="position:relative;">
            <span class="logo">BAOGUTANG-JSON</span>
        </div>
        <nav class="col-md-7" style="padding:10px 0;" align="right">
        </nav>
        <br style="clear:both;"/>
    </div>
</header>


<main class="row-fluid" style="height:85%;min-height:550px;">
    <div class="col-md-5" style="padding:0px;height:100%;">
        <textarea id="json-src" placeholder="在此输入json字符串或XML字符串..." class="form-control"
                  style="height:1144px;padding:0 10px 10px 20px;border:0;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none; outline:none;"></textarea>
    </div>
    <div class="col-md-7" style="padding:0;">
        <div style="padding:10px;font-size:16px;border-bottom:solid 1px #ddd;" class="navi">
            <a href="#" class="tip zip" title="压缩" data-placement="bottom"><i class="fa fa-database"></i></a>
            <a href="#" class="tip xml" title="转XML" data-placement="bottom"><i class="fa fa-file-excel-o"></i></a>
            <a href="#" class="tip shown" title="显示行号" data-placement="bottom"><i
                    class="glyphicon glyphicon-sort-by-order"></i></a>
            <a href="#" class="tip clear" title="清空" data-placement="bottom"><i class="fa fa-trash"></i></a>
            <a href="#" class="tip save" title="保存" data-placement="bottom"><i class="fa fa-download"></i></a>
            <a href="#" class="tip copy" title="复制" data-clipboard-target="#json-target" data-placement="bottom"><i
                    class="fa fa-copy"></i></a>
            <a href="#" class="tip compress" title="折叠" data-placement="bottom"><i class="fa fa-compress"></i></a>
        </div>
        <div id="right-box"
             style="height:1100px;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none;overflow-y:scroll; outline:none;position:relative;">
            <div id="line-num"
                 style="background-color:#fafafa;padding:0px 8px;float:left;border-right:dashed 1px #eee;display:none;z-index:-1;color:#999;position:absolute;text-align:center;over-flow:hidden;">
                <div>0</div>
            </div>
            <div class="ro" id="json-target" style="padding:0px 25px;over">
            </div>
        </div>
        <form id="form-save" method="POST"><input type="hidden" value="" id="txt-content" name="content"></form>
    </div>
    <br style="clear:both;"/>
</main>
<link href="css/jquery.numberedtextarea.css" rel="stylesheet" th:href="@{css/jquery.numberedtextarea.css}">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.message.js"></script>
<script src="js/jquery.json.js"></script>
<script src="js/jquery.xml2json.js"></script>
<script src="js/jquery.json2xml.js"></script>
<script src="js/json2.js"></script>
<script src="js/jsonlint.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/FileSaver.min.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/jquery.numberedtextarea.js"></script>
<script type="text/javascript">
    $('textarea').numberedtextarea();
    var current_json = '';
    var current_json_str = '';
    var xml_flag = false;
    var zip_flag = false;
    var shown_flag = false;
    var compress_flag = false;
    var xml_text;
    $('.tip').tooltip();

    function init() {
        xml_flag = false;
        zip_flag = false;
        shown_flag = false;
        compress_flag = false;
        renderLine();
        $('.xml').attr('style', 'color:#999;');
        $('.zip').attr('style', 'color:#999;');
    }

    $('#json-src').keyup(function () {
        init();
        var content = $.trim($(this).val());
        var result = '';
        if (content != '') {
            //如果是xml,那么转换为json
            if (content.substr(0, 1) === '<' && content.substr(-1, 1) === '>') {
                try {
                    var json_obj = $.xml2json(content);
                    content = JSON.stringify(json_obj);
                } catch (e) {
                    result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
                    current_json_str = result;
                    $('#json-target').html(result);
                    return false;
                }
            }
            try {
                content = content.replace(/\\\s+/g, "");
                // content = content.replace(/\\/g, '');
                // content = content.replace(/[\r\n]/g, "");
                content = content.replace(/\r?\n/g, '\\n');
                current_json = jsonlint.parse(content);
                current_json_str = JSON.stringify(current_json);
                result = new JSONFormat(content, 4).toString();
            } catch (e) {
                result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
                current_json_str = result;
            }
            $('#json-target').html(result);
        } else {
            $('#json-target').html('');
        }
    });
    $('.xml').click(function () {
        if (xml_flag) {
            $('#json-src').keyup();
        } else {
            var result = $.json2xml(current_json);
            $('#json-target').html('<textarea style="width:100%;position:absolute;height: 80vh;min-height:480px;border:0;resize:none;">' + result + '</textarea>');
            xml_text = result;
            xml_flag = true;
            $(this).attr('style', 'color:#15b374;');
        }
    });
    $('.shown').click(function () {
        if (!shown_flag) {
            renderLine();
            $('#json-src').attr("style", "height:722px;padding:0 10px 10px 40px;border:0;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none; outline:none;");
            $('#json-target').attr("style", "padding:0px 50px;");
            $('#line-num').show();
            $('.numberedtextarea-line-numbers').show();
            shown_flag = true;
            $(this).attr('style', 'color:#15b374;');
        } else {
            $('#json-src').attr("style", "height:722px;padding:0 10px 10px 20px;border:0;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none; outline:none;");
            $('#json-target').attr("style", "padding:0px 20px;");
            $('#line-num').hide();
            $('.numberedtextarea-line-numbers').hide();
            shown_flag = false;
            $(this).attr('style', 'color:#999;');
        }
    });

    function renderLine() {
        var line_num = $('#json-target').height() / 20;
        $('#line-num').html("");
        var line_num_html = "";
        for (var i = 1; i < line_num + 1; i++) {
            line_num_html += "<div>" + i + "<div>";
        }
        $('#line-num').html(line_num_html);
    }

    $('.zip').click(function () {
        if (zip_flag) {
            $('#json-src').keyup();
        } else {
            $('#json-target').html(current_json_str);
            zip_flag = true;
            xml_flag = false;
            $(this).attr('style', 'color:#15b374;');
        }

    });
    $('.compress').click(function () {
        if (!compress_flag) {
            $(this).attr('style', 'color:#15b374;');
            //$(this).attr('title','取消折叠').tooltip('fixTitle').tooltip('show');
            $($(".fa-minus-square-o").toArray().reverse()).click();
            compress_flag = true;
        } else {
            while ($(".fa-plus-square-o").length > 0) {
                $(".fa-plus-square-o").click();
            }
            compress_flag = false;
            $(this).attr('style', 'color:#555;');
            $(this).attr('title', '折叠').tooltip('fixTitle').tooltip('show');
        }
    });
    $('.clear').click(function () {
        $('#json-src').val('');
        $('#json-target').html('');
    });
    (function ($) {
        $.fn.innerText = function (msg) {
            if (msg) {
                if (document.body.innerText) {
                    for (var i in this) {
                        this[i].innerText = msg;
                    }
                } else {
                    for (var i in this) {
                        this[i].innerHTML.replace(/&amp;lt;br&amp;gt;/gi, "n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
                    }
                }
                return this;
            } else {
                if (document.body.innerText) {
                    return this[0].innerText;
                } else {
                    return this[0].innerHTML.replace(/&amp;lt;br&amp;gt;/gi, "n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
                }
            }
        };
    })(jQuery);
    $('.save').click(function () {
        //console.log('xml_flag' +'<br/>'+ xml_flag);
        var text;
        if (xml_flag) {
            var text1 = $.trim($('#json-src').val());
            // console.log('text1' +'<br/>'+ text1);
            text = xml_text;
            //console.log('text' +'<br/>'+ text);
        } else {
            var html = $('#json-target').html().replace(/\n/g, '<br/>').replace(/\n/g, '<br>');
            text = $('#json-target').innerText().replace('　　', '    ');
            // console.log('text' +'<br/>'+ text);
        }
        var blob = new Blob([text], {type: "application/json;charset=utf-8"});
        var timestamp = new Date().getTime();
        saveAs(blob, "format." + timestamp + ".json");
    });
    $('.copy').click(function () {
    });
    var clipboard = new Clipboard('.copy');
    $('#json-src').keyup();
</script>
<footer style="padding:30px;text-align:center;font-family:'JetBrains Mono NL', Monaco, monospace;position:relative;">
    Copyright © 2024 <a
        href="http://beian.miit.gov.cn">皖ICP备2024050571号</a>All Rights Reserved.
    <p></p>
</footer>
</body>
</html>
