jsontool/json-parse.html at master · accevolve/jsontool · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>JSON 解析 - 在线JSON解析工具 | JsonTool.cn</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="description" content="免费在线 JSON 解析工具，支持 JSON 字符串解析、格式化展示、语法校验、错误定位。粘贴即用，无需安装，是开发者日常调试 JSON 数据的必备工具。" />
  <meta name="keywords" content="json解析,json在线解析,json解析工具,json解析器,在线json解析,json字符串解析,json数据解析,json在线解析工具,解析json" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="applicable-device" content="pc,mobile" />
  <meta name="baidu-site-verification" content="code-K26efHPQnS" />
  <link rel="canonical" href="https://jsontool.cn/json-parse.html" />

  <meta property="og:type" content="website" />
  <meta property="og:title" content="JSON 解析 - 在线JSON解析工具 | JsonTool.cn" />
  <meta property="og:description" content="免费在线 JSON 解析工具，粘贴即用，支持格式化、校验、错误定位。" />
  <meta property="og:url" content="https://jsontool.cn/json-parse.html" />
  <meta property="og:site_name" content="JsonTool.cn" />
  <meta property="og:locale" content="zh_CN" />

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "JSON 解析工具",
    "url": "https://jsontool.cn/json-parse.html",
    "description": "免费在线 JSON 解析、校验、格式化工具",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "All",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "CNY"
    }
  }
  </script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "什么是 JSON 解析？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "JSON 解析是将 JSON 格式的字符串转换为程序可操作的数据结构（如 JavaScript 对象、Python 字典等）的过程。在线 JSON 解析工具可以帮助你将压缩的 JSON 字符串解析为格式化、带缩进的可读结构，同时检查语法是否正确。"
        }
      },
      {
        "@type": "Question",
        "name": "如何在线解析 JSON 数据？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "使用 JsonTool.cn 在线 JSON 解析工具，只需将 JSON 字符串粘贴到左侧输入框，工具会自动解析并在右侧显示格式化结果。如果 JSON 存在语法错误，会用红色文字标注错误位置和原因。"
        }
      },
      {
        "@type": "Question",
        "name": "JSON 解析失败的常见原因有哪些？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "常见原因包括：1) 缺少引号或使用了单引号（JSON 规范要求双引号）；2) 末尾多余的逗号；3) 使用了注释（JSON 不支持注释）；4) 特殊字符未转义；5) 键名未加引号；6) 数据编码格式不正确。"
        }
      },
      {
        "@type": "Question",
        "name": "JSON 解析和 JSON 格式化有什么区别？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "JSON 解析侧重于将 JSON 字符串转换为结构化数据，验证其语法正确性；JSON 格式化则侧重于将数据以美观的缩进排版呈现。在实际使用中，在线工具通常同时完成解析和格式化，即先验证语法再美化展示。"
        }
      }
    ]
  }
  </script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {"@type": "ListItem", "position": 1, "name": "首页", "item": "https://jsontool.cn/"},
      {"@type": "ListItem", "position": 2, "name": "JSON 解析", "item": "https://jsontool.cn/json-parse.html"}
    ]
  }
  </script>

  <link rel="shortcut icon" href="/img/favicon.ico" />
  <link rel="bookmark" href="/img/favicon.ico" type="image/x-icon" />

  <link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" />
  <link rel="stylesheet" type="text/css" href="css/base.v3.css" />

  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.min.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.min.js"></script>

  <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
  <script>LA.init({id:"3QI5NUMVM8jytlw7",ck:"3QI5NUMVM8jytlw7"})</script>
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; }
      else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>
</head>

<body style="overflow:hidden;">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/" text="Jsontool.cn">Jsontool.cn</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
          <li><a href="/">首页</a></li>
          <li><a href="/json-format.html">格式优化</a></li>
          <li><a href="/json-parse.html" class="active">JSON解析</a></li>
          <li><a href="/courses/">教程</a></li>
          <li><a href="mailto:jsontool@163.com">投诉/建议</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <main class="row-fluid">
    <div class="col-md-5" style="padding:0;">
      <textarea id="json-src" placeholder="在此粘贴需要解析的 JSON 字符串..." class="form-control" style="padding:20px;border:0;border-right:solid 1px #ddd;border-radius:0;resize:none;outline:none;height:calc(100vh - 90px);">{"code":200,"message":"success","data":{"users":[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]}}</textarea>
    </div>
    <div class="col-md-7" style="padding:0;">
      <div style="padding:7px;font-size:16px;border-bottom:solid 1px #ddd;" class="navi">
        <a href="#" class="zip" title="压缩" data-placement="bottom"><i class="fa fa-compress"></i></a>
        <a href="#" class="xml" title="转XML" data-placement="bottom"><i class="fa fa-file-excel-o"></i></a>
        <a href="#" class="copy" title="复制" data-clipboard-target="#json-target" data-placement="bottom"><i class="fa fa-copy"></i></a>
        <a href="#" class="clear" title="清空" data-placement="bottom"><i class="fa fa-eraser"></i></a>
      </div>
      <div id="json-target" style="padding:20px;border-right:solid 1px #ddd;border-radius:0;resize:none;overflow-y:scroll;outline:none;height:calc(100vh - 135px);"></div>
    </div>
  </main>

