JSON格式化

Crazy_diamonds

已于 2023-02-09 09:55:56 修改

阅读量187

点赞数

文章标签： json 前端 javascript

于 2023-02-09 09:45:56 首次发布

本文链接：https://blog.csdn.net/weixin_50060562/article/details/128947451

版权

该网页是一个HTML文档，实现了一个简单的在线JSON格式化功能。用户可以输入JSON数据，点击按钮进行格式化，并能直接复制格式化后的文本。页面还包含错误检测，若输入不符合JSON规范，会显示错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>