JS页面显示JSON格式化数据

1.新建html

<div class="col-sm-10 healthName" id="msg" style="height: 550px;overflow-x: auto;overflow-y: auto">
   <pre id="data_info"></pre>
</div>

2.js声明

var show = document.getElementById('data_info');
var msg = "[{"actName":"02","actNameCh":"申请提交","busiType":"50","entName":"名称","notNO":"","opDate":1.633743261E12,"opOrgan":"220101","opType":"04","opTypeCh":"已提交申请","uniAppNo":"224d7d194d2c6646288653857a86fa3191","uniSCID":"2201012002680","uploadNodeNum":"220000","uploadTime":1.633758241323E12}]";
var jsondata = {};
jsondata = JSON.parse(msg);
show.innerHTML = pretifyJson(jsondata,true);

3.定义方法

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

4.Style

 #data_info{
     width: 100%;
     font-size: 16px;
     white-space: pre-wrap;
     word-wrap: break-word;
     background-color: white;
     border:0px;
 }
 .string { color: green; }
 .number { color: darkorange; }
 .boolean { color: blue; }
 .null { color: magenta; }
 .key { color: red; }

5.页面展示