JS中格式化JSON的方法

brains丶小白

已于 2022-09-01 16:57:34 修改

阅读量6.7k

点赞数 4

文章标签： javascript json 前端 html

于 2022-08-29 18:14:08 首次发布

本文链接：https://blog.csdn.net/Yxd0724/article/details/126589937

版权

把JSON数据在前端页面上做格式化处理

主要还是调用以下 formatJson(jsonObj)方法
参数jsonObj为需要格式化的对象，需要注意的是只对JSON格式正确的数据生效，否则返回null
这是Html中的写法，这种方法直接放到vue中使用双向绑定效果更佳
只需要复制transitionJsonToString(jsonObj) 和 formatJson(jsonObj) 这两个核心方法即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>格式化JSON数据</title>
		<style>
			.text-box {
				width: 400px;
				height: 500px;
				border: 1px solid black;
				margin: 0 auto;
			}

			.text-area {
				width: 400px;
				display: block;
				margin: 0 auto;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="text-box">
			<pre id="boxId"></pre>
		</div>
		<div class="text-area">
			<textarea id="textId" rows="4" cols="60" placeholder="在这里输入需要转换的数据"></textarea>
			<button onclick="transitionJson()">格式化JSON</button>
		</div>
		<script type="text/javascript">
			function transitionJson() {
				let textDom = document.getElementById('textId');
				let boxDom = document.getElementById('boxId');
				let textString = textDom.value;
				// 其实只要将输入的String值直接传给formatJson方法就可以了
				console.log(textString);
				console.log(formatJson(textString));
				boxDom.innerText = formatJson(textString);
			}

			// 格式化JSON数据
			function transitionJsonToString(jsonObj) {
				// 转换后的jsonObj受体对象
				// let _jsonObj: any = null; // ts写法
				let _jsonObj = null;
				// 判断传入的jsonObj对象是不是字符串，如果是字符串需要先转换为对象，再转换为字符串，这样做是为了保证转换后的字符串为双引号
				if (Object.prototype.toString.call(jsonObj) !== '[object String]') {
					try {
						_jsonObj = JSON.stringify(jsonObj);
					} catch (error) {
						// 转换失败错误信息
						// callback(error);
					}
				} else {
					try {
						jsonObj = jsonObj.replace(/(\')/g, '"');
						_jsonObj = JSON.stringify(JSON.parse(jsonObj));
					} catch (error) {
						// 转换失败错误信息
						// callback(error);
					}
				}
				return _jsonObj;
			}

			function formatJson(jsonObj) {
				//  console.log(jsonObj)
				//  console.log(callback)
				// 正则表达式匹配规则变量
				let reg = null;
				// 转换后的字符串变量
				let formatted = '';
				// 换行缩进位数
				let pad = 0;
				// 一个tab对应空格位数
				let PADDING = '\t';
				// json对象转换为字符串变量
				let jsonString = transitionJsonToString(jsonObj);
				if (!jsonString) {
					return jsonString;
				}
				// 存储需要特殊处理的字符串段
				let _index = [];
				// 存储需要特殊处理的“再数组中的开始位置变量索引
				let _indexStart = null;
				// 存储需要特殊处理的“再数组中的结束位置变量索引
				let _indexEnd = null;
				// 将jsonString字符串内容通过\r\n符分割成数组
				let jsonArray = [];
				// 正则匹配到{,}符号则在两边添加回车换行
				jsonString = jsonString.replace(/([\{\}])/g, '\r\n$1\r\n');
				// 正则匹配到[,]符号则在两边添加回车换行
				jsonString = jsonString.replace(/([\[\]])/g, '\r\n$1\r\n');
				// 正则匹配到,符号则在两边添加回车换行
				jsonString = jsonString.replace(/(\,)/g, '$1\r\n');
				// 正则匹配到要超过一行的换行需要改为一行
				jsonString = jsonString.replace(/(\r\n\r\n)/g, '\r\n');
				// 正则匹配到单独处于一行的,符号时需要去掉换行，将,置于同行
				jsonString = jsonString.replace(/\r\n\,/g, ',');
				// 特殊处理双引号中的内容
				jsonArray = jsonString.split('\r\n');
				jsonArray.forEach(function(node, index) {
					// 获取当前字符串段中"的数量
					let num = node.match(/\"/g) ? node.match(/\"/g).length : 0;
					// 判断num是否为奇数来确定是否需要特殊处理
					if (num % 2 && !_indexStart) {
						_indexStart = index;
					}
					if (num % 2 && _indexStart && _indexStart != index) {
						_indexEnd = index;
					}
					// 将需要特殊处理的字符串段的其实位置和结束位置信息存入，并对应重置开始时和结束变量
					if (_indexStart && _indexEnd) {
						_index.push({
							start: _indexStart,
							end: _indexEnd,
						});
						_indexStart = null;
						_indexEnd = null;
					}
				});
				// 开始处理双引号中的内容，将多余的"去除
				_index.reverse().forEach(function(item, index) {
					let newArray = jsonArray.slice(item.start, item.end + 1);
					jsonArray.splice(item.start, item.end + 1 - item.start, newArray.join(''));
				});
				// 将处理后的数组通过\r\n连接符重组为字符串
				jsonString = jsonArray.join('\r\n');
				// 将匹配到:后为回车换行加大括号替换为冒号加大括号
				jsonString = jsonString.replace(/\:\r\n\{/g, ':{');
				// 将匹配到:后为回车换行加中括号替换为冒号加中括号
				jsonString = jsonString.replace(/\:\r\n\[/g, ':[');
				// 将上述转换后的字符串再次以\r\n分割成数组
				jsonArray = jsonString.split('\r\n');
				// 将转换完成的字符串根据PADDING值来组合成最终的形态
				jsonArray.forEach(function(item, index) {
					// console.log(item);
					let i = 0;
					// 表示缩进的位数，以tab作为计数单位
					let indent = 0;
					// 表示缩进的位数，以空格作为计数单位
					let padding = '';
					if (item.match(/\{$/) || item.match(/\[$/)) {
						// 匹配到以{和[结尾的时候indent加1
						indent += 1;
					} else if (
						item.match(/\}$/) ||
						item.match(/\]$/) ||
						item.match(/\},$/) ||
						item.match(/\],$/)
					) {
						// 匹配到以}和]结尾的时候indent减1
						if (pad !== 0) {
							pad -= 1;
						}
					} else {
						indent = 0;
					}
					for (i = 0; i < pad; i++) {
						padding += PADDING;
					}
					formatted += padding + item + '\r\n';
					pad += indent;
				});
				// 返回的数据需要去除两边的空格和换行
				return formatted
					.trim()
					.replace(new RegExp('^\\' + '<br />' + '+|\\' + '<br />' + '+$', 'g'), '');
			}
		</script>
	</body>
</html>