<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
</head>
<body>
<pre id="pre">
</pre>
<pre id="pre2">
</pre>
</body>
<script type="text/javascript">
<!--
/**
json在线格式化方法1
**/
function getFormatJsonStrFromString(jsonStr){
var res="";
for(var i=0,j=0,k=0,ii,ele;i<jsonStr.length;i++)
{//k:缩进，j:""个数
ele=jsonStr.charAt(i);
if(j%2==0&&ele=="}")
{
k--;
for(ii=0;ii<k;ii++) ele=" "+ele;
ele="\n"+ele;
}
else if(j%2==0&&ele=="{")
{
ele+="\n";
k++;
for(ii=0;ii<k;ii++) ele+=" ";
}
else if(j%2==0&&ele==",")
{
ele+="\n";
for(ii=0;ii<k;ii++) ele+=" ";
}
else if(ele=="\"") j++;
res+=ele;
}
return res;
}
/**
json在线格式化方法2
**/
function jsonformat(txt,compress/*是否为压缩模式*/){/* 格式化JSON源码(对象转换为JSON文本) */
var indentChar = ' ';
if(/^\s*$/.test(txt)){
alert('数据为空,无法格式化! ');
return;
}
try{
var data= null;
if(typeof txt == 'object'){
data = txt;
}else{
data=eval('('+txt+')');}
}
catch(e){
alert('数据源语法错误,格式化失败! 错误信息: '+e.description,'err');
return;
};
var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0;
var notify=function(name,value,isLast,indent/*缩进*/,formObj){
nodeCount++;/*节点计数*/
for (var i=0,tab='';i<indent;i++ )tab+=indentChar;/* 缩进HTML */
tab=compress?'':tab;/*压缩模式忽略缩进*/
maxDepth=++indent;/*缩进递增并记录*/
if(value&&value.constructor==Array){/*处理数组*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/
for (var i=0;i<value.length;i++)
notify(i,value[i],i==value.length-1,indent,false);
draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/
}else if(value&&typeof value=='object'){/*处理对象*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/
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)));/*缩进'}'换行,若非尾元素则添加逗号*/
}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);
return draw.join('');
}
var abcJSON = {name:"name",age:12}
abc = JSON.stringify(abcJSON);
document.getElementById("pre").innerHTML= getFormatJsonStrFromString(abc);
document.getElementById("pre2").innerHTML= jsonformat(abcJSON,false);
//-->
</script>
</html>
分享到：
相关推荐
本主题将详细介绍如何在前端实现JSON数据的格式化展示，以及支持折叠和展开的功能。 首先，理解JSON的基本结构是至关重要的。JSON由键值对组成，键必须是字符串，用双引号包围，而值可以是各种类型，如字符串、数字...
当我们谈到“delphi_json解析格式化源码”，我们关注的是如何在Delphi环境中处理JSON数据，包括解析JSON字符串为程序可操作的对象，以及将这些对象格式化回JSON文本。 在Delphi中，处理JSON主要依赖于VCL库中的`...
7. **API测试**：部分工具集成了API接口调用功能，允许用户直接输入API URL，获取返回的JSON数据并进行格式化展示。 描述中提到的资源包括HTML网页文件和JavaScript文件，这意味着这是一个基于浏览器的JSON格式化...
JSON格式化查看器则是用来美化和清晰地展示JSON数据的工具，帮助开发者更方便地查看和理解JSON结构。 “Json格式化查看器”是一款桌面应用程序，专门针对JSON数据的查看和管理。它具有以下特点： 1. **折叠与展开*...
"Json和Xml离线格式化工具"是针对这两种格式的解析和美化工具，可以在没有网络连接的情况下对JSON和XML数据进行格式化，使得数据更易于阅读和理解。 JSON格式化工具通常包含以下功能： 1. **代码高亮**：为键值对和...
描述中提到的“最好的开发调试浏览器chrome，还需要一个json数据格式化展示插件”，暗示了Chrome浏览器虽然在开发者工具方面表现出色，但在默认状态下并不提供内置的JSON格式化功能。开发者通常需要安装额外的插件，...
JsonView通常是一款能够集成在浏览器如Firefox或Chrome中的扩展程序，它可以将网页中返回的JSON数据以树形结构展示，使得用户可以直接在浏览器中查看和交互JSON数据，而无需手动复制粘贴到专门的格式化工具中。...
在描述中提到的“采用光标事件格式化展示”，意味着在页面上，当用户通过鼠标光标选中或点击某部分JSON数据时，会以某种方式（如高亮、折叠展开等）进行格式化显示，以便于查看和对比接口文档。 要实现这样的功能，...
此外，如果需要向团队成员或者非技术人员展示数据，格式化的JSON无疑会更易于理解。 这款工具可能还具备其他功能，如搜索、复制、粘贴、导出等，进一步提升开发效率。搜索功能可以帮助用户快速定位特定的键或值；...
3. **折叠/展开**：用户可以方便地折叠或展开JSON对象和数组，以关注关键部分，减少视觉干扰。 4. **搜索功能**：内置的搜索功能允许用户快速查找特定的键或值，这对于大型JSON文档来说极其有用。 5. **定制设置**...
本篇文章将深入探讨如何在Flask应用中结合Bootstrap来展示和格式化JSON数据。 首先，确保已安装了Flask、Bootstrap和相关的依赖。可以使用以下命令安装： ```bash pip install flask flask-bootstrap ``` 接下来...
然而，当JSON对象变得庞大或者复杂时，原始的未格式化的JSON字符串可能会显得混乱不堪，不易于人类阅读和理解。这就是Json格式化工具发挥作用的地方。 Json格式化工具是专门用来解决这个问题的实用工具。它能够将...
这个工具可以帮助开发者快速查看和理解嵌套复杂的JSON对象，而无需手动进行格式转换。 “http://www.jb51.net/softs/541785.html”是一个链接，指向了JsonView的下载页面。JsonView是一个浏览器扩展，通常适用于...
1. **自动格式化**：输入或粘贴未经格式化的JSON字符串，JsonViewer会自动将其转换为有缩进和换行的格式，使数据结构一目了然。 2. **折叠/展开节点**：用户可以方便地折叠或展开JSON对象和数组，以查看感兴趣的特定...
JSONVue 是一款专为格式化 JSON 数据设计的插件，尤其在浏览器环境下使用，能够帮助用户将杂乱无章的 JSON 对象转换成整洁、易读的格式，从而提升开发和调试过程中的效率。JSON（JavaScript Object Notation）是一种...
此外，JSONView还提供了一个搜索功能，你可以通过关键词快速查找特定的JSON对象或值。 无论是JSON-Handle还是JSONView，安装都非常简单，只需在浏览器的扩展商店搜索对应插件，点击添加到浏览器即可。这两款插件在...
4. **搜索与过滤**：快速查找特定的键或值，或根据条件过滤JSON对象。 5. **复制与导出**：方便地复制格式化的JSON到剪贴板，或者将其保存为文件。 在日常开发中，理解并熟练使用这类工具能够帮助我们更好地管理和...
总结，JSON日期格式化涉及理解JSON的非标准化日期表示，使用JavaScript内置或外部工具进行日期解析和格式化。通过选择合适的API或库，我们可以根据需求灵活地处理JSON中的日期字符串，使其符合我们的展示或存储需求...
总结来说，"JsonView"作为一款强大的JSON解析和格式化工具，能够极大地提升开发人员处理JSON数据的效率，无论是对原始JSON字符串的格式化，还是以树形结构展示数据，都为理解和分析JSON数据带来了便利。在日常工作中...