后端返回JSON数据，前端格式化展示

最新推荐文章于 2025-03-26 09:31:28 发布

月语晨风

最新推荐文章于 2025-03-26 09:31:28 发布

阅读量789

点赞数 2

分类专栏：前端基础文章标签： json 前端 javascript 正则表达式

本文链接：https://blog.youkuaiyun.com/machaowo/article/details/145212325

版权

前端基础专栏收录该内容

11 篇文章

订阅专栏

一、通过正则表达式，前端自动展示json数据并设置高亮

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 和 CSS 基础知识</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        code {
            /* white-space：pre 字符串中的空格在网页中显示也展示空格，不会忽略掉 */
            white-space: pre; 
            font-family: monospace;
           
        }
        .string {
            color: maroon;
        }
        .number {
            color: red;
            
        }
        .boolean,.null{
            color: blue;
        }
        .key {
            color: teal;
        }
    </style>
</head>
<body>
    <code></code>
</body>

<script >
    function testHighlight(json){ 
        if(typeof json !="string"){
            json =JSON.stringify(json,null,"\t");
        }
        json = json
        .replace(/&/g,"&amp;")
        .replace(/</g,"&lt;")
        .replace(/>/g,"&gt;");

        
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][\+\-]?\d+)?)/g,
            // 正则表达式 /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g， [+\-] 可以写成[\+\-]
            //1、 "(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?
            //2、 \b(true|false|null)\b
            //3、 -?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?

            function(match){
                var cls ="number";
                if(/^"/.test(match)){
                    if(/:$/.test(match)){
                        cls ="key";
                    }else {
                        cls ="string";
                    }
                } else if(/truel|false/.test(match)){
                    cls ="boolean";
                }else if(/null/.test(match)){
                    cls ="null";
                }
                return'<span class="'+ cls +'">'+ match +"</span>";
            }
        )
    }   

    var person = {
        "code": 200,
        "message": "success",
        "data": {
        "nickname": "月语晨风",
            "avatarUrl": "https://profile-avatar.csdnimg.cn/992ef6db4691456284818db906e37eb9_machaowo.jpg!1",
            "username": "machaowo",
            "vip": false,
            "endTime": null,
            "permissionName": null,
            "permissionNames": [],
            "freeFlowRate": 2.0,
            "freeFlowRateTotal": 2.0,
            "vipFlowRate": 0.0,
            "vipFlowRateTotal": 0.0,
            "component": "<div>测试用例</div>" 
        }
    }
    console.log(999999,testHighlight(person));
    document.getElementsByTagName("code")[0].innerHTML = testHighlight(person);
</script>

网页展示：

打印日志数据：

999999 '{\n\t<span class="key">"code":</span> <span class="number">200</span>,\n\t<span class="key">"message":</span> <span class="string">"success"</span>,\n\t<span class="key">"data":</span> {\n\t\t<span class="key">"nickname":</span> <span class="string">"月语晨风"</span>,\n\t\t<span class="key">"avatarUrl":</span> <span class="string">"https://profile-avatar.csdnimg.cn/992ef6db4691456284818db906e37eb9_machaowo.jpg!1"</span>,\n\t\t<span class="key">"username":</span> <span class="string">"machaowo"</span>,\n\t\t<span class="key">"vip":</span> <span class="boolean">false</span>,\n\t\t<span class="key">"endTime":</span> <span class="null">null</span>,\n\t\t<span class="key">"permissionName":</span> <span class="null">null</span>,\n\t\t<span class="key">"permissionNames":</span> [],\n\t\t<span class="key">"freeFlowRate":</span> <span class="number">2</span>,\n\t\t<span class="key">"freeFlowRateTotal":</span> <span class="number">2</span>,\n\t\t<span class="key">"vipFlowRate":</span> <span class="number">0</span>,\n\t\t<span class="key">"vipFlowRateTotal":</span> <span class="number">0</span>,\n\t\t<span class="key">"component":</span> <span class="string">"&lt;div&gt;测试用例&lt;/div&gt;"</span>\n\t}\n}'