*頁面格式化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(" ");
}
}
}
