51js 的json编辑器。JSON 编辑器实现代码。

无论忧JSON编辑器【辅助工具】

世家可输入或者贴一些JSON数据来校验是否正确。
按Tab键自动全文缩进格式化。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <html
xmlns=”http://www.w3.org/1999/xhtml"&gt; <head> <base
href=”http://imgqun.qq.com/cgi-bin/"&gt; <title> ldh_JSON_Editor
</title> <style> body,html{
margin:0px;padding:10px;overflow:hidden;font-size:12px;
background:#FFCC66
url(img?uuid=20b6767c202cdabf6049e98539e8df0de6);color:#333;font-family:tahoma;
}
.title{font-size:14px;background:url(img?uuid=2069cf3fd1e53a2bb365f771eac65b50a2)
no-repeat;padding-left:30px;} #ldh_ui_window{
width:840px;height:520px; position:absolute; background:#fff
url(img?uuid=209ef12ed3496ca2e94cf1a8041de28cc2) repeat-x 0 32px;
border:2px solid #4A84C4;border-top:none; left:50%;margin-left:-420px;
top:50%;margin-top:-260px; } #ldh_ui_caption{
height:32px;line-height:32px;text-indent:1em;
background:url(img?uuid=203fe9e79d8933c63af9866344a990e5ee) repeat-x;
text-align:center; } #ldh_ui_body_left{
width:300px;height:450px;overflow:auto;
position:absolute;left:10px;top:55px; border:1px solid #4A84C4; }
#editWindow{width:500px;position:absolute;left:325px;top:55px;
border:1px solid #4A84C4;}
#tree_cap{height:18px;line-height:18px;text-align:center;background:url(img?uuid=203fe9e79d8933c63af9866344a990e5ee)
repeat-x;} /* toolbar */ #subToolbar{
height:29px;background:url(img?uuid=2089a60bdc587e2b2b895c3cb32608c06f)
repeat-x 50% 50%;line-height:29px;
position:relative;width:100%;text-indent:10px; } #subToolbar a{
color:#000;background:url(img?uuid=2023acf6c478a05549e3cdf0de3696ca7d)
no-repeat 0% 50%; padding-left:20px;text-decoration:none; } #subToolbar
span{position:absolute; right:10px;bottom:4px;} #subToolbar
a:hover{color:#fff;background-image:url(format.gif);text-decoration:underline;}
#subToolbar
a#save_as{background-image:url(img?uuid=2083fbd06db4030248c60ab536af05def2);
} #subToolbar
a#format_indent{background-image:url(img?uuid=2060be6af87eae7a41f7de458b271cdfdc);
} #subToolbar
a#update{background-image:url(img?uuid=209d82f0afde195855dca5a2b516fdcc11);
} #subToolbar
a#format_compress{background-image:url(img?uuid=20e66dfd444ae20969e4bfcc0d33809850);
} #subToolbar
a#clear_txt{background-image:url(img?uuid=2069999c20b5d5f9fa36439831690cbea1);
} /* end */ #json_eidit{ width:497px;
border:none;margin:0px;color:#000; height:340px;font-size:14px; }
.json_editInfo{ line-height:160%; border:1px solid #4A84C4;
width:483px;+width:500px; height:65px; color:#003300;
position:absolute;left:325px;bottom:12px; } #json_editInfo{
height:48px; padding-left:60px;padding-top:10px;
background:url(img?uuid=2097679a52658b38bc858e8274a2293451) no-repeat
28px 12px; } #json_editInfo b{color:red} #ldh_ui_window
.err{color:red;background-image:url(img?uuid=20bded9fd31a0fea0465715c35f1d59c45);}
#ldh_ui_window
.busy{color:#333;background-image:url(img?uuid=20c121f445de7a8874541ef58b4147c0e4);}
#ldh_ui_window
.info{color:#006600;background-image:url(img?uuid=20775d53781369b7d2a02b6faeb1693a5c);}
#json_editInfo input{width:50px;border:1px solid
#4A84C4;height:14px;} #json_editInfo button{
background:url(img?uuid=200913d75fd547b62c50e13d8884bc1d98) no-repeat;
width:70px;height:20px;line-height:20px;text-align:center;
border:none;color:#114060;letter-spacing:5px;margin-left:10px; } /*
for tree */ img,input,select{vertical-align:middle} #ldh_ui_window
#tree{white-space:nowrap;font-size:12px;line-height:24px;} #tree
a{text-decoration:none;color:#333;} #tree a:hover,#tree
a.hot{color:#000;background:#0B92FF;}
dd,dl,dt{padding:0;margin:0;border:none;font-size:12px;} dt
img{vertical-align:middle;} dt{height:20px;white-space:nowrap;}
</style> </head> <body> <div
id=”ldh_ui_window”> <div id=”ldh_ui_caption”><strong
class=”title”>JSON-Editor</strong></div> <div
id=”ldh_ui_body_left”> <div
id=”tree_cap”>树视图</div> <div id=”tree”></div>
</div> <div id=”editWindow”> <div id=”subToolbar”>
<a href=”javascript:void(0)” title=””
id=”format_indent”>缩进</a> | <a href=”javascript:void(0)”
title=”” id=”format_compress”>紧凑</a> | <a
href=”javascript:void(0)” title=”” id=”update”>刷新视图</a> |
<a href=”javascript:void(0)” title=””
id=”clear_txt”>清空</a> | <a href=”javascript:void(0)”
title=”” id=”save_as”>另存为</a> <span> <label
for=”autoUpdate”><input type=”checkbox” id=”autoUpdate” checked
/> 同步更新树视图</label> </span> </div> <div
id=”edit”> <textarea id=”json_eidit”
>[{“中国食谱”:[“上海醉蟹”,”北京鼎烧鸡”,”川式凉拌豇豆”,”清真酱牛肉”],”国外食谱”:[“泰式柠檬肉片”,”鸡柳汉堡”,”蒸桂鱼卷
“],”更多”:{“中式”:[“南”,”北”,{“地方”:[“小吃”,”大餐”]},”更多选”]}},{“菜谱分类”:[“上海菜”,”贵州菜”,”潮汕菜”,”云南菜”,”东北菜”,”安徽菜”,”广东菜”,”浙江菜”,”湖南菜”]},”其它”]</textarea>
</div> </div> <fieldset class=”json_editInfo”>
<legend>系统信息</legend> <div id=”json_editInfo”
class=”busy”>正在加载图片,请稍候…</div> </fieldset>
</div> </body> <script> /* main Object */ JE={
data:{},/* 关联数据 */ code:false,/* 格式化后的代码 */
oldCode:[],/* 历史代码 */ editUI:null,/* 关联编辑框 */
msgUI:null,/* 信息显示窗口 */ treeUI:null,/* 树窗口 */ name:’JE’,/*
实例名 */ root:'<b>JSON无忧</b>’,/* 根节点标题 */
checkbox:0,/* 是否添加复框 */ hot:null,/* 选中节点 */ indent:’
‘,/*缩进符’\t’或者4个’ ‘*/ firstUp:true,/*率先软机关刷新*/
onclick:Array,/*养点击通知*/ countInfo:”,/*统计信息*/
formating:false,/* 格式化中(禁止重构树) */ ico:{/* 树图标 */
//文件夹结构线 r0:’img?uuid=20166b3094daba4bc6e18817b8301b093a’,
r0c:’img?uuid=208018827ed877e31810e838d33e4ac2b0′,
r1:’img?uuid=2094c793496278bde84be80bb6cb2117f5′,
r1c:’img?uuid=205f2329c537dcfd32b5f33bf642f76fa6′,
r2:’img?uuid=20af62be7c197cae64d3e533f7aaf28c25′,
r2c:’img?uuid=20a005983863e5bc8544cecd8b7f82fcdb’, //前缝图片
nl:’img?uuid=20f508bdc9bb8d98f4529e0fa2475b91bb’,
vl:’img?uuid=20d5de63f4e6927bbb23c377bd1073d26f’, //文件结构线
f1:’img?uuid=202ccc639afd44130a3946e9837672479c’,
f2:’img?uuid=20900ceb0053a2f7bd07a22337c4e4c72c’,
root:’img?uuid=2069cf3fd1e53a2bb365f771eac65b50a2′, //文件夹
arr:’img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b’,
arrc:’img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b’,
obj:’img?uuid=20c34d1d5d5a4639061e08165c61a97e63′,
objc:’img?uuid=20c34d1d5d5a4639061e08165c61a97e63′, //文件
arr2:’img?uuid=20327500502b71ed0278a0cc1bf8f8bb41′,
obj2:’img?uuid=203346cafeedac1fb7628bc886b9b7fb47′ },
toTree:function(){/* JSON转换为培育HTML,同时格式化代码 */ var
draw=[],This=this,ico=this.ico;
JE.firstUp=false;/*好首糟糕机关构造*/ var
notify=function(prefix/*前缀HTML*/,lastParent/*爹爹是否是尾节点(确定图标是空白|结构线)*/,name/*节点名*/,value/*节点值*/,formObj/*
父是否是目标(确定子图标) */){/* 构造子节点 */ var
rl=prefix==”?ico.r0:lastParent?ico.r1:ico.r2;/* 配置根节点图标 */
if(value&&value.constructor==Array){/* 处理数组节点 */
draw.push(‘<dl><dt>’,This.draw(prefix,rl,ico.arr,name,”),'</dt><dd>’);/*
绘制文件夹 */ for (var i=0;i<value.length;i++)
notify(prefix+This.img(lastParent?ico.nl:ico.vl),i==value.length-1,i,value[i]);
draw.push(‘</dd></dl>’); }else if(value&&typeof
value==’object’){/* 处理对象节点 */
draw.push(‘<dl><dt>’,This.draw(prefix,rl,ico.obj,name,”),'</dt><dd>’);/*
绘制文件夹 */ var len=0,i=0; for(var key in value)len++;/*
获取对象成员总数 */ for(var key in
value)notify(prefix+This.img(lastParent?ico.nl:ico.vl),++i==len,key,value[key],true);
draw.push(‘</dd></dl>’); }else{/* 处理叶节点(绘制文件) */
draw.push(‘<dl><dt>’,This.draw(prefix,lastParent?ico.f1:ico.f2,formObj?ico.obj2:ico.arr2,name,value),'</dt></dl>’);
}; };/* 不是[]或者{}不绘制 */ if(typeof
this.data==’object’){notify(”,true,this.root,this.data);};
if(this.treeUI)this.treeUI.innerHTML=draw.join(”);/* 显示在树窗口 */
this.msg(‘成功组织树视图!’); },
draw:function(prevfix,line,ico,name,value){/* 子项HTML构造器 */ var
cmd=false,J=this.ico,imgName=false; switch (line) {//传递切换图标 case
J.r0:imgName=’r0′;break; case J.r1:imgName=’r1′;break; case
J.r2:imgName=’r2′; } if(imgName)cmd=’
onclick=”‘+this.name+’.show(this,\”+imgName+’\’)” ‘;/* 加入折叠命令
*/ var type=typeof name==’string’?'(对象成员)’:'(数组索引)’; return
prevfix+this.img(line,cmd) +(this.checkbox?'<input type=”checkbox”
onclick=”‘+this.name+’.select(this)” />’:”) +this.img(ico)+’ <a
href=”javascript:void(0)” onclick=”‘+this.name+’.click(this);” ‘
+’key=”‘+name+'” val=”‘+value+'” >’ +name+type+(value==”?”:’ =
‘)+value+'</a>’ }, img:function(src,attr){/* img HTML构造 */
return ‘<img src=”‘+src+'” ‘+(attr||”)+’ />’; },
click:function(item){/* 子项点击统一回调 */
if(this.hot)this.hot.className=”; this.hot=item;
this.hot.className=’hot’;/* 切换选中项 */ this.onclick(item); },
format:function(txt,compress/*是否为压缩模式*/){/*
格式化JSON源码(对象转换为JSON文本) */ if(/^\s*$/.test(txt))return
this.msg(‘数据也空,无法格式化! ‘); try{var data=eval(‘(‘+txt+’)’);}
catch(e){ JE.editUI.style.color=’red’; return
this.msg(‘数据源语法错误,格式化失败! 错误信息: ‘+e.description,’err’);
}; JE.editUI.style.color=’#000′; var
draw=[],last=false,This=this,line=compress?”:’\n’,nodeCount=0,maxDepth=0;
var notify=function(name,value,isLast,indent/*缩进*/,formObj){
nodeCount++;/*节点计数*/ for (var i=0,tab=”;i<indent;i++
)tab+=This.indent;/* 缩进HTML */
tab=compress?”:tab;/*减模式忽略缩进*/
maxDepth=++indent;/*缩进递增并记下*/
if(value&&value.constructor==Array){/*拍卖数组*/
draw.push(tab+(formObj?(‘”‘+name+'”:’):”)+'[‘+line);/*缩进'[‘
然后换行*/ for (var i=0;i<value.length;i++)
notify(i,value[i],i==value.length-1,indent,false);
draw.push(tab+’]’+(isLast?line:(‘,’+line)));/*缩进’]’换行,若非尾元素则上加逗号*/
}else if(value&&typeof value==’object’){/*拍卖目标*/
draw.push(tab+(formObj?(‘”‘+name+'”:’):”)+'{‘+line);/*缩进'{‘
然后换行*/ var len=0,i=0; for(var key in value)len++; for(var key in
value)notify(key,value[key],++i==len,indent,true);
draw.push(tab+’}’+(isLast?line:(‘,’+line)));/*缩进’}’换行,若非尾元素则上加逗号*/
}else{ if(typeof value==’string’)value='”‘+value+'”‘;
draw.push(tab+(formObj?(‘”‘+name+'”:’):”)+value+(isLast?”:’,’)+line);
}; }; var isLast=true,indent=0; notify(”,data,isLast,indent,false);
this.countInfo=’共处理节点<b>’+nodeCount+'</b>个,最充分养好为<b>’+maxDepth+'</b>’;
return draw.join(”); }, msg:function(text,type){/*
编辑状态或者不当通知 */ if(!this.msgUI)return alert(text); with(new
Date)var
now=([getHours(),getMinutes(),getSeconds()].join(‘:’)).replace(/\b\d\b/g,’0$&’);
this.msgUI.innerHTML='<div>[‘+now+’]
  ‘+text.replace(/\n/g,'<br/>’)+'</div>’;
this.msgUI.className=type; }, show:function (ico,id){/* 显隐树节点 */
var subView=ico.parentNode.parentNode.childNodes[1].style,J=this.ico;
if(subView.display==’none’){ subView.display=”; ico.src=J[id]; }else{
subView.display=’none’; ico.src=J[id+’c’]; }; }, select:function
(sender){ var
sub=sender.parentNode.parentNode.getElementsByTagName(“INPUT”); for (var
i=0;i<sub.length;i++ ) {sub[i].checked=sender.checked;} } };
JE.add=function(){ this.msg(‘功能丰富中…*_^’); }
JE.editItem=function(){ this.msg(‘功能丰富中…*_^’); }
JE.begin=function(){/* 设置UI控件关联响应 */ var $=function
(id){return document.getElementById(id)}; /* 关联UI */
JE.editUI=$(“json_eidit”); JE.msgUI=$(“json_editInfo”);
JE.treeUI=$(“tree”); var updateUI=$(“update”); var auto=$(“autoUpdate”);
var fontSize=$(“fontSize”); /* 单击树子项 */
JE.onclick=function(item){ var key=’键名: <input
value=”‘+item.getAttribute(‘key’)+'” />’, val=’ 键值:
‘+(item.getAttribute(‘val’)==”?’成员列表’:'<input
value=”‘+item.getAttribute(‘val’)+'” />’), add='<button
onclick=”‘+this.name+’.add(this)”>新增</button>’,
edit='<button
onclick=”‘+this.name+’.editItem(this)”>修改</button>’;
JE.msg(key+val+add+edit,’info’); } /* 监听代码变化事件 */
JE.editUI.oninput=JE.editUI.onpropertychange=function (){
if(JE.formating)return;/* 格式化不刷新树 */
if(/^\s*$/.test(this.value))return JE.msg(‘请输入JSON格式的代码!’);;
clearTimeout(JE.update); try{JE.data=eval(‘(‘+this.value+’)’);
}catch(e){ JE.editUI.style.color=’red’; return JE.msg(“源代码有误:
“+e.description+’ , 如果正在编写中, 请忽略这个消息!’,’err’); };
JE.editUI.style.color=’#000′; if(auto.checked||JE.firstUp){/*若同步*/
JE.msg(‘语法正确,正在还布局树,请稍候…’,’busy’);
JE.update=setTimeout(function(){ JE.toTree(); },450); }else{
JE.msg(‘语法正确,请点击刷新,或者打开视图同步开关,或者连续编辑!’) }
return true; }; if(window.ActiveXObject)
document.execCommand(“BackgroundImageCache”, false, true); /*
拦截Tab,自动格式化 */ JE.editUI.onkeydown=function (){
if(event.keyCode==9){$(‘format_indent’).onclick();event.returnValue=false;};
JE.code=this.value; } /* 格式化 */ var format=function(compress){ var
code=JE.format(JE.editUI.value,compress); JE.formating=true;
if(code)JE.editUI.value=code; JE.editUI.focus();
setTimeout(function(){JE.formating=false;},1000); return code; } /*
工具栏按钮 */ $(‘format_indent’).onclick=function
(){if(format())JE.msg(‘完成缩进风格转换,’+JE.countInfo)}
$(‘format_compress’).onclick=function
(){if(format(true)!=undefined)JE.msg(‘完成艰难凑风格转换,’+JE.countInfo);}
updateUI.onclick=function (){ JE.firstUp=true;
JE.editUI.onpropertychange()?JE.msg(‘成功刷新视图!’):JE.msg(‘数据来误,刷新失败!’,’err’)
JE.firstUp=false; }; $(‘clear_txt’).onclick=function
(){JE.editUI.value=JE.treeUI.innerHTML=”;JE.editUI.focus();}
auto.onclick=function
(){JE.msg(‘自动同步视图功能’+(this.checked?’开启’:’关闭!’));}; /*
另存为 */ if(/*@cc_on !@*/true){$(‘save_as’).style.display=’none’};
$(‘save_as’).onclick=function (){ var
d=document,w=d.createElement(‘IFRAME’); w.style.display=”none”;
d.body.appendChild(w); setTimeout(function(){ var
g=w.contentWindow.document; g.charset = ‘utf-8’;
g.body.innerHTML=JE.editUI.value; g.execCommand(“saveas”,”, “json.txt”)
; },1); } }; /* 从此处开始 */ window.onload=function (){ JE.begin(); }
</script> </html>

图片 1 
JSON 编辑器
主干代码

   提示:您得先改部分代码再运行

复制代码 代码如下:

  • 据此来简单的查看、辅助修改繁杂的JSON数据,格式化或者压缩JJSON,当然为可以随心所欲即时编辑一些简练的JSON数据。
  • 大家可以输入或者贴一些JSON数据来校验是否科学。
  • 按Tab键自动全文缩进格式化。

<script type=”text/javascript”><!–
/*
main Object
*/
JE={
data:{},/* 关联数据 */
code:false,/* 格式化后的代码 */
oldCode:[],/* 历史代码 */
editUI:null,/* 关联编辑框 */
msgUI:null,/* 信息展示窗口 */
treeUI:null,/* 树窗口 */
name:’JE’,/* 实例名 */
root:'<b>JSON无忧</b>’,/* 根节点标题 */
checkbox:0,/* 是否添加复框 */
hot:null,/* 选中节点 */
indent:’ ‘,/*缩进符’\t’或者4个’ ‘*/
firstUp:true,/*第一差活动刷新*/
onclick:Array,/*造点击通知*/
countInfo:”,/*统计信息*/
formating:false,/* 格式化中(禁止重构树) */
ico:{/* 树图标 */
//文件夹结构线
r0:’img?uuid=20166b3094daba4bc6e18817b8301b093a’,
r0c:’img?uuid=208018827ed877e31810e838d33e4ac2b0′,
r1:’img?uuid=2094c793496278bde84be80bb6cb2117f5′,
r1c:’img?uuid=205f2329c537dcfd32b5f33bf642f76fa6′,
r2:’img?uuid=20af62be7c197cae64d3e533f7aaf28c25′,
r2c:’img?uuid=20a005983863e5bc8544cecd8b7f82fcdb’,
//前缀图片
nl:’img?uuid=20f508bdc9bb8d98f4529e0fa2475b91bb’,
vl:’img?uuid=20d5de63f4e6927bbb23c377bd1073d26f’,
//文件结构线
f1:’img?uuid=202ccc639afd44130a3946e9837672479c’,
f2:’img?uuid=20900ceb0053a2f7bd07a22337c4e4c72c’,
root:’img?uuid=2069cf3fd1e53a2bb365f771eac65b50a2′,
//文件夹
arr:’img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b’,
arrc:’img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b’,
obj:’img?uuid=20c34d1d5d5a4639061e08165c61a97e63′,
objc:’img?uuid=20c34d1d5d5a4639061e08165c61a97e63′,
//文件
arr2:’img?uuid=20327500502b71ed0278a0cc1bf8f8bb41′,
obj2:’img?uuid=203346cafeedac1fb7628bc886b9b7fb47′
},
toTree:function(){/* JSON转换为培HTML,同时格式化代码 */
var draw=[],This=this,ico=this.ico;
JE.firstUp=false;/*成功首次于机关构造*/
var
notify=function(prefix/*前缀HTML*/,lastParent/*翁是否是尾节点(确定图标是空白|结构线)*/,name
/*节点名*/,value/*节点值*/,formObj/* 父是否是目标(确定子图标)
*/){/* 构造子节点 */
var rl=prefix==”?ico.r0:lastParent?ico.r1:ico.r2;/* 配置根节点图标
*/
if(value&&value.constructor==Array){/* 处理数组节点 */
draw.push(‘<dl><dt>’,This.draw(prefix,rl,ico.arr,name,”),'</dt><dd>’);/*
绘制文件夹 */
for (var i=0;i<value.length;i++)
notify(prefix+This.img(lastParent?ico.nl:ico.vl),i==value.length-1,i,value[i]);
draw.push(‘</dd></dl>’);
}else if(value&&typeof value==’object’){/* 处理目标节点 */
draw.push(‘<dl><dt>’,This.draw(prefix,rl,ico.obj,name,”),'</dt><dd>’);/*
绘制文件夹 */
var len=0,i=0;
for(var key in value)len++;/* 获取对象成员总数 */
for(var key in
value)notify(prefix+This.img(lastParent?ico.nl:ico.vl),++i==len,key,value[key],true);
draw.push(‘</dd></dl>’);
}else{/* 处理叶节点(绘制文件) */
draw.push(‘<dl><dt>’,This.draw(prefix,lastParent?ico.f1:ico.f2,formObj?ico.obj2:ico.arr2,name,value),'</dt></dl>’);
};
};/* 不是[]或者{}不绘制 */
if(typeof this.data==’object’){notify(”,true,this.root,this.data);};
if(this.treeUI)this.treeUI.innerHTML=draw.join(”);/* 显示在树窗口
*/
this.msg(‘成功组织树视图!’);
},
draw:function(prevfix,line,ico,name,value){/* 子项HTML构造器 */
var cmd=false,J=this.ico,imgName=false;
switch (line) {//传递切换图标
case J.r0:imgName=’r0′;break;
case J.r1:imgName=’r1′;break;
case J.r2:imgName=’r2′;
}
if(imgName)cmd=’ onclick=”‘+this.name+’.show(this,\”+imgName+’\’)”
‘;/* 加入折叠命令 */
var type=typeof name==’string’?'(对象成员)’:'(数组索引)’;
return prevfix+this.img(line,cmd)
+(this.checkbox?'<input type=”checkbox”
onclick=”‘+this.name+’.select(this)” />’:”)
+this.img(ico)+’ <a href=”javascript:void(0)”
href=”javascript:void(0)” onclick=”‘+this.name+’.click(this);” ‘
+’key=”‘+name+'” val=”‘+value+'” >’
+name+type+(value==”?”:’ = ‘)+value+'</a>’
},
img:function(src,attr){/* img HTML构造 */
return ‘<img src=”‘+src+'” src=”‘+src+'” ‘+(attr||”)+’ />’;
},
click:function(item){/* 子项点击统一回调 */
if(this.hot)this.hot.className=”;
this.hot=item;
this.hot.className=’hot’;/* 切换选中项 */
this.onclick(item);
},
format:function(txt,compress/*是否为减少模式*/){/*
格式化JSON源码(对象转换为JSON文本) */
if(/^\s*$/.test(txt))return this.msg(‘数据也空,无法格式化! ‘);
try{var data=eval(‘(‘+txt+’)’);}
catch(e){
JE.editUI.style.color=’red’;
return this.msg(‘数据源语法错误,格式化失败! 错误信息:
‘+e.description,’err’);
};
JE.editUI.style.color=’#000′;
var
draw=[],last=false,This=this,line=compress?”:’\n’,nodeCount=0,maxDepth=0;
var notify=function(name,value,isLast,indent/*缩进*/,formObj){
nodeCount++;/*节点计数*/
for (var i=0,tab=”;i<indent;i++ )tab+=This.indent;/* 缩进HTML */
tab=compress?”:tab;/*减模式忽略缩进*/
maxDepth=++indent;/*缩进递增并记录*/
if(value&&value.constructor==Array){/*处理数组*/
draw.push(tab+(formObj?(‘”‘+name+'”:’):”)+'[‘+line);/*缩进'[‘
然后换行*/
for (var i=0;i<value.length;i++)
notify(i,value[i],i==value.length-1,indent,false);
draw.push(tab+’]’+(isLast?line:(‘,’+line)));/*缩进’]’换行,若非尾元素则补充加逗号*/
}else if(value&&typeof value==’object’){/*拍卖对象*/
draw.push(tab+(formObj?(‘”‘+name+'”:’):”)+'{‘+line);/*缩进'{‘
然后换行*/
var len=0,i=0;
for(var key in value)len++;
for(var key in value)notify(key,value[key],++i==len,indent,true);
draw.push(tab+’}’+(isLast?line:(‘,’+line)));/*缩进’}’换行,若非尾元素则上加逗号*/
}else{
if(typeof value==’string’)value='”‘+value+'”‘;
draw.push(tab+(formObj?(‘”‘+name+'”:’):”)+value+(isLast?”:’,’)+line);
};
};
var isLast=true,indent=0;
notify(”,data,isLast,indent,false);
this.countInfo=’共处理节点<b>’+nodeCount+'</b>个,最深养大为<b>’+maxDepth+'</b>’;
return draw.join(”);
},
msg:function(text,type){/* 编辑状态或者不当通知 */
if(!this.msgUI)return alert(text);
with(new Date)var
now=([getHours(),getMinutes(),getSeconds()].join(‘:’)).replace(/\b\d\b/g,’0$&’);
this.msgUI.innerHTML='<div>[‘+now+’]
  ‘+text.replace(/\n/g,'<br/>’)+'</div>’;
this.msgUI.className=type;
},
show:function (ico,id){/* 显隐树节点 */
var
subView=ico.parentNode.parentNode.childNodes[1].style,J=this.ico;
if(subView.display==’none’){
subView.display=”;
ico.src=J[id];
}else{
subView.display=’none’;
ico.src=J[id+’c’];
};
},
select:function (sender){
var sub=sender.parentNode.parentNode.getElementsByTagName(“INPUT”);
for (var i=0;i<sub.length;i++ ) {sub[i].checked=sender.checked;}
}
};
JE.add=function(){
this.msg(‘功能丰富中…*_^’);
}
JE.editItem=function(){
this.msg(‘功能丰富中…*_^’);
}
JE.begin=function(){/* 设置UI控件关联响应 */
var $=function (id){return document.getElementById(id)};
/* 关联UI */
JE.editUI=$(“json_eidit”);
JE.msgUI=$(“json_editInfo”);
JE.treeUI=$(“tree”);
var updateUI=$(“update”);
var auto=$(“autoUpdate”);
var fontSize=$(“fontSize”);
/* 单击树子项 */
JE.onclick=function(item){
var key=’键名: <input value=”‘+item.getAttribute(‘key’)+'” />’,
val=’ 键值: ‘+(item.getAttribute(‘val’)==”?’成员列表’:'<input
value=”‘+item.getAttribute(‘val’)+'” />’),
add='<button
onclick=”‘+this.name+’.add(this)”>新增</button>’,
edit='<button
onclick=”‘+this.name+’.editItem(this)”>修改</button>’;
JE.msg(key+val+add+edit,’info’);
}
/* 监听代码变化事件 */
JE.editUI.oninput=JE.editUI.onpropertychange=function (){
if(JE.formating)return;/* 格式化不刷新树 */
if(/^\s*$/.test(this.value))return JE.msg(‘请输入JSON格式的代码!’);;
clearTimeout(JE.update);
try{JE.data=eval(‘(‘+this.value+’)’);
}catch(e){
JE.editUI.style.color=’red’;
return JE.msg(“源代码有不当: “+e.description+’ , 如果正在编写中,
请忽略这个音!’,’err’);
};
JE.editUI.style.color=’#000′;
if(auto.checked||JE.firstUp){/*若同步*/
JE.msg(‘语法正确,正在还组织树,请稍候…’,’busy’);
JE.update=setTimeout(function(){
JE.toTree();
},450);
}else{
JE.msg(‘语法正确,请点击刷新,或者打开视图同步开关,或者接续编辑!’)
}
return true;
};
if(window.ActiveXObject)
document.execCommand(“BackgroundImageCache”, false, true);
/* 拦截Tab,自动格式化 */
JE.editUI.onkeydown=function (){
if(event.keyCode==9){$(‘format_indent’).onclick();event.returnValue=false;};
JE.code=this.value;
}
/* 格式化 */
var format=function(compress){
var code=JE.format(JE.editUI.value,compress);
JE.formating=true;
if(code)JE.editUI.value=code;
JE.editUI.focus();
setTimeout(function(){JE.formating=false;},1000);
return code;
}
/* 工具栏按钮 */
$(‘format_indent’).onclick=function
(){if(format())JE.msg(‘完成缩进风格转换,’+JE.countInfo)}
$(‘format_compress’).onclick=function
(){if(format(true)!=undefined)JE.msg(‘完成艰难凑风格转换,’+JE.countInfo);}
updateUI.onclick=function (){
JE.firstUp=true;
JE.editUI.onpropertychange()?JE.msg(‘成功刷新视图!’):JE.msg(‘数据发生无意,刷新失败!’,’err’)
JE.firstUp=false;
};
$(‘clear_txt’).onclick=function
(){JE.editUI.value=JE.treeUI.innerHTML=”;JE.editUI.focus();}
auto.onclick=function
(){JE.msg(‘自动同步视图功能’+(this.checked?’开启’:’关闭!’));};
/* 另存为 */
if(/*@cc_on
[email protected]*/true){$(‘save_as’).style.display=’none’};
$(‘save_as’).onclick=function (){
var d=document,w=d.createElement(‘IFRAME’);
w.style.display=”none”;
d.body.appendChild(w);
setTimeout(function(){
var g=w.contentWindow.document;
g.charset = ‘utf-8’;
g.body.innerHTML=JE.editUI.value;
g.execCommand(“saveas”,”, “json.txt”) ;
},1);
}
};
/* 从这边开 */
window.onload=function (){
JE.begin();
}
// –></script>

http://www.bkjia.com/Javascript/318920.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/318920.htmlTechArticle大家可以输入或者粘贴一些JSON数据来校验是否正确。
按Tab键自动全文缩进格式化。 JSON 编辑器 核心代码 复制代码 代码如下:
script type=”te…

相关文章