格式化json数据输出到html中

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

white-space

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列（多个空格合并成一个），但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

pre属性

pre 文档里明确写了 类似<pre>标签。 所以要先弄明白<pre>标签特点：
<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 += "<br/>"
                }
            }
            str += text2;
        }
        jsonStr = "";
        for (var i = 0; i < str.length; i++) {
            var text = str.charAt(i);
            if (rep == text)
                jsonStr += "&nbsp;&nbsp;&nbsp;&nbsp;"
            else {
                jsonStr += text;
            }
            if (i == str.length - 2)
                jsonStr += "<br/>"
        }
        return jsonStr;
    }

效果图