CompareJSONJSON对比小程序资源-CSDN文库

共9个文件

js：4个

css：3个

svg：1个

需积分: 2 162 浏览量 2023-03-08 23:01:33 上传评论收藏 89KB ZIP 举报

《深入解析CompareJSON JSON对比小程序》在信息技术领域，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于数据传输和存储。它以其易读易写的特点深受开发者喜爱。然而，在处理JSON数据时，我们经常需要对两个或多个JSON对象进行对比，以检查它们之间的差异。为了解决这个问题，出现了"CompareJSON JSON对比小程序"，它提供了高效且便捷的JSON对比功能。 1. **JSON按Key排序**：对于JSON对象，其内部的键值对默认并无特定顺序。CompareJSON小程序允许用户根据键（key）对JSON对象进行排序，这样不仅便于查看和理解，也能在对比时减少因原始顺序不同而产生的误判。排序功能使得对比结果更为直观，有助于快速定位差异。 2. **文本对比**：除了专门的JSON比较，CompareJSON还支持纯文本的对比。这在处理包含JSON字符串的文件或者需要对比非JSON结构文本时非常实用。通过文本对比，可以快速识别出两个文本文件之间的行差异、字符差异等，提高工作效率。 3. **文件对比**：小程序的文件对比功能允许用户上传两个JSON文件进行对比。这在处理大量JSON数据或不同版本间的数据对比时特别有用。用户可以快速发现不同文件中的JSON结构变化，对于版本控制和数据分析具有显著价值。 4. **自定义JSON拆解对比**：一个创新特性是自定义JSON拆解对比，这意味着用户可以指定某些部分进行深度比较。这种灵活性对于关注特定部分的差异，或者需要忽略某些不重要的键值对比时尤为有用。用户可以根据需求选择哪些部分进行细致比较，哪些部分仅做粗略检查。在实际应用中，CompareJSON JSON对比小程序能够广泛服务于API测试、数据验证、版本控制等多个场景。无论是开发人员在调试代码时检测返回的JSON数据，还是数据分析师在处理大量JSON数据时寻找差异，它都能提供强大的支持。通过简洁的界面和高效的算法，CompareJSON确保了用户能够在短时间内完成复杂的JSON比较任务，从而提高工作效率，减少错误。 CompareJSON JSON对比小程序通过其全面的功能和用户友好的设计，为处理JSON数据的比对工作带来了极大的便利。无论是专业人士还是初学者，都能从中受益，更轻松地管理和理解JSON数据的差异。随着JSON在各个领域的广泛应用，这样的工具无疑将发挥越来越重要的作用。

资源推荐

资源详情

资源评论

收起资源包目录

CompareJSON.zip （9个子文件）

CompareJSON

expand.svg 282B

codemirror.js 168KB

merge.js 38KB

javascript.js 37KB

diff_match_patch.js 19KB

ccsiteV6.css 27KB

merge.css 3KB

codemirror.css 6KB

CompareJSON.html 5KB

<!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="theme-color" content="#08C988"> <meta property="og:locale" content="en_US"> <meta property="og:type" content="website"> <meta property="og:site_name" content="Online Text Compare"> <title>Compare JSON</title> <meta name="keywords" content="JSON Compare"> <link rel="canonical" href="https://onlinetextcompare.com/json"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="./CompareJSON/ccsiteV6.css"> <link rel="stylesheet" type="text/css" href="./CompareJSON/codemirror.css"> <link rel="stylesheet" type="text/css" href="./CompareJSON/merge.css"> <script src="./CompareJSON/codemirror.js"></script> <script src="./CompareJSON/diff_match_patch.js"></script> <script src="./CompareJSON/merge.js"></script> <script src="./CompareJSON/javascript.js"></script>  <style> #view { width: 90%; } #container:fullscreen #view { width: 100%; } #container:fullscreen .CodeMirror-merge, #container:fullscreen .CodeMirror-merge .CodeMirror { height: 95vh; } #viewHeader { width:90%;padding:10px;margin:8px auto 16px auto;text-align:center; } @media (max-width: 1250px) { #fs { visibility: hidden; } #viewHeader {margin:auto;text-align:center;height:40px;} } </style> </head> <body> <div class="intro" style="max-width: 47.625rem; margin: 0 auto; text-align:center"> <div class="wrap"><h1 style="margin: 3.5rem 0 0.5rem 0;">JSON Compare</h1></div> <p>Find differences between two JSON Queries</p> <button id="btn-format" class="write1">Format & Compare JSON</button> <br> <br> </div> <div id="container" style="background-color: white;"> <div style="margin: 0 auto; text-align:center"> <b>Sources</b> </div> <div id="source" style="width:90%;margin:auto;border:1px solid #7a7a7a"> </div> <div id="viewHeader"> <div style="width:45%;float:left;"> <b>Before JSON file:</b> Paste contents or <input id="firstfile" type="file"> </div> <div style="width:45%;float:right;"> <b style="padding-top: 10px;">After JSON file:</b> Paste contents or <input id="secondfile" type="file"> <img src="./CompareJSON/expand.svg" id="fs" title="Toggle Fullscreen" style="vertical-align: middle;"> </div> </div> <div id="view" style="padding:10px;margin:auto;"> </div> </div> <script type="text/javascript"> var source = document.getElementById("source"); var sv = CodeMirror(source,{ lineNumbers: true, mode: "application/json" }); function sortSortJsonStr( json , replacer, space ) { var jsonArr = Object.keys(json); jsonArr = jsonArr.sort() var leftSortJson = {}; jsonArr.forEach(function(cval){ leftSortJson[cval] = json[cval] }) console.log(leftSortJson) return JSON.stringify(leftSortJson, replacer, space); } var leftContent = "{}"; var rightContent = "{}"; var target = document.getElementById("view"); var mv = CodeMirror.MergeView(target, { value: leftContent, origLeft: null, orig: rightContent, lineNumbers: true, mode: "application/json", showDifferences: true, connect: 'align', collapseIdentical: false, revertButtons: true, allowEditingOriginals: true, chunkClassLocation: ['background', 'wrap', 'gutter'] }); document.getElementById('btn-format').onclick = function() { var source = JSON.parse(sv.getValue()); sv.setValue(sortSortJsonStr(source, undefined, 4)); var leftContenct = source && source.before ? source.before : ""; leftContenct = sortSortJsonStr(leftContenct, undefined, 4); mv.editor().setValue(leftContenct); var rightContent = source && source.after ? source.after : ""; rightContent = sortSortJsonStr(rightContent, undefined, 4); mv.rightOriginal().setValue(rightContent); }; let input = document.querySelector('#firstfile') input.addEventListener('change', () => { let files = input.files; if (files.length == 0) return; const file = files[0]; let reader = new FileReader(); reader.onload = (e) => { const file = e.target.result; mv.editor().setValue(file); }; reader.onerror = (e) => alert(e.target.error.name); reader.readAsText(file); }); let input2 = document.querySelector('#secondfile') input2.addEventListener('change', () => { let files = input2.files; if (files.length == 0) return; const file = files[0]; let reader = new FileReader(); reader.onload = (e) => { const file = e.target.result; mv.rightOriginal().setValue(file); }; reader.onerror = (e) => alert(e.target.error.name); reader.readAsText(file); }); let fullscreen = document.getElementById('container'); let button = document.getElementById('fs'); button.addEventListener("click", () => { if (!document.fullscreenElement) { fullscreen?.requestFullscreen(); } else { document.exitFullscreen(); } }); </script> </body></html>

评论收藏

内容反馈