<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

</head>

<body>

<!--格式化后的json写入的位置-->

<div id="writePlace"></div>

<script>

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

    var formatJson = function (json, options) {

        var reg = null,

                formatted = '',

                pad = 0,

                PADDING = '    ';

        options = options || {};

        options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;

        options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;

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

            json = JSON.stringify(json);

        } else {

            json = JSON.parse(json);

            json = JSON.stringify(json);

        }

        reg = /([\{\}])/g;

        json = json.replace(reg, '\r\n$1\r\n');

        reg = /([\[\]])/g;

        json = json.replace(reg, '\r\n$1\r\n');

        reg = /(\,)/g;

        json = json.replace(reg, '$1\r\n');

        reg = /(\r\n\r\n)/g;

        json = json.replace(reg, '\r\n');

        reg = /\r\n\,/g;

        json = json.replace(reg, ',');

        if (!options.newlineAfterColonIfBeforeBraceOrBracket) {

            reg = /\:\r\n\{/g;

            json = json.replace(reg, ':{');

            reg = /\:\r\n\[/g;

            json = json.replace(reg, ':[');

        }

        if (options.spaceAfterColon) {

            reg = /\:/g;

            json = json.replace(reg, ':');

        }

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

                    var i = 0,

                            indent = 0,

                            padding = '';

                    if (node.match(/\{$/) || node.match(/\[$/)) {

                        indent = 1;

                    } else if (node.match(/\}/) || node.match(/\]/)) {

                        if (pad !== 0) {

                            pad -= 1;

                        }

                    } else {

                        indent = 0;

                    }

                    for (i = 0; i < pad; i++) {

                        padding += PADDING;

                    }

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

                    pad += indent;

                }

        );

        return formatted;

    };

    //引用示例部分

    //(1)创建json格式或者从后台拿到对应的json格式

    var originalJson = {"name": "binginsist", "sex": "男","cc":{"aa":["1","3",{"abdd":"dsafs","safs":"sdfa"}]}, "age": "25"};

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

    var resultJson = formatJson(originalJson);

    //(3)将格式化好后的json写入页面中

    document.getElementById("writePlace").innerHTML = '<pre>' +resultJson + '<pre/>';

</script>

</body>

</html>

原生js格式化json的方法的更多相关文章

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

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

  2. 原生js格式化json工具

    json格式化小工具,原生js编写,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. JS操作JSON的方法总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

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

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

  5. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

  6. js格式化JSON数据

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

  7. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  8. js格式化时间的方法

    方法一:用js格式化时间的方法. Date.prototype.format =function(format) { var o = { "M+" : this.getMonth( ...

  9. js 格式化 json 字符串

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

随机推荐

  1. Linux网络命令必知必会之瑞士军刀 nc(netcat)

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. nc,全名叫 ...

  2. 1090 Highest Price in Supply Chain （25 分)

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...

  3. unity3d读写txt

    http://www.cnblogs.com/sunet/p/3851353.html?utm_source=tuicool 记录一下昨天用到的技术点:基于android平台unity3d读写txt. ...

  4. 計蒜客/小教官(xjb)

    題目鏈接:https://nanti.jisuanke.com/t/366 題意:中文題誒~ 思路: 先通過給出的條件構造一個符合題意的數組(可以是任意一個符合條件的數組,菜雞不會證明: 然後構造的數 ...

  5. springboot2.x 的 RedisCacheManager变化

    springboot2.x 的 RedisCacheManager变化 springboot2.x 的 RedisCacheManager变化 由于最近在学着使用redis做缓存,使用的是spring ...

  6. C 语言实例 - 计算字符串长度

    C 语言实例 - 计算字符串长度 C 语言实例 C 语言实例 计算字符串长度. 实例 - 使用 strlen() #include <stdio.h> #include <strin ...

  7. 解决“每次启动Access2010时都要求配置VS2008”的办法

    我每次启动Access2010时都会要求配置VS2008,这大概是VS2008与office(Access2010)有冲突引起的.这里提供一种解决办法. 依次选择Access2010的文件-选项中-加 ...

  8. Python-7-字典方法

    clear 删除所有字典项 >>> d = {} >>> d['name'] = 'Gumby' >>> d['age'] = 42 >&g ...

  9. jQuery 获取标签属性值的问题

    jquery attr()无法获取属性值问题 css里明明已经设置过了: 可还是获取不了: 求指导.   一定是undefined,attr是用来获得或设置标签属性的,不是用来获得CSS属性的.如果你 ...

  10. Python入门小练习

    Python入门小练习 001 备份文件 Python入门小练习 002 批量下载网页链接中的图片 Python入门小练习 003 利用cookielib模拟登录获取账户信息