格式化json

最新推荐文章于 2025-05-12 14:45:45 发布

peter_xizi

最新推荐文章于 2025-05-12 14:45:45 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/musa875643dn/article/details/71173304

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在JavaScript中如何将JSON对象格式化显示，通过遍历属性并进行缩进、换行处理，实现友好的JSON格式展示。文章提供了一段递归实现的代码，并提及了将格式化字符串转回JSON对象时去除多余换行和缩进的方法。

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

我们知道，在js中JSON.parse(xxx)可以将符合json规则的字符串xxx转换成js对象，反过来，可以通过JSON.stringify(xxx)将json对象转换成js字符串。

可能有这样的需求，将json对象在web界面上以友好的方式展现出来，说得直白一点，就是带缩进的格式展示，而这个需求是JSON.parse()无法实现的，我们需要自己实现这个

功能。

思路很简单：遍历json对象的各个属性，进行缩进、换行拼接字符串，如果属性也是json对象，那么就多缩进一层，显然，这是一个递归。

下面直接给出代码(缩进采用\t，拼接字符串时处理了双引号这一种特殊字符，其他的特殊字符也可以参考双引号进行处理)

function formatJson(json, indent, returnStr) {
	var padding='\t';
	var type = typeof json;
	if(type=='object'){
		if(json instanceof Array){
			if(indent >0){
				var pad = "";
				for(var i=0;i<indent;i++){
					pad += padding;
				}
				returnStr +=pad;
			}
			returnStr +='[\r\n';
			var pad = "";
			for(var i=0;i<indent+1;i++){
				pad += padding;
			}
			for(var j=0;j<json.length;j++){
				var data = json[j];
				returnStr= formatJson(data, indent+1, returnStr);
				if(j<json.length-1){
					returnStr +=',\r\n';
				}else{
					returnStr +='\r\n';
				}
			}
			if(indent >0){
				var pad = "";
				for(var i=0;i<indent;i++){
					pad += padding;
				}
				returnStr +=pad;
			}
			returnStr +=']\r\n';
			
		}else{
			if(indent >0){
				var pad = "";
				for(var i=0;i<indent;i++){
					pad += padding;
				}
				returnStr +=pad;
			}
			returnStr +='{\r\n';
			var pad = "";
			for(var i=0;i<indent+1;i++){
				pad += padding;
			}
			var proNum = Object.getOwnPropertyNames(json).length;
			var i=0;
			for(var key in json){
				i++;
				var value = json[key];
				returnStr +=pad;
				returnStr = returnStr+'"' +key +'":';
				returnStr = formatJson(value, indent+1, returnStr);
				if(i<proNum){
					returnStr +=',\r\n';
				}else{
					returnStr +='\r\n';
				}
			}
			if(indent >0){
				var pad = "";
				for(var i=0;i<indent;i++){
					pad += padding;
				}
				returnStr +=pad;
			}
			returnStr +='}\r\n';
		}
	}else{
		returnStr = returnStr + '"'+json.replace(/\"/g,'\\"')+'"';
	}
	return returnStr.replace(/\r\n\r\n/g,'\r\n').replace(/\r\n,\r\n/g,',\r\n');
}

方法的三个参数：json是需要处理的json对象，indent是缩进的层级，returnStr是最后返回的字符串

调用时

var str =new String("");
str=formatJson(data,0,str);

最终展示的效果如图

反过来，将格式化的json字符串转换成json对象，需要将多余的换行符和缩进去掉。

var newStr = $(".apiJSONStr").val();
var reg =/\n/g;
newStr = newStr .replace(reg,'');//replace \r\n
reg=/(\t)/g;
newStr = newStr .replace(reg,'');
try{
	JSON.parse(newStr );
}catch (e) {
	alert("JSON数据格式异常，请排查!");
}

本文地址 http://blog.youkuaiyun.com/musa875643dn/article/details/71173304