JSON格式化JS代码，改变
来源：互联网 发布：甲骨文软件培训 编辑：程序博客网 时间：2024/06/01 07:39
要用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= '<embed type="application/x-silverlight" src="data:," />'; 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();代码块：c.js
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 = "<PRE class='CodeContainer'>"+html+"</PRE>"; }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) ? "<span class='Comma'>,</span> " : ""; var type = typeof obj; var clpsHtml =""; if(IsArray(obj)){ if(obj.length == 0){ html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>"+comma, isPropertyContent); }else{ clpsHtml = window.IsCollapsible ? "<span><img src=\""+window.ImgExpanded+"\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : ""; html += GetRow(indent, "<span class='ArrayBrace'>[</span>"+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 ? "</span>" : ""; html += GetRow(indent, clpsHtml+"<span class='ArrayBrace'>]</span>"+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, "<span class='ObjectBrace'>{ }</span>"+comma, isPropertyContent); }else{ clpsHtml = window.IsCollapsible ? "<span><img src=\""+window.ImgExpanded+"\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : ""; html += GetRow(indent, "<span class='ObjectBrace'>{</span>"+clpsHtml, isPropertyContent); var j = 0; for(var prop in obj){ var quote = window.QuoteKeys ? "\"" : ""; html += GetRow(indent + 1, "<span class='PropertyName'>"+quote+prop+quote+"</span>: "+ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true)); } clpsHtml = window.IsCollapsible ? "</span>" : ""; html += GetRow(indent, clpsHtml+"<span class='ObjectBrace'>}</span>"+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 = "<span class='"+style+"'>"+quote+literal+quote+comma+"</span>"; 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();}代码块：index.htm
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>原生json格式化及高亮</title><meta name="description" content="json,格式化,高亮"><meta name="keywords" content="json,格式化,高亮"><script src="c.js" type="text/javascript"></script><link href="s.css" type="text/css" rel="stylesheet"></link></head><body><div class="HeadersRow"> <div id="HeaderTitle"> JSON格式化及高亮 © 2012 <span style='color:#aaa;font-weight:bold;font-style:italic'>Random_Coder</span> </div> <h3 id="HeaderSubTitle">JSON格式化及高亮:</h3> <textarea id="RawJson"> </textarea></div><div id="ControlsRow"> <input type="Button" value="格式化" onclick="Process()"/> <span id="TabSizeHolder"> 缩进量 <select id="TabSize" onchange="TabSizeChanged()"> <option value="1">1</option> <option value="2" selected="true">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </span> <label for="QuoteKeys"> <input type="checkbox" id="QuoteKeys" onclick="QuoteKeysClicked()" checked="true" /> 引号 </label> <a href="javascript:void(0);" onclick="SelectAllClicked()">全选</a> <span id="CollapsibleViewHolder" > <label for="CollapsibleView"> <input type="checkbox" id="CollapsibleView" onclick="CollapsibleViewClicked()" checked="true" /> 显示控制 </label> </span> <span id="CollapsibleViewDetail"> <a href="javascript:void(0);" onclick="ExpandAllClicked()">展开</a> <a href="javascript:void(0);" onclick="CollapseAllClicked()">叠起</a> <a href="javascript:void(0);" onclick="CollapseLevel(3)">2级</a> <a href="javascript:void(0);" onclick="CollapseLevel(4)">3级</a> <a href="javascript:void(0);" onclick="CollapseLevel(5)">4级</a> <a href="javascript:void(0);" onclick="CollapseLevel(6)">5级</a> <a href="javascript:void(0);" onclick="CollapseLevel(7)">6级</a> <a href="javascript:void(0);" onclick="CollapseLevel(8)">7级</a> <a href="javascript:void(0);" onclick="CollapseLevel(9)">8级</a> </span></div><div id="Canvas" class="Canvas"></div><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript" src="m.js"></script></body></html>
还有两张图片：
Collapsed.gif
Expanded.gif
ajax
$.ajax({dataType:"String",type:'get',url:'json.html',success: function(data){ $("#RawJson").val(data); alert(data)}});- JSON格式化JS代码，改变
- 分享一段JS格式化JSON的代码
- 一段JS格式化JSON的代码
- 格式化JSON的NODE.JS代码片段
- JS~json日期格式化
- JS:Json格式化显示
- js 格式化json串
- JS 格式化 JSON
- js格式化json时间
- json时间格式化(JS)
- json格式化代码;
- json串格式化代码
- js格式化代码工具
- Myeclipse 格式化 js 代码
- HTML/JS 格式化代码
- JS代码格式化
- JS格式化/压缩JSON数据
- js格式化json/xml格式
- ckeditor
- hibernate_Restrictions用法
- 如何向SqlServer的文本字段中写入回车符 换行符 单引号
- Configure Hotspot on MAC
- Record network traffic on Android or IOS with Charlies' Proxy or WireShark
- JSON格式化JS代码，改变
- John W.Backus
- js中有关IE版本检测
- 教你彻底解决Apple ID密码重置问题
- android sdk 下载和更新失败解决方案
- jquery中post方法返回404的解决方案
- 用一种算法来颠倒一个链接表的顺序
- deep learning website
- C 常用到的宏
