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

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

  • 值(对象或数组)
  • 替换或过滤器(用于处理或显示带有索引的字符串数组的函数)
  • 空格(用空格或换行符漂亮地打印json)
var value = http://www.srcmini.com/{ 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 stringvar 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 =http://www.srcmini.com/=="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给出突出显示样式:
【如何漂亮地打印(美化)JSON字符串】语法高亮函数将为每个属性添加一个自定义类的跨度, 以在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控制台中输出以下内容:
如何漂亮地打印(美化)JSON字符串

文章图片
玩得开心 !

    推荐阅读