前端 JSON 数据格式化展示

最新推荐文章于 2024-08-08 07:00:00 发布

hero_th

最新推荐文章于 2024-08-08 07:00:00 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： json html

本文链接：https://blog.csdn.net/weixin_45774972/article/details/120225589

版权

前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

效果预览
在这里插入图片描述

Method One

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>json数据格式化</title>
    <style>
        #jsonTextarea {
            float: left;
            margin-right: 20px;
            width: 40%;
            height: 70vh;
            outline: none;
            padding: 5px;
        }
        
    </style>
</head>

<body>
    <textarea id="jsonTextarea" readonly></textarea>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- <script src="./jquery-3.4.1.min.js"></script> -->
<script>
    var data = '[{"name":"黑子","sex":"男","Age":25,"hobby":["篮球","跑步","看电影","王者荣耀"],"normal":true},{"name":"张三","sex":"男","Age":25,"hobby":["上天","入地"],"normal":false}]';
    // 方法1：textarea + JSON.stringify
    function parse1(str) {
        return JSON.stringify(JSON.parse(str), null, "\t");
    }
    $('#jsonTextarea').text(parse1(data));
</script>

</html>

Method Two

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>json数据格式化</title>
    <style>
        /* 方法2：自定义高亮样式 */
        
        #jsonPre {
            float: left;
            width: 40%;
            height: 70vh;
            outline: 1px solid #ccc;
            padding: 5px;
            overflow: scroll;
        }
        
        .string {
            color: green;
        }
        
        .number {
            color: darkorange;
        }
        
        .boolean {
            color: blue;
        }
        
        .null {
            color: magenta;
        }
        
        .key {
            color: red;
        }
    </style>
</head>

<body>
    <pre id="jsonPre"></pre>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- <script src="./jquery-3.4.1.min.js"></script> -->
<script>
    var data = '[{"name":"黑子","sex":"男","Age":25,"hobby":["篮球","跑步","看电影","王者荣耀"],"normal":true},{"name":"张三","sex":"男","Age":25,"hobby":["上天","入地"],"normal":false}]';
    // 方法2：pre + JSON.stringify
    function parse2(str) {
        // 设置缩进为2个空格
        str = JSON.stringify(JSON.parse(str), null, 2);
        str = str
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
        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>';
        });
    }
    $('#jsonPre').html(parse2(data));
</script>

</html>