zoukankan      html  css  js  c++  java
  • 页面json 格式化+颜色高亮

    背景

    应答为json,为了更好的展示在前端页面,需要对其格式化加颜色高亮

    效果图

    步骤

    js中添加

    function output(inp) {
        document.body.appendChild(document.createElement('pre')).innerHTML = inp;
    }
    
    function syntaxHighlight(json) {
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        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>';
        });
    }
    
    var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
    var str = JSON.stringify(obj, undefined, 4);
    
    output(str);
    output(syntaxHighlight(str));

    css中添加

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

    参考资料

    https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript

  • 相关阅读:
    Mongodb_文件存储
    Mongodb_技巧
    Blend_Effect
    WPF_界面_图片/界面/文字模糊解决之道整理
    ASP.NET Boilerplate 深入系列之:概述
    P1280 尼克的任务
    P1802 5倍经验日
    271. 杨老师的照相排列
    P1726 上白泽慧音
    P1983 [NOIP2013 普及组] 车站分级
  • 原文地址:https://www.cnblogs.com/jwentest/p/7144761.html
Copyright © 2011-2022 走看看