从页面或者后台的角度格式化json或xml报文

3 篇文章 0 订阅

*页面格式化json

<!DOCTYPE html>
<html>
<head>
  <title>测试页</title>
  <style>
    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; word-wrap: break-word; white-space: pre-wrap; width: 100%; height: 100%; overflow: auto;}
    <!-- pre标签要设置长度和高度才能设置滚动条,pre-wrap为自动换行 -->
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }
  </style>
</head>
<body>
<div>
  <pre id="jsonStr1" style="width:50;"></pre> 
  <pre id="jsonStr2"></pre>
  <pre id="jsonStr3"></pre>
</div>
<script type="text/javascript">
  var songResJson={
    "requestHead":{
        "sign":"GM2EUi+hJV6VNi6Hss+eWxHA9YkAZ9FEREKKDIBLYe4XWmqsdc8qQj5La00xno+jZg+DCFoejnZovLiUa3Xs05MHaznTrs4gpLFFl77KZSA9Qdrl3FAMxv2f2lnY1pNVOwSbDENjgyk=",
        "tradeDate":"2017-07-24 10:51:42",
        "tradeType":"car",
        "openID":"dXiao",
        "tradeNo":"5506A722FD41B852E0530100007F6802AAAA",
        "token":"dianxiao"
    },
    "toMobile":"18326113693",
    "xmsContent":"您好!天安电话车险为您报价:交强险保费855元,商业险保费2583.91元,总计3438.91元,含 车损险(保额9.18万)1160.61元, 三者险(保额50万)1061.04元, 无法找到第三方特约险(保额0万)29.01元,不计免赔共333.25元。另代缴车船税300元。最终价格会受您既往理赔情况等因素影响,请以出单为准。如需详询请致电95505转3,尹慧慧(工号792594)为您服务",
    "smsChannel":"04"
  };

  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*:)?|\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>';
    });
  };

  document.getElementById("jsonStr1").innerHTML=JSON.stringify(songResJson,null,2);
  document.getElementById("jsonStr2").innerHTML=JSON.stringify(songResJson,null,4);
  document.getElementById("jsonStr3").innerHTML=syntaxHighlight(songResJson);
</script>
</body>
<html>

*页面格式化xml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js格式化xml的方法</title>
</head>
<body>
<!--格式化后的xml写入的位置-->
<div id="writePlace"></div>
<script>
    //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
    String.prototype.removeLineEnd = function () {
        return this.replace(/(<.+?\s+?)(?:\n\s*?(.+?=".*?"))/g, '$1 $2')
    }
    function formatXml(text) {
        //去掉多余的空格
        text = '\n' + text.replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) {
                    return name + ' ' + props.replace(/\s+(\w+=)/g, " $1");
                }).replace(/>\s*?</g, ">\n<");

        //把注释编码
        text = text.replace(/\n/g, '\r').replace(/<!--(.+?)-->/g, function ($0, text) {
            var ret = '<!--' + escape(text) + '-->';
            //alert(ret);
            return ret;
        }).replace(/\r/g, '\n');

        //调整格式
        var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/mg;
        var nodeStack = [];
        var output = text.replace(rgx, function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
            var isClosed = (isCloseFull1 == '/') || (isCloseFull2 == '/' ) || (isFull1 == '/') || (isFull2 == '/');
            //alert([all,isClosed].join('='));
            var prefix = '';
            if (isBegin == '!') {
                prefix = getPrefix(nodeStack.length);
            }
            else {
                if (isBegin != '/') {
                    prefix = getPrefix(nodeStack.length);
                    if (!isClosed) {
                        nodeStack.push(name);
                    }
                }
                else {
                    nodeStack.pop();
                    prefix = getPrefix(nodeStack.length);
                }

            }
            var ret = '\n' + prefix + all;
            return ret;
        });

        var prefixSpace = -1;
        var outputText = output.substring(1);
        //alert(outputText);

        //把注释还原并解码,调格式
        outputText = outputText.replace(/\n/g, '\r').replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) {
            //alert(['[',prefix,']=',prefix.length].join(''));
            if (prefix.charAt(0) == '\r')
                prefix = prefix.substring(1);
            text = unescape(text).replace(/\r/g, '\n');
            var ret = '\n' + prefix + '<!--' + text.replace(/^\s*/mg, prefix) + '-->';
            //alert(ret);
            return ret;
        });

        return outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n');
    }
    function getPrefix(prefixIndex) {
        var span = '    ';
        var output = [];
        for (var i = 0; i < prefixIndex; ++i) {
            output.push(span);
        }

        return output.join('');
    }

    //引用示例部分
    //(1)创建xml格式或者从后台拿到对应的xml格式
    var originalXml = '<?xml version="1.0"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Dont forget me this weekend!</body> </note>';
    //(2)调用formatXml函数,将xml格式进行格式化
    var resultXml = formatXml(originalXml);
    //(3)将格式化好后的formatXml写入页面中
    document.getElementById("writePlace").innerHTML = "<xmp>"+resultXml+"</xmp>";
</script>
</body>
</html>

*后台格式化json

package com.tools;

/**
 * 格式化输入工具类
 * 
 * @author lizhgb
 * @date 2015-10-14
 * @Modified 2017-04-28
 * 
 */
public final class FormatUtil {

    /**
     * 打印输入到控制台
     * 
     * @param jsonStr
     * @author lizhgb
     * @Date 2015-10-14 下午1:17:22
     */
    public static void printJson(String jsonStr) {
        System.out.println(formatJson(jsonStr));
    }

    /**
     * 格式化
     * 
     * @param jsonStr
     * @return
     * @author lizhgb
     * @Date 2015-10-14 下午1:17:35
     * @Modified 2017-04-28 下午8:55:35
     */
    public static String formatJson(String jsonStr) {
        if (null == jsonStr || "".equals(jsonStr))
            return "";
        StringBuilder sb = new StringBuilder();
        char last = '\0';
        char current = '\0';
        int indent = 0;
        boolean isInQuotationMarks = false;
        for (int i = 0; i < jsonStr.length(); i++) {
            last = current;
            current = jsonStr.charAt(i);
            switch (current) {
            case '"':
                                if (last != '\\'){
                    isInQuotationMarks = !isInQuotationMarks;
                                }
                sb.append(current);
                break;
            case '{':
            case '[':
                sb.append(current);
                if (!isInQuotationMarks) {
                    sb.append("<br>");
                    indent++;
                    addIndentBlank(sb, indent);
                }
                break;
            case '}':
            case ']':
                if (!isInQuotationMarks) {
                    sb.append("<br>");
                    indent--;
                    addIndentBlank(sb, indent);
                }
                sb.append(current);
                break;
            case ',':
                sb.append(current);
                if (last != '\\' && !isInQuotationMarks) {
                    sb.append("<br>");
                    addIndentBlank(sb, indent);
                }
                break;
            default:
                sb.append(current);
            }
        }

        return sb.toString();
    }

    /**
     * 添加space
     * 
     * @param sb
     * @param indent
     * @author lizhgb
     * @Date 2015-10-14 上午10:38:04
     */
    private static void addIndentBlank(StringBuilder sb, int indent) {
        for (int i = 0; i < indent; i++) {
            sb.append("&nbsp;&nbsp;&nbsp;&nbsp;");
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值