JSON 差异对比是什么？

可视化对比两个 JSON 的差异，高亮新增/删除/修改，支持深层嵌套对比和路径显示，开发工具，纯前端本地运行，数据不上传服务器，无需安装打开即用。

JSON 差异对比是否免费？

是的，JSON 差异对比完全免费，无需注册，打开即用，数据不上传服务器。

JSON 差异对比数据安全吗？

所有处理均在浏览器本地完成，数据不会上传到任何服务器，可以放心使用。

🔍 JSON 差异对比

可视化对比两个 JSON 的差异，高亮新增、删除和修改

原始 JSON

修改后 JSON

差异结果

点击「对比差异」查看结果

);renderDiffs(e);}function diffObjects(c,d,e){var f=[];if(typeof c!=='object'||typeof d!=='object'||c===null||d===null)return JSON['stringify'](c)!==JSON['stringify'](d)&&f['push']({'type':'change','path':e,'oldVal':c,'newVal':d}),f;var g=Array['isArray'](c)&&Array['isArray'](d),h={};if(c)Object['keys'](c)['forEach'](function(i){h[i]=!![];});if(d)Object['keys'](d)['forEach'](function(i){h[i]=!![];});return Object['keys'](h)['forEach'](function(i){var j=e+(g?'['+i+']':'.'+i);if(!(i in c))f['push']({'type':'add','path':j,'newVal':d[i]});else{if(!(i in d))f['push']({'type':'remove','path':j,'oldVal':c[i]});else{var k=c[i],l=d[i];if(typeof k==='object'&&typeof l==='object'&&k!==null&&l!==null)Array['isArray'](k)!==Array['isArray'](l)?f['push']({'type':'change','path':j,'oldVal':k,'newVal':l}):f=f['concat'](diffObjects(k,l,j));else JSON['stringify'](k)!==JSON['stringify'](l)&&f['push']({'type':'change','path':j,'oldVal':k,'newVal':l});}}}),f;}function renderDiffs(a){var b={'add':0x0,'remove':0x0,'change':0x0};a['forEach'](function(e){b[e['type']]=(b[e['type']]||0x0)+0x1;});var c=document['getElementById']('summary');c['style']['display']='flex',c['innerHTML']='+\x20'+b['add']+'\x20新增'+'-\x20'+b['remove']+'\x20删除'+'~\x20'+b['change']+'\x20修改';if(!a['length']){document['getElementById']('diffView')['innerHTML']='两个\x20JSON\x20完全相同，没有差异';return;}var d='';a['forEach'](function(e){if(e['type']==='add')d+='

'+escHtml(e['path'])+'
+\x20'+formatVal(e['newVal'])+'';else{if(e['type']==='remove')d+='

'+escHtml(e['path'])+'
-\x20'+formatVal(e['oldVal'])+'';else e['type']==='change'&&(d+='

'+escHtml(e['path'])+'

'+formatVal(e['oldVal'])+'\x20→\x20'+formatVal(e['newVal'])+'');}}),document['getElementById']('diffView')['innerHTML']=d;}function formatVal(a){if(a===null)return'null';if(a===undefined)return'undefined';if(typeof a==='object')return''+escHtml(JSON['stringify'](a))+'';if(typeof a==='string')return'\x22'+escHtml(a)+'\x22';return''+escHtml(String(a))+'';}function escHtml(a){return String(a)['replace'](/&/g,'&')['replace'](//g,'>');}function swapJson(){var a=document['getElementById']('jsonLeft'),b=document['getElementById']('jsonRight'),c=a['value'];a['value']=b['value'],b['value']=c;}function formatBoth(){try{var a=JSON['parse'](document['getElementById']('jsonLeft')['value']);document['getElementById']('jsonLeft')['value']=JSON['stringify'](a,null,0x2);}catch(c){}try{var b=JSON['parse'](document['getElementById']('jsonRight')['value']);document['getElementById']('jsonRight')['value']=JSON['stringify'](b,null,0x2);}catch(d){}}function clearAll(){document['getElementById']('jsonLeft')['value']='',document['getElementById']('jsonRight')['value']='',document['getElementById']('diffView')['innerHTML']='点击「对比差异」查看结果',document['getElementById']('summary')['style']['display']='none';}function loadExample(){document['getElementById']('jsonLeft')['value']=JSON['stringify']({'name':'张三','age':0x19,'city':'北京','skills':['JavaScript','React','Node.js'],'address':{'street':'长安街','zip':'100000'},'active':!![]},null,0x2),document['getElementById']('jsonRight')['value']=JSON['stringify']({'name':'张三','age':0x1a,'city':'上海','skills':['JavaScript','React','Vue','TypeScript'],'address':{'street':'南京路','zip':'200000','country':'中国'},'email':'zhangsan@example.com','active':![]},null,0x2),compareDiff();}

🔍 JSON 差异对比

原始 JSON

修改后 JSON

差异结果

隐私政策

关于我们

免责声明

意见反馈