[英]JSON pretty print in javascript
試圖讓我的縮進在prettyprint JS函數上正常工作。只需要一個簡單的JSON字符串化該漂亮的打印件即可。
我處於鎖定的較舊JS服務器環境中。 沒有JSON obj。 我不能使用JSON.stringify或JSON polyfills,所以我必須編寫自己的func ..
function prettyprint(obj, ind){
ind = ind || 0;
var indent = spaces(ind), str = '';
if((typeof obj).match(/string|number/) || obj == null){
return indent + obj;
} else if(obj.push){
for(var i=0;i<obj.length;i++){
str = str + prettyprint(obj[i], ind+2 || 2);
}
return indent + '[' + str + ']\n';
} else {
str = indent + ' {';
for(var i in obj){
str = str + '\n' + indent+' '+ i + ': ' + prettyprint(obj[i], ind+2);
}
return str +'\n';
}
return str;
function spaces(n){
return Array(n).join(' ');
}
}
這就是我正在嘗試的方法。.prettyprint({'a':'b','b':{'c':'d'}})
我認為這將很有趣。 我嘗試以修改您的代碼為起點,但是很快發現在正確的位置管理逗號和回車變得非常復雜。
因此,我將其轉換為代碼,該代碼運行傳遞給它的對象,並在其格式化輸出字符串時發出令牌。 我粘貼了下面的代碼。
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'
}
}]
我希望這對您有用。
我最終得到的是:
function pp(obj, ind){
ind = ind || 0;
if(typeof obj === 'object' && obj !== null){
var s = sp(ind) + (obj.push ? '[':'{') + '\n';
for(i in obj)
s += sp(ind+2) + i + ': ' + pp(obj[i], ind+2);
obj = s + sp(ind) + (obj.push ? ']':'}');
}
return obj + '\n';
function sp(n){
return Array(n).join(' ');
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.