前端Div容器显示美化后的JSON字符串

代码：prettyFormat

function prettyFormat(str) {
    try {
        // 设置缩进为2个空格
        str = JSON.stringify(JSON.parse(str), null, 2);
        str = str
            .replace(/&/g, '&')
            .replace(/</g, '<')
            .replace(/>/g, '>');
        return str.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>';
        });
    } catch (e) {
        alert("异常信息:" + e);
    }
}

　　

 

使用方法：

$("#containerSvrRunInfo").html("<pre>" + prettyFormat(json.tacker_json) + "</pre>");


<html>
<head>

<script src="jquery-1.10.2.min.js"></script>


</head>

<body>

<div id="showx"></div>

<script>

//json格式美化
function prettyFormat(str) {
    try {
        // 设置缩进为2个空格
        str = JSON.stringify(JSON.parse(str), null, 2);
        str = str
            .replace(/&/g, '&')
            .replace(/</g, '<')
            .replace(/>/g, '>');
        return str.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>';
        });
    } catch (e) {
        alert("异常信息:" + e);
    }
}


var data="json字符串";


$("#showx").html("<pre>" + prettyFormat(data) + "</pre>");
 

</script>

</body>


</html>

　　

参考：https://www.cnblogs.com/youcong/p/13282716.html 

posted @ 2023-02-06 14:53  liskov_design  阅读(124)  评论(0)    收藏  举报