html中显示格式化的json

最新推荐文章于 2024-10-11 09:35:57 发布

小栗栗子

最新推荐文章于 2024-10-11 09:35:57 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端展示文章标签：前端

本文链接：https://blog.youkuaiyun.com/u014715787/article/details/82965092

前端展示专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个用于格式化和高亮显示JSON数据的JavaScript函数。该函数能够将JSON字符串转换为带有语法高亮的HTML，使得JSON数据更易于阅读和理解。支持的数据类型包括字符串、数字、布尔值、null等。

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

function JsonFormat(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        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) {
            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>';
        });
    }

声明转换函数，pre标签中包含转换json对象

<pre>' + JsonFormat(JSON.parse(data[key])) + '</pre>