html怎样格式化输出JSON数据-html教程-PHP中文网

html怎样格式化输出JSON数据

php中世界最好的语言

发布： 2018-01-16 09:46:34

原创

3907人浏览过

这次给大家带来html怎样格式化输出json数据，html格式化输出json数据的注意事项有哪些，下面就是实战案例，一起来看一下。

将 json 数据以美观的缩进格式显示出来，借助最简单的 JSON.stringify 函数就可以了，因为此函数还有不常用的后面2个参数。

<html>
    <head>
        <meta charset="utf-8" />
        <title>hello</title>
        <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>
        <script type="text/javascript">
        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>';
            });
        }
    </script>
    </head>
    <body>
    <pre id="result">

登录后复制

以上就是html怎样格式化输出JSON数据的详细内容，更多请关注php中文网其它相关文章！