前提条件

从后台获得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, '<').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 '<span class="' + cls + '">' + match + '</span>';
         }
     );
 }

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

2、定义css样式

 <style>
     pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
     .string { color: green; }        /*字符串的样式*/
     .number { color: darkorange; }    /*数字的样式*/
     .boolean { color: blue; }        /*布尔型数据的样式*/
     .null { color: magenta; }        /*null值的样式*/
     .key { color: red; }            /*key值的样式*/
 </style>

3、定义html内容

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

<pre id="result"></pre>

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

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