大家可以輸入或者粘貼一些JSON數(shù)據(jù)來校驗是否正確。

按Tab鍵自動全文縮進(jìn)格式化。

?

JSON 編輯器

核心代碼

/*

main Object

*/

JE={

data:{},/* 關(guān)聯(lián)數(shù)據(jù) */

code:false,/* 格式化后的代碼 */

oldCode:[],/* 歷史代碼 */

editUI:null,/* 關(guān)聯(lián)編輯框 */

msgUI:null,/* 信息顯示窗口 */

treeUI:null,/* 樹窗口 */

name:'JE',/* 實例名 */

root:'JSON無憂',/* 根節(jié)點標(biāo)題 */

checkbox:0,/* 是否添加復(fù)框 */

hot:null,/* 選中節(jié)點 */

indent:' ',/*縮進(jìn)符'\t'或者4個' '*/

firstUp:true,/*第一次自動刷新*/

onclick:Array,/*樹點擊通知*/

countInfo:'',/*統(tǒng)計信息*/

formating:false,/* 格式化中(禁止重構(gòu)樹) */

ico:{/* 樹圖標(biāo) */

//文件夾結(jié)構(gòu)線

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',

//文件結(jié)構(gòu)線

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轉(zhuǎn)換為樹HTML,同時格式化代碼 */

var draw=[],This=this,ico=this.ico;

JE.firstUp=false;/*完成首次自動構(gòu)造*/

var notify=function(prefix/*前綴HTML*/,lastParent/*父是否是尾節(jié)點(確定圖標(biāo)是空白|結(jié)構(gòu)線)*/,name /*節(jié)點名*/,value/*節(jié)點值*/,formObj/* 父是否是對象(確定子圖標(biāo)) */){/* 構(gòu)造子節(jié)點 */

var rl=prefix==''?ico.r0:lastParent?ico.r1:ico.r2;/* 配置根節(jié)點圖標(biāo) */

if(value&&value.constructor==Array){/* 處理數(shù)組節(jié)點 */

draw.push('

',This.draw(prefix,rl,ico.arr,name,''),'

');/* 繪制文件夾 */

for (var i=0;i

notify(prefix+This.img(lastParent?ico.nl:ico.vl),i==value.length-1,i,value[i]);

draw.push('

');

}else if(value&&typeof value=='object'){/* 處理對象節(jié)點 */

draw.push('

',This.draw(prefix,rl,ico.obj,name,''),'

');/* 繪制文件夾 */

var len=0,i=0;

for(var key in value)len++;/* 獲取對象成員總數(shù) */

for(var key in value)notify(prefix+This.img(lastParent?ico.nl:ico.vl),++i==len,key,value[key],true);

draw.push('

');

}else{/* 處理葉節(jié)點(繪制文件) */

draw.push('

',This.draw(prefix,lastParent?ico.f1:ico.f2,formObj?ico.obj2:ico.arr2,name,value),'');

};

};/* 不是[]或者{}不繪制 */

if(typeof this.data=='object'){notify('',true,this.root,this.data);};

if(this.treeUI)this.treeUI.innerHTML=draw.join('');/* 顯示在樹窗口 */

this.msg('成功構(gòu)造樹視圖!');

},

draw:function(prevfix,line,ico,name,value){/* 子項HTML構(gòu)造器 */

var cmd=false,J=this.ico,imgName=false;

switch (line) {//傳遞切換圖標(biāo)

case J.r0:imgName='r0';break;

case J.r1:imgName='r1';break;

case J.r2:imgName='r2';

}

if(imgName)cmd=' οnclick="'+this.name+'.show(this,\''+imgName+'\')" ';/* 加入折疊命令 */

var type=typeof name=='string'?'(對象成員)':'(數(shù)組索引)';

return prevfix+this.img(line,cmd)

+(this.checkbox?'':'')

+this.img(ico)+'

+'key="'+name+'" val="'+value+'" >'

+name+type+(value==''?'':' = ')+value+'

'

},

img:function(src,attr){/* img HTML構(gòu)造 */

return '';

},

click:function(item){/* 子項點擊統(tǒng)一回調(diào) */

if(this.hot)this.hot.className='';

this.hot=item;

this.hot.className='hot';/* 切換選中項 */

this.onclick(item);

},

format:function(txt,compress/*是否為壓縮模式*/){/* 格式化JSON源碼(對象轉(zhuǎn)換為JSON文本) */

if(/^\s*$/.test(txt))return this.msg('數(shù)據(jù)為空,無法格式化! ');

try{var data=eval('('+txt+')');}

catch(e){

JE.editUI.style.color='red';

return this.msg('數(shù)據(jù)源語法錯誤,格式化失敗! 錯誤信息: '+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/*縮進(jìn)*/,formObj){

nodeCount++;/*節(jié)點計數(shù)*/

for (var i=0,tab='';i

tab=compress?'':tab;/*壓縮模式忽略縮進(jìn)*/

maxDepth=++indent;/*縮進(jìn)遞增并記錄*/

if(value&&value.constructor==Array){/*處理數(shù)組*/

draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*縮進(jìn)'[' 然后換行*/

for (var i=0;i

notify(i,value[i],i==value.length-1,indent,false);

draw.push(tab+']'+(isLast?line:(','+line)));/*縮進(jìn)']'換行,若非尾元素則添加逗號*/

}else if(value&&typeof value=='object'){/*處理對象*/

draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*縮進(jìn)'{' 然后換行*/

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)));/*縮進(jìn)'}'換行,若非尾元素則添加逗號*/

}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='共處理節(jié)點'+nodeCount+'個,最大樹深為'+maxDepth+'';

return draw.join('');

},

msg:function(text,type){/* 編輯狀態(tài)或者錯誤通知 */

if(!this.msgUI)return alert(text);

with(new Date)var now=([getHours(),getMinutes(),getSeconds()].join(':')).replace(/\b\d\b/g,'0$&');

this.msgUI.innerHTML='

['+now+'] ??'+text.replace(/\n/g,'
')+'';

this.msgUI.className=type;

},

show:function (ico,id){/* 顯隱樹節(jié)點 */

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

}

};

JE.add=function(){

this.msg('功能添加中...*_^');

}

JE.editItem=function(){

this.msg('功能添加中...*_^');

}

JE.begin=function(){/* 設(shè)置UI控件關(guān)聯(lián)響應(yīng) */

var $=function (id){return document.getElementById(id)};

/* 關(guān)聯(lián)UI */

JE.editUI=$("json_eidit");

JE.msgUI=$("json_editInfo");

JE.treeUI=$("tree");

var updateUI=$("update");

var auto=$("autoUpdate");

var fontSize=$("fontSize");

/* 單擊樹子項 */

JE.οnclick=function(item){

var key='鍵名: ',

val=' 鍵值: '+(item.getAttribute('val')==''?'成員列表':''),

add='新增',

edit='修改';

JE.msg(key+val+add+edit,'info');

}

/* 監(jiān)聽代碼變化事件 */

JE.editUI.οninput=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('語法正確,正在重新構(gòu)造樹,請稍候...','busy');

JE.update=setTimeout(function(){

JE.toTree();

},450);

}else{

JE.msg('語法正確,請點擊刷新,或者打開視圖同步開關(guān),或者繼續(xù)編輯!')

}

return true;

};

if(window.ActiveXObject)

document.execCommand("BackgroundImageCache", false, true);

/* 攔截Tab,自動格式化 */

JE.editUI.οnkeydοwn=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').οnclick=function (){if(format())JE.msg('完成縮進(jìn)風(fēng)格轉(zhuǎn)換,'+JE.countInfo)}

$('format_compress').οnclick=function (){if(format(true)!=undefined)JE.msg('完成緊湊風(fēng)格轉(zhuǎn)換,'+JE.countInfo);}

updateUI.οnclick=function (){

JE.firstUp=true;

JE.editUI.onpropertychange()?JE.msg('成功刷新視圖!'):JE.msg('數(shù)據(jù)有誤,刷新失敗!','err')

JE.firstUp=false;

};

$('clear_txt').οnclick=function (){JE.editUI.value=JE.treeUI.innerHTML='';JE.editUI.focus();}

auto.οnclick=function (){JE.msg('自動同步視圖功能'+(this.checked?'開啟':'關(guān)閉!'));};

/* 另存為 */

if(/*@cc_on !@*/true){$('save_as').style.display='none'};

$('save_as').οnclick=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.οnlοad=function (){

JE.begin();

}

// -->

總結(jié)

以上是生活随笔為你收集整理的html代码编辑器jason,JSON 编辑器实现代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。