<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<title>JSON格式化</title>
<script type="text/javascript">
let source;
let formatText;
let successInfo;
let jsonFormatErr;
window.onload = function() {
source = document.getElementById("source");
formatText = document.getElementById("formatText");
successInfo = document.getElementById("successInfo");
jsonFormatErr = document.getElementById("jsonFormatErr");
}
function addTabs(size) {
let result = "";
for (let y = 0; y < size; y++) {
result += "\t";
}
return result;
}
function copyTxt() {
if(!navigator || !navigator.clipboard) {
formatText.focus();
formatText.select();
document.execCommand("copy");
} else {
navigator.clipboard.writeText(formatText.value).then(
function() {
successInfo.style.visibility = "";
// 2秒后隐藏
setTimeout(function() {
successInfo.style.visibility = "hidden";
}, 1000);
},
function(err) {
}
);
}
}
function includes(arr, node) {
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i] === node) {
return true;
}
}
return false;
}
function formatJson(sourceText) {
let now;
let add;
let tier = 0;
let inStr = false;
let tran = false;
let tranTxt = "";
let lastTxt = "";
let result = "";
for (let i = 0, len = sourceText.length; i < len; i++) {
now = sourceText[i];
if (inStr) {
add = now;
switch(now) {
case "\\":
if (!tran) {
tran = true;
}
continue;
case "'":
if (tranTxt === now && !tran) {
inStr = false;
}
break;
case "\"":
if (tranTxt === now && !tran) {
inStr = false;
}
break;
}
tran = false;
} else {
if ("‘" === now) {
now = "'";
} else if ("“" === now) {
now = "\"";
} else if ("【" === now) {
now = "[";
} else if ("】" === now) {
now = "]";
} else if ("{" === now) {
now = "{";
} else if ("}" === now) {
now = "}";
} else if ("," === now) {
now = ",";
} else if (":" === now) {
now = ":";
}
add = now;
switch(now) {
case "'":
case "\"":
tranTxt = now;
inStr = true;
break;
case "{":
case "[":
tier++;
break;
case "}":
case "]":
tier--;
break;
case "\\":
case "\t":
case "\r":
case "\n":
case " ":
continue;
}
if (includes([',','{','['], lastTxt)) {
if (includes(['{','['], now)) {
add = "\n" + addTabs(tier - 1) + add;
} else {
add = "\n" + addTabs(tier) + add;
}
} else {
if (includes(['}',']'], now)) {
add = "\n" + addTabs(tier) + add;
}
}
}
lastTxt = now;
result += add;
}
if (tier == 0 && !tran) {
jsonFormatErr.style.visibility = "hidden";
} else {
jsonFormatErr.style.visibility = "";
}
return result;
}
function format() {
formatText.value = formatJson(source.value);
}
</script>
</head>
<body>
<div>
<textarea id = "source" style = "width: 800px; height: 300px;"></textarea>
</div>
<div>
<div style = "display: inline;">
<button onclick = "format()" style = "width: 80px; height: 30px;">格式化</button>
<button onclick = "copyTxt()" style = "width: 80px; height: 30px;">复制文本</button>
<text id="successInfo" style = "visibility: hidden; color:green; font-weight: bold;">复制成功</text>
<text id="jsonFormatErr" style = "visibility: hidden; color:red; font-weight: bold;">不符合JSON规范</text>
</div>
<div>
<textarea id = "formatText" style = "width: 800px; height: 300px;" readonly="readonly">
格式后的文本,不可编辑
可复制重复格式化
</textarea>
</div>
</div>
</body>
</html>
JSON格式化
于 2023-02-09 09:45:56 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)