• 在html页面中展示JSON


    背景:
    有时候我们需要将json数据直接显示在页面上(比如在做一个接口测试的项目,需要将接口返回的结果直接展示),但是如果直接显示字符串,不方便查看。需要格式化一下。

    解决方案:
    其实JSON.stringify本身就可以将JSON格式化,具体的用法是:

    JSON.stringify(res, null, 2); //res是要JSON化的对象,2是spacing

    如果想要效果更好看,还要加上格式化的代码和样式:

    js代码:

    function syntaxHighlight(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*:)?|(true|false|null)|-?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>';
        });
    }

    样式代码:

    <style>
        pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
        .string { color: green; }
        .number { color: darkorange; }
        .boolean { color: blue; }
        .null { color: magenta; }
        .key { color: red; }
    </style>

    html代码:

    <pre id="result">
    
    </pre>

    调用代码:

    $('#result').html(syntaxHighlight(res));

    效果:

  • 相关阅读:
    Git的安装与配置
    JDBCTemplate
    消费金融大数据风控架构
    架构设计之道
    面向服务架构SOA
    java集合List解析
    web应用安全
    微服务的交互模式
    服务化管理和治理框架的技术选型
    分库分表就能无限扩容么?
  • 原文地址:https://www.cnblogs.com/kaynet/p/6380857.html
Copyright © 2020-2023  润新知