<!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. ASP.NET Core MVC 2.x 全面教程_汇总贴

    Reshaper快捷键盘 快速生成属性:prop Ctrl+. ASP.NET Core MVC 2.x 全面教程:https://www.bilibili.com/video/av38392956 ...

  2. 洛谷1303 A*B Problem 解题报告

    洛谷1303 A*B Problem 本题地址:http://www.luogu.org/problem/show?pid=1303 题目描述 求两数的积. 输入输出格式 输入格式: 两个数 输出格式 ...

  3. Ubuntu 下编译libjingle-0.6.14 （转载）

    转自:http://blog.csdn.net/feifei454498130/article/details/8197103 添加依赖库: sudo apt-get install build-es ...

  4. C# 获取汉字的拼音首字母和全拼（含源码）

    C# 获取汉字的拼音首字母 一种是把所有中文字符集合起来组成一个对照表:另一种是依照汉字在Unicode编码表中的排序来确定拼音的首字母.碰到多音字时就以常用的为准(第一种方法中可以自行更改,方法为手 ...

  5. 洛谷 - P1582 - 倒水 - 位运算

    https://www.luogu.org/problemnew/show/P1582 要求用最少的瓶子,那肯定不能有两个一样的瓶子,否则合并更优. 枚举其二进制位,每次加上lowbit,将最后一个1 ...

  6. layui icon样式1到7

    1: 2: 3: 4: 5: 6: 7:

  7. 简单搭建webMagic爬虫步骤

    1.简介 WebMagic是一个简单灵活的Java爬虫框架.基于WebMagic,你可以快速开发出一个高效.易维护的爬虫. 官网:http://webmagic.io/ 中文官网:http://web ...

  8. day01 包 权限修饰符 static final

  9. C【C#公共帮助类】分页逻辑处理类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Comm ...

  10. PostgreSQL-7-数据连接

    1.通过WHERE进行简单连接 SELECT * FROM company3,department  不添加WHERE将会显示所有数据 SELECT * FROM company3,departmen ...