如何漂亮地打印(美化)JSON字符串

JSON stringify方法从数组或对象返回JSON字符串。此方法需要3个参数：

• 值(对象或数组)
• 替换或过滤器(用于处理或显示带有索引的字符串数组的函数)
• 空格(用空格或换行符漂亮地打印json)

var value = {
  hello:"Hey!",   bye: "Ok bye!",   id:123
}; // An array or an object

//A function that alters the behavior of the stringification process, // or an array of Strings and Numbers objects that serve as a whitelist for selecting the properties of the value object to be included in the JSON string. 
// If this value is null or undefined, all properties of the object are included in the resulting JSON string
var replacer = ["hello"];

// or a function
// In this case only the id property of the object will be stringified as this is the only property with a numeric value.
function replacer(key, value) {
  if (typeof value === "number") {
    return undefined;
  }
  return value;
}

// a numeric value which is identified as spaces
// or use custom separators (line breaks \t or \n ) 
var space = 5;


JSON.stringify(value, replacer, space);

你可以使用第三个参数漂亮地打印json对象。如果你使用cordova或node.js来创建有组织的.json文件, 这将非常有用。

下面的示例演示如何使用JSON.stringify漂亮地打印(缩进json)json对象并使用css给出突出显示样式：

语法高亮函数将为每个属性添加一个自定义类的跨度, 以在div元素中提供突出显示效果。你甚至可以使用css在chrome控制台中提供突出显示样式, 并在此处详细了解css在控制台中的工作方式。

以下函数将通过JSON.stringify函数处理生成的漂亮打印的json字符串, 并将在控制台中以彩色打印它。

function PrettyPrintJsonConsole(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, '\t');
    }

    var 
        arr = [], _string = 'color:green', _number = 'color:darkorange', _boolean = 'color:blue', _null = 'color:magenta', _key = 'color:red';

    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var style = _number;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                style = _key;
            } else {
                style = _string;
            }
        } else if (/true|false/.test(match)) {
            style = _boolean;
        } else if (/null/.test(match)) {
            style = _null;
        }
        arr.push(style);
        arr.push('');
        return '%c' + match + '%c';
    });

    arr.unshift(json);

    console.log.apply(console, arr);
}

var myCustomObject = {
  numbers:[1, 3, 4, 5],   hello:"Hey there!",   otherThing:true,   anotherThing:4
};

PrettyPrintJsonConsole(JSON.stringify(myCustomObject, null, 4));

使用前一个功能时, 应在chrome控制台中输出以下内容：

玩得开心 ！