<!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. Laravel中的模型的创建

    <?phpnamespace App; use Illuminate\Database\Eloquent\Model; class Admin extends Model{ //指定表名 pro ...

  2. python 三元表达式 列表推导式，生成器表达式。递归，匿名函数， 内置函数

    三元表达式 三元表达式仅应用于: 1.条件成立返回一个值 2.条件不成立返回一个值 res = x if x>y else y print(res) name= input("姓名&g ...

  3. UVA - 11624 Fire! 双向BFS追击问题

    Fire! Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the owner of ...

  4. [WIP]C语言 realloc的坑

    创建: 2019/01/07 题外话,不知不觉又一年过去了,2019也要好好努力. 回到主题,在用动态循环数组实现queue的时候, 由于realloc的原因出现了一些莫名其妙的错误. 先开个题,晚点 ...

  5. HDU 3729【二分匹配】

    题意: 给出n个同学的排名,代表每个排名在哪个区间,要求保证最多人说的是实话,并在此前提下求一个说真话人最大字典序. 思路: 最后感觉就是点去填区间,点和区间建个边,然后跑个二分图,然后sort一发. ...

  6. Unity3D研究院之游戏对象的访问绘制线与绘制面详解（十七）

    一眨眼学习Unity3D 也有一段时间了,基本已经拿下了这套游戏引擎,回过头来想想以前写的RPG 游戏引擎,越来越发现以前写的就是垃圾.人果然是要不断学习与不断进步,好好学习,天天向上.哇咔咔- 加油 ...

  7. [Xcode 实际操作]八、网络与多线程-(12)使用异步Post方式查询IP地址信息

    目录:[Swift]Xcode实际操作 本文将演示如何通过Post请求,异步获取IP地址信息. 异步请求与同步请求相比,不会阻塞程序的主线程,而会建立一个新的线程. 在项目导航区,打开视图控制器的代码 ...

  8. iOS图标去掉阴影和反光

    在ios开发时, 程序的图标会被apple进行美化, 自动圆角, 加上阴影和反光效果: 如果有时候不想要阴影和反光,可以这样做: 在Info.plist中 添加一个Icon already inclu ...

  9. luoguP4242树上的毒瘤

    传送门 模板集合吧,除了码农,没啥难的... 和bzoj2243:[SDOI2011]染色十分相像,但是多了点集和查询的区别 然后点集显然可以看出是虚树问题,查询可以用点分治\(O(nlogn)\), ...

  10. 530 Minimum Absolute Difference in BST 二叉搜索树的最小绝对差

    给定一个所有节点为非负值的二叉搜索树,求树中任意两节点的差的绝对值的最小值.示例 :输入:   1    \     3    /   2输出:1解释:最小绝对差为1,其中 2 和 1 的差的绝对值为 ...