pretty JSON 이쁘게 출력 (javascript)

2019. 4. 15. 20:51

1. JQuery 사용자라면, 아래 코드로 예쁘게 출력 가능.

JSON.stringify(JSON.parse($('#textarea').val()), null, 4);

2. JQuery 미 사용시 함수

소스 (prettyJson.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script type="text/javascript">
const TAB = '    ';

function prettyJson(jsonText) {
	if(!jsonText) {
		return jsonText;
	}
	
	var prettyJson = new Array();
	var depth = 0;
	var currChar;
	var prevChar;
	var doubleQuoteIn = false;
	
	for(var i = 0; i < jsonText.length; i++) {
		currChar = jsonText.charAt(i);
		
		if(currChar == '\"') {
			if(prevChar != '\\') {
				doubleQuoteIn = !doubleQuoteIn;
			}
		}

		switch(currChar) {
		case '{':
			prettyJson.push(currChar);
			if(!doubleQuoteIn) {
				prettyJson.push('\n');
				insertTab(prettyJson, ++depth);
			}
			break;
		case '}':
			if(!doubleQuoteIn) {
				prettyJson.push('\n');
				insertTab(prettyJson, --depth);
			}
			prettyJson.push(currChar);
			break;
		case ',':
			prettyJson.push(currChar);
			if(!doubleQuoteIn) {
				prettyJson.push('\n');
				insertTab(prettyJson, depth);
			}
			break;
		default:
			prettyJson.push(currChar);
			break;
		}
		
		prevChar = currChar;
	}
	return prettyJson.join('');
}

function insertTab(prettyJson, depth) {
	for(var i = 0; i < depth; i++) {
		prettyJson.push(TAB);
	}
}

function btnSubmit() {
	var jsonText = document.getElementById('jsonText').value;
	document.getElementById('prettyJson').value = prettyJson(jsonText);
}
</script>

</head>
<body>
<p><textarea id="jsonText" rows="15" cols="80">{"fruit1":"apple","fruit2":"banana","fruits":[{"orange"},{"mango"}]}</textarea></p>
<p><input type="button" onclick="btnSubmit()" value="json pretty ▼"></p>
<p><textarea id="prettyJson" rows="15" cols="80"></textarea></p>
</body>
</html>

출력 값

darkrrr

pretty JSON 이쁘게 출력 (javascript)

티스토리툴바