json格式化小工具，原生js编写，直接上代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>原生js格式化json的方法</title>

     <script>

     //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好

     var formatJson = function (json) {

         var formatted = '',     //转换后的json字符串

             padIdx = 0,         //换行后是否增减PADDING的标识

             PADDING = '    ';   //4个空格符

         /**

          * 将对象转化为string

          */

         if (typeof json !== 'string') {

             json = JSON.stringify(json);

         }

         /**

          *利用正则类似将{'name':'ccy','age':18,'info':['address':'wuhan','interest':'playCards']}

          *---> \r\n{\r\n'name':'ccy',\r\n'age':18,\r\n

          *'info':\r\n[\r\n'address':'wuhan',\r\n'interest':'playCards'\r\n]\r\n}\r\n

          */

         json = json.replace(/([\{\}])/g, '\r\n$1\r\n')

                     .replace(/([\[\]])/g, '\r\n$1\r\n')

                     .replace(/(\,)/g, '$1\r\n')

                     .replace(/(\r\n\r\n)/g, '\r\n')

                     .replace(/\r\n\,/g, ',');

         /**

          * 根据split生成数据进行遍历，一行行判断是否增减PADDING

          */

        (json.split('\r\n')).forEach(function (node, index) {

             var indent = 0,

                 padding = '';

             if (node.match(/\{$/) || node.match(/\[$/)) indent = 1;

             else if (node.match(/\}/) || node.match(/\]/))  padIdx = padIdx !== 0 ? --padIdx : padIdx;

             else    indent = 0;

             for (var i = 0; i < padIdx; i++)    padding += PADDING;

             formatted += padding + node + '\r\n';

             padIdx += indent;

             console.log('index:'+index+',indent:'+indent+',padIdx:'+padIdx+',node-->'+node);

         });

         return formatted;

     };

     //引用示例部分

     //var originalJson = {'name':'ccy','age':18,'info':[{'address':'wuhan'},{'interest':'playCards'}]};

     var showJson = function(){

         var originalJson = document.getElementById('inputJson').value;

         console.log(originalJson);

         //(2)调用formatJson函数,将json格式进行格式化

         var resultJson = formatJson(originalJson);

         document.getElementById('out').innerHTML = resultJson;

     }

 </script>

 </head>

 <body>

     <span style="position:absolute;left:0px;top:20px;font-size: 20px;font-family: '微软雅黑';color: #2F4F4F;">输入json</span>

     <textarea style="position:absolute;left:0px;top:80px;width:40%;height:80%;" cols="50" rows="20" id="inputJson"></textarea>

     <span style="position:absolute;left:55%;top:20px;font-size: 20px;font-family: '微软雅黑';color: #2F4F4F;">查看结果</span>

     <textarea style="position:absolute;left:55%;top:80px;width:40%;height:80%;display: " id="out"></textarea>

     <div style="position:absolute;left:45%;top:12%;width:6%;height:4%;">

     <input type="button" value="提交" onclick="showJson();">

     </div>

 </body>

 </html>

原生js格式化json工具的更多相关文章

  1. 原生js格式化json的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 原生js格式化json和格式化xml的方法

    在工作中一直看各位前辈的博客解决各种问题,对我的帮助很大,非常感谢! 之前一直比较忙没有写博客,终于过年有了点空闲时间,可以把自己积累的东西分享下,笔记中的部分函数不是自己写的,都是工作中一点点积累的 ...

  3. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  4. js格式化JSON数据

    前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...

  5. js 格式化 json 字符串

    1.JSON.stringify的三个参数 var json = {"@odata.context":"$metadata#AddTableOne_466281s&quo ...

  6. js格式化json字符串和json对象

    1,格式化json对象 var json = {"@odata.context":"$metadata#AddTableOne_466281s","v ...

  7. 原生JS：JSON对象详解

    JSON对象 支持到IE8,旧版的IE需要Polyfill 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web ...

  8. js格式化日期工具类

    就是一个工具类  开箱即用 传进一个指定的参数,格式化 //将时间戳格式化 function getMyDate(time){ if(typeof(time)=="undefined&quo ...

  9. JS格式化JSON后的日期

    序列化后日期变成了 /Date(1494524134000+0800)\ 这种格式 不能正常显示了 但也不能为了这个吧所有服务的DateTime字段都改成String类型 于是找了一个JS的扩展方法来 ...

随机推荐

  1. [C#.net]将null值插入SQL Server的Datetime

    之前处理SQL Server可以为空时间字段总是设置时间的最小值和最大值,今天才发现也可以把null用C#的代码插入到sql内 使用可空的值类型,代码如下 public DateTime? Servi ...

  2. Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别

    <divid="test1"> <a href="http://www.hujuntao.com/">设计蜂巢</a> &l ...

  3. Python10/24--组合/封装/property装饰器/多态

    组合的应用: 1. 什么是组合 一个对象的属性是来自于另外一个类的对象,称之为组合 2. 为何用组合 组合也是用来解决类与类代码冗余的问题 3. 如何用组合 '''class Foo: aaa=111 ...

  4. Jersey RESTful WebService框架学习(八)文件下载防乱码

    最近在做下载时候  不同浏览器下载的文件一直出现乱码,不知道怎么设置文件的编码,百度许久,找到一个解决办法如下 /** * 文件下载 * @param request * @return */ @GE ...

  5. Codeforces Round #541--1131F. Asya And Kittens(基础并查集)

    https://codeforces.com/contest/1131/problem/F #include<bits/stdc++.h> using namespace std; int ...

  6. 解决eclipse部署maven时，src/main/resources里面配置文件加载不到webapp下classes路径下的问题

    解决eclipse部署maven时,src/main/resources里面配置文件加载不到webapp下classes路径下的问题. 有时候是src/main/resources下面的,有时候是sr ...

  7. Beta阶段冲刺集合贴

    第零篇准备博客:https://www.cnblogs.com/coolgirls/p/9066239.html 第一篇冲刺博客:https://www.cnblogs.com/coolgirls/p ...

  8. 定时任务 Wpf.Quartz.Demo.5 (升级版）

    老规矩:先把全部源码上传,见本文底部. 相对于Demo3的区别,就是能自动加载继承了IJob的任务,任务主体程序分离. 在exe执行文件的同级下建一个MyJobs的文件夹,每次会自动扫描该文件夹下的J ...

  9. WPF中TreeView的+-号和连线style的一种实现

    最近又开始跟WPF打交道,项目里面用到了TreeView这个控件.然后需要有一个连线的外观就像是这样 二话不说,百度了一下,找到一个实现, 通道. 把代码拷贝到项目里面,跑了一下,看上去还不错.但是这 ...

  10. 开发微信小程序——古龙小说阅读器

    概述 由于面试的关系接触了一下微信小程序,花了2晚上开发了一个带书签功能的古龙小说阅读器,并且已经提交审核等待发布.这篇博文记录了我的开发过程和对微信小程序的看法,供以后开发时参考,相信对其他人也有用 ...