在html页面中展示JSON，JSON.stringify用法

问题描述：

有时候我们需要将json数据直接显示在页面上（比如需要将接口返回的结果直接展示），如果直接显示字符串，不美观也不方便查看。比如：

这时就需要把json格式化一下展示了，格式化成下图的样式就完美啦。

解决方案：

1. 首先使用JSON.stringify将JSON格式化：

   // 返回一个表示给定值的JSON字符串。
   JSON.stringify(value[, replacer [, space]]);
   

   JSON.stringify() 方法将一个 JavaScript 值（对象或者数组）转换为一个 JSON 字符串，如果指定了 replacer 是一个函数，则可以选择性地替换值，或者如果指定了 replacer 是一个数组，则可选择性地仅包含数组指定的属性。

   参数

   • value
     将要序列化成 一个 JSON 字符串的值。
   • replacer（可选）
     如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的
     JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化；关于该参数更详细的解释和示例，请参考使用原生的
     JSON 对象一文。
   • space (可选)
     指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为
     null），将没有空格。

2. 给返回的字符串加上格式化的代码和样式：
   js:

syntaxHighlight(json) {
	    if (typeof json !== 'string') {
	      json = JSON.stringify(json, undefined, 2)
	    } else {
	      json = JSON.stringify(JSON.parse(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) {
	        let cls = 'json-number'
	        if (/^"/.test(match)) {
	          if (/:$/.test(match)) {
	            cls = 'json-key'
	          } else {
	            cls = 'json-string'
	          }
	        } else if (/true|false/.test(match)) {
	          cls = 'json-boolean'
	        } else if (/null/.test(match)) {
	          cls = 'null'
	        }
	        return '<span class="' + cls + '">' + match + '</span>'
	      })
	  }

less:

#format-json {
  pre {
    outline: 1px solid #ccc;
    padding: 5px;
    .json-string {
      color: #c62628;
    }
    .json-number, .json-boolean {
      color: #1f1bcc;
    }
    .json-null {
      color: #818181;
    }
    .json-key {
      color: #861d8f;
    }
  }
}

html:

<div id="format-json">
  <pre [innerHtml]="syntaxHighlight(jsonObj) | safeHtml"></pre>
</div>

其中safeHtml是能够保留显示html的行内style的pipe，看这里SafeHtmlPipe：

最终效果: