json formatter(一个检查json格式是否正确的小工具)
2012-05-21 16:30
417 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Collapsible JSON Formatter - view your json code in colors</title>
<meta name="description" content="Collapsible JSON Formatter - view your json code in colors">
<meta name="keywords" content="Json, Printer, Colorer, Format, Color, Collapsible">
<script>
// we need tabs as spaces and not CSS magin-left
// in order to ratain format when coping and pasing the code
window.SINGLE_TAB = " ";
window.ImgCollapsed = "images/Collapsed.gif";
window.ImgExpanded = "images/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(extJson){
SetTab();
window.IsCollapsible = $id("CollapsibleView").checked;
if(!!extJson) extJson = extJson.split("\n").join("\\"+"n");
var json = (!!extJson) ? extJson : $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 is not well formated:\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();
}
</script>
<style>
*{
font-family: Georgia;
}
.Canvas
{
font: 10pt Georgia;
background-color:#ECECEC;
color:#000000;
border:solid 1px #CECECE;
}
.ObjectBrace
{
color:#00AA00;
font-weight:bold;
}
.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:130px;
}
A.OtherToolsLink { color:#555;text-decoration:none; }
A.OtherToolsLink:hover { text-decoration:underline; }
</style>
</head>
<body>
<div id="HeaderTitle"> Quick Json Formatter <span style='color:#aaa;font-weight:bold;font-style:italic'>Online</span> 1.0 Copyright (c) 2008-2009 Vladimir Bodurov <a href="http://blog.bodurov.com/Formatter-and-colorer-of-raw-JSON-code">about this tool</a></div>
<h3 id="HeaderSubTitle">Collapsible JSON Formatter</h3>
<div>Enter your JSON here: <span style='color:#777;font-size:10px'>(Your code will NOT be posted to a server, the program executes on the client)</span></div>
<textarea id="RawJson"> { "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }
],
"musicians": "Eric"，
}</textarea>
<div id="ControlsRow">
<input type="Button" value="Format" onClick="Process()"/>
<span id="TabSizeHolder">
tab size:
<select id="TabSize" onChange="TabSizeChanged()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="true">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" />
Keys in Quotes
</label>
<a href="javascript:void(0);" onClick="SelectAllClicked()">select all</a>
<span id="CollapsibleViewHolder" >
<label for="CollapsibleView">
<input type="checkbox" id="CollapsibleView" onClick="CollapsibleViewClicked()" checked="true" />
Collapsible View
</label>
</span>
<span id="CollapsibleViewDetail">
<a href="javascript:void(0);" onClick="ExpandAllClicked()">expand all</a>
<a href="javascript:void(0);" onClick="CollapseAllClicked()">collapse all</a>
<a href="javascript:void(0);" onClick="CollapseLevel(3)">level 2+</a>
<a href="javascript:void(0);" onClick="CollapseLevel(4)">level 3+</a>
<a href="javascript:void(0);" onClick="CollapseLevel(5)">level 4+</a>
<a href="javascript:void(0);" onClick="CollapseLevel(6)">level 5+</a>
<a href="javascript:void(0);" onClick="CollapseLevel(7)">level 6+</a>
<a href="javascript:void(0);" onClick="CollapseLevel(8)">level 7+</a>
<a href="javascript:void(0);" onClick="CollapseLevel(9)">level 8+</a>
</span>
</div>
<div id="Canvas" class="Canvas"></div>
<form id="InvisibleLink" action="http://www.bodurov.com/JsonFormatter/view.aspx" target="_blank">
<input type="hidden" id="InvisibleLinkUrl" name="json" value="" />
</form>
<div style="font-size:10px;color:grey;text-align:right;margin-top:20px">
<input type="button" value="link to this json" onClick="LinkToJson()" style="color:#777" />
my other tools:
<a href="http://www.bodurov.com/NearestStars/" class="OtherToolsLink">
Nearest Stars</a>
<a href="http://www.bodurov.com/VectorVisualizer/" class="OtherToolsLink">
Vector Visualizer</a>
<!--a href="http://www.bodurov.com/BitmapVectorizer/" class="OtherToolsLink">
Bitmap Vectorizer</a-->
</div>
<script>Process(" { \"programmers\": [ { \"firstName\": \"Brett\", \"lastName\":\"McLaughlin\", \"email\": \"aaaa\" }, { \"firstName\": \"Jason\", \"lastName\":\"Hunter\", \"email\": \"bbbb\" } ], \"authors\": [ { \"firstName\": \"Isaac\", \"lastName\": \"Asimov\", \"genre\": \"science fiction\" } ], \"musicians\": \"Eric\"， }");</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_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('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();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- json formatter(一个检查json格式是否正确的小工具)
- json formatter(一个检查json格式是否正确的小工具)
- js替换全部，js检查输入的日期是否是一个正确的日期格式
- 基于jquery实现即时检查格式是否正确的表单
- 注册界面 用javascript检查输入信息格式是否正确 完整版
- 18. 请写一个函数验证电子邮件的格式是否正确 (2分)
- C# 如何识别一个字符串是否Json格式
- 校验一个字符串是否是合法的JSON格式
- 一个好用的测试服务器接口的工具（post请求，xml,json等数据格式）
- JavaScript 检查一个 JSON 对象中是否对存指这下的 Key
- 判断是否JSON格式，日期，整数和小数的工具类
- php判断json格式是否正确
- 一个非常简洁有效的判断IP地址格式是否正确的函数，c++代码
- C# 如何识别一个字符串是否Json格式
- 写一个验证邮箱格式是否正确的函数
- 如何识别一个字符串是否Json格式
- Java用于校验一个字符串是否是合法的JSON格式
- javascript检查表单格式是否正确
- java判断一个字符串是否是json格式
- java判断一个字符串是否是json格式