格式化json数据输出到html中

最近在整理公司的hybrid协议和demo，其中有一个代码展示，因为是直接把在js部分的代码通过vue填到了html中，所以格式全变了，然后就开始尝试 格式化json，写了很多方法，也百度了很多，那些方法使用document.write()输出就是想要的格式，但一使用vue的filter返回就不管用，最后偶然发现了一个超级nb的属性：white-space: pre-wrap;

white-space

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

标签。
 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。
 pre-wrap 保留空白符序列，但是正常地进行换行。
 pre-line 合并空白符序列（多个空格合并成一个），但是保留换行符。
 inherit 规定应该从父元素继承 white-space 属性的值。
 
 
pre属性
 
 
 
pre 文档里明确写了 类似
标签。 所以要先弄明白
标签特点：
 
元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体,
 标签来显示非常规的格式化内容，或者某类计算机代码
 
 
 
 
所以加了pre属性的html元素里的空白会被保留，而pre-wrap会保留空格并正常换行。
 
 
下面是效果图
 
 
这是一开始未被格式化的代码
 
 这是格式化后的代码
 
 但这个方法也不是特别完美的，有时候对解析的不是特别准确，格式还是会有偏差，但总比全部代码连在一起要好看很多，所以如果大家有更好的办法还请在评论里发出来，好东西大家一起分享哈哈~
 
 
下面把使用js转换格式能正常在html中输出的代码也贴上来
 
 

 function trun() {var jsonStr = {"pay_info": "","good_id": 56,"good_type": 1,"pay_source": 2};// json字符串// 格式化json字符串var jsonFormat = formatJson(jsonStr);document.write(jsonFormat)// 工具方法}
 var formatJson = function(msg) {var rep = "~";var jsonStr = JSON.stringify(msg, null, rep)var str = "";for (var i = 0; i < jsonStr.length; i++) {var text2 = jsonStr.charAt(i)if (i > 1) {var text = jsonStr.charAt(i - 1)if (rep != text && rep == text2) {str += "
"}}str += text2;}jsonStr = "";for (var i = 0; i < str.length; i++) {var text = str.charAt(i);if (rep == text)jsonStr += "    "else {jsonStr += text;}if (i == str.length - 2)jsonStr += "
"}return jsonStr;}
 
 
 
效果图