270 lines
11 KiB
HTML
270 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<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 {
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
main {
|
||
flex: 1;
|
||
height: 100%;
|
||
}
|
||
|
||
footer {
|
||
margin-top: auto;
|
||
}
|
||
</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(/[\r\n]/g, "");
|
||
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(/&lt;br&gt;/gi, "n").replace(/(&lt;([^&gt;]+)&gt;)/gi, "");
|
||
}
|
||
}
|
||
return this;
|
||
} else {
|
||
if (document.body.innerText) {
|
||
return this[0].innerText;
|
||
} else {
|
||
return this[0].innerHTML.replace(/&lt;br&gt;/gi, "n").replace(/(&lt;([^&gt;]+)&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>
|
||
</body>
|
||
</html>
|
||
<footer style="padding:30px;text-align:center;font-family:'JetBrains Mono NL', Monaco, monospace;position:relative;">
|
||
Copyright © 2023 <a
|
||
href="http://beian.miit.gov.cn">皖ICP备2023020538号</a>All Rights Reserved.
|
||
<p></p>
|
||
</footer> |