<script defer src="js/jquery.json.js"></script>
<script defer src="js/jquery.xml2json.js"></script>
<script defer src="js/jquery.json2xml.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var current_json = '';
  var current_json_str = '';
  var xml_flag = false;
  var zip_flag = false;
  function init(){
    xml_flag = false;
    zip_flag = false;
    $('.xml').attr('style','color:#999;');
    $('.zip').attr('style','color:#999;');
  }
  $('#json-src').keyup(function(){
    init();
    var content = $.trim($(this).val());
    var result = '';
    if (content!='') {
      if (content.substr(0,1) === '<' && content.substr(-1,1) === '>') {
        try{
          var json_obj = $.xml2json(content);
          content = JSON.stringify(json_obj);
        }catch(e){
          result = '解析错误：<span style="color:#f1592a;font-weight:bold;">' + e.message + '</span>';
          current_json_str = result;
          $('#json-target').html(result);
          return false;
        }
      }
      try{
        current_json = jsonlint.parse(content);
        current_json_str = JSON.stringify(current_json);
        result = new JSONFormat(content,4).toString();
      }catch(e){
        result = '<span style="color:#f1592a;font-weight:bold;">' + e + '</span>';
        current_json_str = result;
      }
      $('#json-target').html(result);
    }else{
      $('#json-target').html('');
    }
  });
  $('.zip').click(function(){
    if (zip_flag) { $('#json-src').keyup(); }
    else { $('#json-target').html(current_json_str); zip_flag = true; $(this).attr('style','color:#15b374;'); }
  });
  $('.xml').click(function(){
    if (xml_flag) { $('#json-src').keyup(); }
    else {
      var result = $.json2xml(current_json);
      $('#json-target').html('<textarea style="width:100%;height:100%;border:0;resize:none;">'+result+'</textarea>');
      xml_flag = true; $(this).attr('style','color:#15b374;');
    }
  });
  var clipboard = new ClipboardJS('.copy');
  clipboard.on('success', function(e) { toastr.options.timeOut = 30; toastr.success("已复制"); e.clearSelection(); });
  clipboard.on('error', function(e) { toastr.options.timeOut = 30; toastr.error("复制失败"); });
  $('.clear').click(function(){ $('#json-src').val(''); $('#json-target').html(''); });
  $('#json-src').keyup();
});
</script>

<section class="seo-content" style="padding:30px 40px 60px;background:#f9f9f9;border-top:1px solid #eee;font-size:14px;color:#666;line-height:1.8;">
  <h1 style="font-size:22px;color:#333;margin-top:0;">JSON 在线解析工具</h1>
  <p>JsonTool.cn 提供免费的 <strong>JSON 在线解析</strong>服务。将 JSON 字符串粘贴到输入框，工具会自动完成 <strong>JSON 解析</strong>，以结构化、带语法高亮的方式展示解析结果。支持实时校验，错误位置精确提示。</p>

  <h2 style="font-size:17px;color:#333;">JSON 解析的基本原理</h2>
  <p>JSON（JavaScript Object Notation）解析是指将符合 JSON 规范的文本字符串，转换为编程语言中的数据结构。在 JavaScript 中使用 <code>JSON.parse()</code> 方法，在 Python 中使用 <code>json.loads()</code> 方法。本工具基于 JSONLint 标准进行严格的语法校验和解析，确保数据格式完全符合 <a href="https://www.json.org/" rel="nofollow" style="color:#15b374;">JSON 官方规范</a>。</p>

  <h2 style="font-size:17px;color:#333;">JSON 解析常见问题</h2>
  <ul style="padding-left:20px;">
    <li><strong>键名必须用双引号</strong>：<code>{"name": "value"}</code> 正确，<code>{name: "value"}</code> 错误</li>
    <li><strong>不支持尾部逗号</strong>：<code>{"a":1, "b":2,}</code> 中最后的逗号会导致解析失败</li>
    <li><strong>不支持注释</strong>：JSON 标准不允许 <code>//</code> 或 <code>/* */</code> 注释</li>
    <li><strong>字符串必须用双引号</strong>：单引号 <code>'value'</code> 不符合 JSON 规范</li>
    <li><strong>特殊字符需转义</strong>：换行符、制表符等需使用 <code>\n</code>、<code>\t</code> 表示</li>
  </ul>

  <h2 style="font-size:17px;color:#333;">为什么选择 JsonTool.cn 解析 JSON？</h2>
  <ul style="padding-left:20px;">
    <li>无需注册，打开即用，完全免费</li>
    <li>基于 JSONLint 标准校验，解析结果准确可靠</li>
    <li>实时解析，输入即出结果，无需点击按钮</li>
    <li>支持 JSON 压缩、JSON 转 XML 等附加功能</li>
    <li>数据在浏览器本地处理，不上传服务器，安全可靠</li>
  </ul>

  <h2 style="font-size:17px;color:#333;">相关工具与教程</h2>
  <p>了解更多 JSON 知识：<a href="/courses/beginner/json-intro.html" style="color:#15b374;">JSON 是什么</a> · <a href="/courses/beginner/json-syntax.html" style="color:#15b374;">JSON 语法基础</a> · <a href="/courses/beginner/json-parse-error.html" style="color:#15b374;">JSON 解析错误处理</a> · <a href="/json-format.html" style="color:#15b374;">JSON 格式优化</a> · <a href="/" style="color:#15b374;">JSON 在线工具首页</a></p>
</section>

<footer class="fixed_footer">
  <div id="copyright">
    &copy; 2021<script>new Date().getFullYear()>2021&&document.write("-"+new Date().getFullYear());</script> <a href="/">JsonTool.cn</a>, All rights reserved.
  </div>
</footer>
</body>
</html>