前端如何优雅地显示 JSON

最新推荐文章于 2025-05-17 10:15:00 发布

Young.Chen

最新推荐文章于 2025-05-17 10:15:00 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： FrontEnd 文章标签： html json

本文链接：https://blog.youkuaiyun.com/chen_kkw/article/details/86737745

FrontEnd 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在前端界面中，如同json.cn网站一样，优雅地格式化并显示JSON字符串。通过调整CSS样式和使用JS处理，可以达到理想的效果，提供一种简单的JSON数据可视化方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

json.cn 是我们开发过程中，经常用来格式化显示 JSON 字符串的工具网址，那么如何在自己编写的前端界面显示同样风格的、格式化之后 JSON 字符串呢？

网上流传的版本显示出来效果并不尽如人意，因此小改了一下。

代码如下

<pre>{{syntaxHighlight(data)}}</pre>

CSS

pre {padding: 5px; margin: 5px; }
    .string { color: #3ab54a; font-weight: bold;}
    .number { color: #25aae2; font-weight: bold;}
    .boolean { color: #f98280; font-weight: bold;}
    .null { color: magenta; font-weight: bold;}
    .key { color: #92278f;font-weight: bold; }

JS

syntaxHighlight(json) {
                if (typeof json !== 'string') {
                    json = JSON.stringify(json, undefined, 4);
                }
                json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
                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 = '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';
                    }
                    if(cls == 'key') {
                        return '<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="' + cls + '">' + match + '&nbsp;</span>';
                    } else {
                        return '<span class="' + cls + '">' + match + '</span>';
                    }
                }).replace("}", "<br>}");
            },

参考资料

简单一招实现json数据可视化