HTML页面格式化JSON对象显示

前提条件

从后台获得json字符或对象，或者自定义json字符串或对象。

原理

JSON.stringify本身就可以将JSON格式化，具体的用法是：JSON.stringify(res, null, 2); //res是要JSON化的对象，2是spacing的格式，用于缩进。

操作步骤

1、定义js函数

  function syntaxHighlight(json) {
      if (typeof json != 'string') {
          json = JSON.stringify(json, undefined, 2);
      }
      json = json.replace(/&/g, '&').replace(//g, '>');
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
          function(match) {
              var cls = 'number';
              if (/^"/.test(match)) {
                 if (/:$/.test(match)) {
                     cls = 'key';
                 } else {
                     cls = 'string';
                 }
              } else if (/true|false/.test(match)) {
                 cls = 'boolean';
              } else if (/null/.test(match)) {
                 cls = 'null';
              }
             return '' + match + '';
         }
     );
 }

这个函数的参数json，可以是一个json字符串，也可以是一个对象。如果是一个json字符串，在函数中将不经过JSON.stringify的格式化，也就不能产生缩进的效果，除非字符串本身就含有缩进。因此，尽量给这个函数传递一个对象。
此外，这个函数将一个json对象转化为一段html代码，因此还需要等于相应的css样式。

2、定义css样式

3、定义html内容

在html文件中添加一个pre标签，用于显示格式化的json字符串

然后调用js代码，对该pre标签进行初始化即可

$('#result').html(syntaxHighlight(res));//其中res最好是对象，这样在函数中就可进行缩进等格式化处理。