{"id":348,"date":"2026-03-30T23:03:05","date_gmt":"2026-03-30T14:03:05","guid":{"rendered":"https:\/\/tool-laboratory.com\/?p=348"},"modified":"2026-04-01T22:15:09","modified_gmt":"2026-04-01T13:15:09","slug":"json-formatter-diff-tool","status":"publish","type":"post","link":"https:\/\/tool-laboratory.com\/en\/json-formatter-diff-tool\/","title":{"rendered":"JSON\u6574\u5f62\uff06\u6bd4\u8f03\u30c4\u30fc\u30eb\uff5c\u5dee\u5206\u3092\u8272\u4ed8\u304d\u3067\u78ba\u8a8d\u3067\u304d\u308b\u7121\u6599\u30c4\u30fc\u30eb"},"content":{"rendered":"\n<div class=\"json-tool\">\n\n  <div class=\"json-grid\">\n    <textarea id=\"json1\" placeholder=\"JSON\u2460\"><\/textarea>\n    <textarea id=\"json2\" placeholder=\"JSON\u2461\"><\/textarea>\n  <\/div>\n\n  <div class=\"btn-row\">\n    <button onclick=\"formatJSON()\">\u6574\u5f62<\/button>\n    <button onclick=\"compareJSON()\">\u5dee\u5206\u6bd4\u8f03<\/button>\n    <button onclick=\"copyJSON('result1')\">\u5de6\u30b3\u30d4\u30fc<\/button>\n    <button onclick=\"copyJSON('result2')\">\u53f3\u30b3\u30d4\u30fc<\/button>\n    <button onclick=\"clearJSON()\">\u30af\u30ea\u30a2<\/button>\n  <\/div>\n\n  <div id=\"errorBox\"><\/div>\n\n  <div class=\"result-grid\">\n    <div class=\"code-block\"><pre id=\"result1\"><\/pre><\/div>\n    <div class=\"code-block\"><pre id=\"result2\"><\/pre><\/div>\n  <\/div>\n\n<\/div>\n\n<div id=\"toast\">\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f<\/div>\n\n<style>\n.json-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n}\n\ntextarea{\n  height:180px;\n  padding:10px;\n  border-radius:10px;\n  font-family:monospace;\n}\n\n.btn-row button{\n  margin:5px;\n  padding:10px;\n  border:none;\n  background:#2563eb;\n  color:#fff;\n  border-radius:8px;\n}\n\n.result-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n  margin-top:10px;\n}\n\n.code-block{\n  background:#111;\n  border-radius:10px;\n  overflow:auto;\n}\n\npre{\n  color:#eee;\n  padding:10px;\n  font-size:13px;\n}\n\n.line{\n  display:flex;\n}\n\n.line-number{\n  width:40px;\n  color:#888;\n}\n\n.add{background:#14532d;}\n.del{background:#7f1d1d;}\n.change{background:#78350f;}\n\n#errorBox{\n  color:red;\n  margin-top:10px;\n}\n\n#toast{\n  position:fixed;\n  bottom:20px;\n  left:50%;\n  transform:translateX(-50%);\n  background:#333;\n  color:#fff;\n  padding:10px 20px;\n  border-radius:20px;\n  display:none;\n}\n\n@media(max-width:768px){\n  .json-grid,.result-grid{\n    grid-template-columns:1fr;\n  }\n}\n<\/style>\n\n<script>\nfunction sortJSON(obj){\n  if(Array.isArray(obj)){\n    return obj.map(sortJSON);\n  }else if(typeof obj===\"object\" && obj!==null){\n    return Object.keys(obj).sort().reduce((res,key)=>{\n      res[key]=sortJSON(obj[key]);\n      return res;\n    },{});\n  }\n  return obj;\n}\n\nfunction formatJSON(){\n  try{\n    const j1 = sortJSON(JSON.parse(json1.value||\"{}\"));\n    const j2 = sortJSON(JSON.parse(json2.value||\"{}\"));\n\n    renderLines(JSON.stringify(j1,null,2).split(\"\\n\"),\"result1\");\n    renderLines(JSON.stringify(j2,null,2).split(\"\\n\"),\"result2\");\n\n    errorBox.textContent=\"\";\n  }catch(e){\n    showError(e);\n  }\n}\n\nfunction compareJSON(){\n  try{\n    const j1 = sortJSON(JSON.parse(json1.value||\"{}\"));\n    const j2 = sortJSON(JSON.parse(json2.value||\"{}\"));\n\n    const a1 = JSON.stringify(j1,null,2).split(\"\\n\");\n    const a2 = JSON.stringify(j2,null,2).split(\"\\n\");\n\n    let h1=\"\",h2=\"\";\n    const max = Math.max(a1.length,a2.length);\n\n    for(let i=0;i<max;i++){\n      let c=\"\";\n      if(!a1[i]) c=\"add\";\n      else if(!a2[i]) c=\"del\";\n      else if(a1[i]!==a2[i]) c=\"change\";\n\n      h1+=lineHTML(a1[i]||\"\",i,c);\n      h2+=lineHTML(a2[i]||\"\",i,c);\n    }\n\n    result1.innerHTML=h1;\n    result2.innerHTML=h2;\n\n    errorBox.textContent=\"\";\n  }catch(e){\n    showError(e);\n  }\n}\n\nfunction renderLines(arr,id){\n  let html=\"\";\n  arr.forEach((l,i)=>{\n    html+=lineHTML(l,i,\"\");\n  });\n  document.getElementById(id).innerHTML=html;\n}\n\nfunction lineHTML(text,i,cls){\n  return `<div class=\"line ${cls}\">\n    <span class=\"line-number\">${i+1}<\/span>\n    <span>${escapeHtml(text)}<\/span>\n  <\/div>`;\n}\n\nfunction copyJSON(id){\n  navigator.clipboard.writeText(document.getElementById(id).innerText);\n  showToast();\n}\n\nfunction clearJSON(){\n  json1.value=\"\";\n  json2.value=\"\";\n  result1.innerHTML=\"\";\n  result2.innerHTML=\"\";\n}\n\nfunction showError(e){\n  errorBox.textContent=\"JSON\u30a8\u30e9\u30fc: \"+e.message;\n}\n\nfunction showToast(){\n  toast.style.display=\"block\";\n  setTimeout(()=>toast.style.display=\"none\",1500);\n}\n\nfunction escapeHtml(t){\n  return t.replace(\/&\/g,\"&amp;\").replace(\/<\/g,\"&lt;\").replace(\/>\/g,\"&gt;\");\n}\n<\/script>\n\n\n\n<h1 class=\"wp-block-heading\">JSON\u6574\u5f62\uff06\u6bd4\u8f03\u30c4\u30fc\u30eb\uff5c\u5dee\u5206\u3092\u8272\u4ed8\u304d\u3067\u78ba\u8a8d<\/h1>\n\n\n\n<p>API\u30ec\u30b9\u30dd\u30f3\u30b9\u3084\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306eJSON\u3092<br><strong>\u6574\u5f62\u30fb\u6bd4\u8f03\u30fb\u5dee\u5206\u30c1\u30a7\u30c3\u30af\u3067\u304d\u308b\u7121\u6599\u30c4\u30fc\u30eb<\/strong>\u3067\u3059\u3002<br>\u30a8\u30f3\u30b8\u30cb\u30a2\u5411\u3051\u306b\u3001\u5909\u66f4\u7b87\u6240\u3092\u8272\u4ed8\u304d\u3067\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6574\u5f62 \u5dee\u5206\u6bd4\u8f03 \u5de6\u30b3\u30d4\u30fc \u53f3\u30b3\u30d4\u30fc \u30af\u30ea\u30a2 \u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f JSON\u6574\u5f62\uff06\u6bd4\u8f03\u30c4\u30fc\u30eb\uff5c\u5dee\u5206\u3092\u8272\u4ed8\u304d\u3067\u78ba\u8a8d API\u30ec\u30b9\u30dd\u30f3\u30b9\u3084\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306eJSON\u3092\u6574\u5f62\u30fb\u6bd4\u8f03\u30fb\u5dee\u5206\u30c1\u30a7\u30c3\u30af\u3067\u304d\u308b\u7121\u6599\u30c4\u30fc\u30eb\u3067\u3059\u3002\u30a8\u30f3\u30b8\u30cb\u30a2\u5411\u3051\u306b\u3001\u5909\u66f4\u7b87\u6240 &#8230; <a title=\"JSON\u6574\u5f62\uff06\u6bd4\u8f03\u30c4\u30fc\u30eb\uff5c\u5dee\u5206\u3092\u8272\u4ed8\u304d\u3067\u78ba\u8a8d\u3067\u304d\u308b\u7121\u6599\u30c4\u30fc\u30eb\" class=\"read-more\" href=\"https:\/\/tool-laboratory.com\/en\/json-formatter-diff-tool\/\" aria-label=\"Read more about JSON\u6574\u5f62\uff06\u6bd4\u8f03\u30c4\u30fc\u30eb\uff5c\u5dee\u5206\u3092\u8272\u4ed8\u304d\u3067\u78ba\u8a8d\u3067\u304d\u308b\u7121\u6599\u30c4\u30fc\u30eb\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-348","post","type-post","status-publish","format-standard","hentry","category-it-tools"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/comments?post=348"}],"version-history":[{"count":3,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/348\/revisions"}],"predecessor-version":[{"id":353,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/348\/revisions\/353"}],"wp:attachment":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/media?parent=348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/categories?post=348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/tags?post=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}