要用JSON格式化工具,最强大的是http://json.parser.online.fr/,但是人家只让线上用。
其他的JSON格式化代码还是很多的,就是没人家强大,所以弄个代码,好好改了改。
把原作者的贴上:http://download.csdn.net/detail/wolf_410/5927367
把下面这些放到一个文件夹里就OK了,剩下的会慢慢改成和json.parser.online.fr一样的,但是需要时间,慢慢更新。
代码块:s.css
@charset "utf-8";
/* CSS Document */
div.ControlsRow, div.HeadersRow {
font-family: Consolas;
}
.CodeContainer span
{
line-height: 17px;
font-size: 11px;
font-family: Consolas;
}
div.Canvas
{
font-family: Lucida Console, Georgia;
font-size: 13px;
background-color:#ECECEC;
color:#000000;
border:solid 1px #CECECE;
}
.ObjectBrace
{
color:#00AA00;
font-weight:bold;
}
.String:before
{
content: "string";
background-color: #4E9A06;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
font-weight: bold;
margin: 0 2px;
opacity: 0.4;
padding: 1px 5px;
word-wrap: normal;
}
.ObjectBrace:before
{
content: "object";
background-color: #729FCF;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
font-weight: bold;
margin: 0 2px;
opacity: 0.4;
padding: 1px 5px;
word-wrap: normal;
}
.Number:before
{
content: "Number";
background-color: #AD7FA8;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
font-weight: bold;
margin: 0 2px;
opacity: 0.4;
padding: 1px 5px;
word-wrap: normal;
}
.ArrayBrace:before
{
content: "Array";
background-color: #A40000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
font-weight: bold;
margin: 0 2px;
opacity: 0.4;
padding: 1px 5px;
word-wrap: normal;
}
.Boolean:before
{
content: "Boolean";
background-color: #C4A000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
font-weight: bold;
margin: 0 2px;
opacity: 0.4;
padding: 1px 5px;
word-wrap: normal;
}
.ArrayBrace
{
color:#0033FF;
font-weight:bold;
}
.PropertyName
{
color:#CC0000;
font-weight:bold;
}
.String
{
color:#007777;
}
.Number
{
color:#AA00AA;
}
.Boolean
{
color:#0000FF;
}
.Function
{
color:#AA6633;
text-decoration:italic;
}
.Null
{
color:#0000FF;
}
.Comma
{
color:#000000;
font-weight:bold;
}
PRE.CodeContainer
{
margin-top:0px;
margin-bottom:0px;
}
PRE.CodeContainer img
{
cursor:pointer;
border:none;
margin-bottom:-1px;
}
#CollapsibleViewDetail a
{
padding-left:10px;
}
#ControlsRow
{
white-space:nowrap;
font: 11px Georgia;
}
#TabSizeHolder
{
padding-left:10px;
padding-right:10px;
}
#HeaderTitle
{
text-align:right;
font-size:11px;
}
#HeaderSubTitle
{
margin-bottom:2px;
margin-top:0px
}
#RawJson
{
width:99%;
height:120px;
}
A.OtherToolsLink
{
color:#555;
text-decoration:none;
}
A.OtherToolsLink:hover
{
text-decoration:underline;
}
代码块:m.js
_uacct = "UA-2223138-1";
urchinTracker();
function onLoad() {
var version = getSilverlightVersion();
if (version) { __utmSetVar(version); }
}
function getSilverlightVersion() {
var version = 'No Silverlight';
var container = null;
try {
var control = null;
if (window.ActiveXObject) {
control = new ActiveXObject('AgControl.AgControl');
}
else {
if (navigator.plugins['Silverlight Plug-In']) {
container = document.createElement('div');
document.body.appendChild(container);
container.innerHTML= '';
control = container.childNodes[0];
}
}
if (control) {
if (control.isVersionSupported('5.0')) { version = 'Silverlight/5.0'; }
else if (control.isVersionSupported('4.0')) { version = 'Silverlight/4.0'; }
else if (control.isVersionSupported('3.0')) { version = 'Silverlight/3.0'; }
else if (control.isVersionSupported('2.0')) { version = 'Silverlight/2.0'; }
else if (control.isVersionSupported('1.0')) { version = 'Silverlight/1.0'; }
}
}
catch (e) { }
if (container) {
document.body.removeChild(container);
}
return version;
}
onLoad();
window.SINGLE_TAB = " ";
window.ImgCollapsed = "Collapsed.gif";
window.ImgExpanded = "Expanded.gif";
window.QuoteKeys = true;
function $id(id){ return document.getElementById(id); }
function IsArray(obj) {
return obj &&
typeof obj === 'object' &&
typeof obj.length === 'number' &&
!(obj.propertyIsEnumerable('length'));
}
function Process(){
SetTab();
window.IsCollapsible = $id("CollapsibleView").checked;
var json = $id("RawJson").value;
var html = "";
try{
if(json == "") json = "\"\"";
var obj = eval("["+json+"]");
html = ProcessObject(obj[0], 0, false, false, false);
$id("Canvas").innerHTML = ""+html+"
";
}catch(e){
alert("JSON数据格式不正确:\n"+e.message);
$id("Canvas").innerHTML = "";
}
}
window._dateObj = new Date();
window._regexpObj = new RegExp();
function ProcessObject(obj, indent, addComma, isArray, isPropertyContent){
var html = "";
var comma = (addComma) ? ", " : "";
var type = typeof obj;
var clpsHtml ="";
if(IsArray(obj)){
if(obj.length == 0){
html += GetRow(indent, "[ ]"+comma, isPropertyContent);
}else{
clpsHtml = window.IsCollapsible ? "" : "";
html += GetRow(indent, "["+clpsHtml, isPropertyContent);
for(var i = 0; i < obj.length; i++){
html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
}
clpsHtml = window.IsCollapsible ? "" : "";
html += GetRow(indent, clpsHtml+"]"+comma);
}
}else if(type == 'object'){
if (obj == null){
html += FormatLiteral("null", "", comma, indent, isArray, "Null");
}else if (obj.constructor == window._dateObj.constructor) {
html += FormatLiteral("new Date(" + obj.getTime() + ") /*" + obj.toLocaleString()+"*/", "", comma, indent, isArray, "Date");
}else if (obj.constructor == window._regexpObj.constructor) {
html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
}else{
var numProps = 0;
for(var prop in obj) numProps++;
if(numProps == 0){
html += GetRow(indent, "{ }"+comma, isPropertyContent);
}else{
clpsHtml = window.IsCollapsible ? "" : "";
html += GetRow(indent, "{"+clpsHtml, isPropertyContent);
var j = 0;
for(var prop in obj){
var quote = window.QuoteKeys ? "\"" : "";
html += GetRow(indent + 1, ""+quote+prop+quote+": "+ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true));
}
clpsHtml = window.IsCollapsible ? "" : "";
html += GetRow(indent, clpsHtml+"}"+comma);
}
}
}else if(type == 'number'){
html += FormatLiteral(obj, "", comma, indent, isArray, "Number");
}else if(type == 'boolean'){
html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean");
}else if(type == 'function'){
if (obj.constructor == window._regexpObj.constructor) {
html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
}else{
obj = FormatFunction(indent, obj);
html += FormatLiteral(obj, "", comma, indent, isArray, "Function");
}
}else if(type == 'undefined'){
html += FormatLiteral("undefined", "", comma, indent, isArray, "Null");
}else{
html += FormatLiteral(obj.toString().split("\\").join("\\\\").split('"').join('\\"'), "\"", comma, indent, isArray, "String");
}
return html;
}
function FormatLiteral(literal, quote, comma, indent, isArray, style){
if(typeof literal == 'string')
literal = literal.split("<").join("<").split(">").join(">");
var str = ""+quote+literal+quote+comma+"";
if(isArray) str = GetRow(indent, str);
return str;
}
function FormatFunction(indent, obj){
var tabs = "";
for(var i = 0; i < indent; i++) tabs += window.TAB;
var funcStrArray = obj.toString().split("\n");
var str = "";
for(var i = 0; i < funcStrArray.length; i++){
str += ((i==0)?"":tabs) + funcStrArray[i] + "\n";
}
return str;
}
function GetRow(indent, data, isPropertyContent){
var tabs = "";
for(var i = 0; i < indent && !isPropertyContent; i++) tabs += window.TAB;
if(data != null && data.length > 0 && data.charAt(data.length-1) != "\n")
data = data+"\n";
return tabs+data;
}
function CollapsibleViewClicked(){
$id("CollapsibleViewDetail").style.visibility = $id("CollapsibleView").checked ? "visible" : "hidden";
Process();
}
function QuoteKeysClicked(){
window.QuoteKeys = $id("QuoteKeys").checked;
Process();
}
function CollapseAllClicked(){
EnsureIsPopulated();
TraverseChildren($id("Canvas"), function(element){
if(element.className == 'collapsible'){
MakeContentVisible(element, false);
}
}, 0);
}
function ExpandAllClicked(){
EnsureIsPopulated();
TraverseChildren($id("Canvas"), function(element){
if(element.className == 'collapsible'){
MakeContentVisible(element, true);
}
}, 0);
}
function MakeContentVisible(element, visible){
var img = element.previousSibling.firstChild;
if(!!img.tagName && img.tagName.toLowerCase() == "img"){
element.style.display = visible ? 'inline' : 'none';
element.previousSibling.firstChild.src = visible ? window.ImgExpanded : window.ImgCollapsed;
}
}
function TraverseChildren(element, func, depth){
for(var i = 0; i < element.childNodes.length; i++){
TraverseChildren(element.childNodes[i], func, depth + 1);
}
func(element, depth);
}
function ExpImgClicked(img){
var container = img.parentNode.nextSibling;
if(!container) return;
var disp = "none";
var src = window.ImgCollapsed;
if(container.style.display == "none"){
disp = "inline";
src = window.ImgExpanded;
}
container.style.display = disp;
img.src = src;
}
function CollapseLevel(level){
EnsureIsPopulated();
TraverseChildren($id("Canvas"), function(element, depth){
if(element.className == 'collapsible'){
if(depth >= level){
MakeContentVisible(element, false);
}else{
MakeContentVisible(element, true);
}
}
}, 0);
}
function TabSizeChanged(){
Process();
}
function SetTab(){
var select = $id("TabSize");
window.TAB = MultiplyString(parseInt(select.options[select.selectedIndex].value), window.SINGLE_TAB);
}
function EnsureIsPopulated(){
if(!$id("Canvas").innerHTML && !!$id("RawJson").value) Process();
}
function MultiplyString(num, str){
var sb =[];
for(var i = 0; i < num; i++){
sb.push(str);
}
return sb.join("");
}
function SelectAllClicked(){
if(!!document.selection && !!document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
if(sel.removeAllRanges) {
window.getSelection().removeAllRanges();
}
}
var range =
(!!document.body && !!document.body.createTextRange)
? document.body.createTextRange()
: document.createRange();
if(!!range.selectNode)
range.selectNode($id("Canvas"));
else if(range.moveToElementText)
range.moveToElementText($id("Canvas"));
if(!!range.select)
range.select($id("Canvas"));
else
window.getSelection().addRange(range);
}
function LinkToJson(){
var val = $id("RawJson").value;
val = escape(val.split('/n').join(' ').split('/r').join(' '));
$id("InvisibleLinkUrl").value = val;
$id("InvisibleLink").submit();
}
原生json格式化及高亮
JSON格式化及高亮 © 2012 Random_Coder
JSON格式化及高亮:
还有两张图片:
Collapsed.gif
Expanded.gif
ajax
$.ajax({
dataType:"String",
type:'get',
url:'json.html',
success: function(data){
$("#RawJson").val(data);
alert(data)
}
});