나는 이것이 흥미로울 것이라고 생각했다; 시작점으로 코드를 수정하려고 시도했지만 정확한 장소에서 쉼표를 관리하고 캐리지 리턴이 매우 복잡해지고 있음을 빠르게 알았습니다.
그래서 전달 된 개체를 통해 실행되는 코드로 변환하고 출력 문자열의 서식을 지정하면서 토큰을 방출합니다. 아래 코드를 붙여 넣었습니다.
prettyPrint.js :
prettyPrint = function (data) {
return new prettyPrint.processor(data).output;
}
prettyPrint.indentString = ' ';
prettyPrint.processor = function (data) {
var indent = 0,
output = '',
tokens = {
value: 1,
openArray: 2,
arrayValueSeparator: 3,
closeArray: 4,
openObject: 5,
objectValueName: 6,
objectValueSeparator: 7,
closeObject: 8
};
function isArray(unknown) {
return Object.prototype.toString.call(unknown) === '[object Array]';
}
function isObject(unknown) {
return Object.prototype.toString.call(unknown) === '[object Object]';
}
function space() {
var count = indent;
var result = '';
while (count--) result += prettyPrint.indentString;
return result;
}
function emit(tokenType, value) {
switch (tokenType) {
case tokens.value:
output += value;
break;
case tokens.openArray:
output += '[';
break;
case tokens.arrayValueSeparator:
output += ', ';
break;
case tokens.closeArray:
output += ']';
break;
case tokens.openObject:
output += '{';
indent += 1;
break;
case tokens.objectValueName:
output += '\n' + space() + (/^[a-z][a-z0-9_]*$/i.test(value) ? value : "'" + value + "'") + ': ';
break;
case tokens.objectValueSeparator:
output += ',';
break;
case tokens.closeObject:
indent -= 1;
output += '\n' + space() + '}';
break;
}
}
function process(data) {
var p, first;
if (data === undefined) {
return;
}
// Don't surround null with quotes.
if (data === null) {
emit(prettyPrint.tokens.value, 'null');
}
else if (isArray(data)) {
emit(tokens.openArray);
first = true;
for (p in data) {
if (!first) {
emit(tokens.arrayValueSeparator);
}
process(data[p]);
first = false;
}
emit(tokens.closeArray);
}
else if (isObject(data)) {
emit(tokens.openObject);
first = true;
for (p in data) {
if (data.hasOwnProperty(p) && data[p] !== undefined) {
if (!first) {
emit(tokens.objectValueSeparator);
}
emit(tokens.objectValueName, p);
process(data[p]);
first = false;
}
}
emit(tokens.closeObject);
}
else if (data instanceof Date) {
emit(tokens.value, "'" + data.toISOString() + "'");
}
else if (typeof data === 'number') {
emit(tokens.value, isNaN(data) ? 'null' : data.toString());
}
else {
emit(tokens.value, "'" + data.toString() + "'");
}
}
// Start processing the data.
process(data);
// Export the data.
this.output = output;
}
prettyPrint.html :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Pretty Print Testing</title>
<script type="text/javascript" src="prettyPrint.js"></script>
</head>
<body>
<pre id="pretty1"></pre>
<pre id="pretty2"></pre>
<script type="text/javascript">
document.getElementById('pretty1').innerHTML = prettyPrint({ 'a': 'b', 'b': { 'c': 'd' } });
document.getElementById('pretty2').innerHTML = prettyPrint([1, 2, "three", { 'complex-name': [1] }, { simpleName: { subArray: [1, 2, 3], subString: "Hello" } }]);
</script>
</body>
</html>
출력 :
{
a: 'b',
b: {
c: 'd'
}
}
[1, 2, 'three', {
'complex-name': [1]
}, {
simpleName: {
subArray: [1, 2, 3],
subString: 'Hello'
}
}]
나는이가 도움이 되었기를 바랍니다.
이 왜 polyfills을 사용할 수 없습니다? – Bart
XMLHttpRequest 또는 ActiveXObject를 사용하고 API를 통해 예쁘게 인쇄하는 방법은 무엇입니까? – shiva