<!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. UVaLive 6853 Concert Tour (DP)

    题意:给定 n 个城市,m 个月,表示要在这 n 个城市连续 m 个月开演唱会,然后给定每个月在每个城市开演唱会能获得的利润,然后就是演唱会在不同城市之间调动所要的费用, 问你,怎么安排这 n 个演唱 ...

  2. Junit使用注意点

    注意点 1. 使用了@BeforeClass后@Ignore将会失效

  3. Telnet 命令格式

    Telnet host 端口 如:Telnet 127.0.0.1 11211 执行命令进入后 ctr +] ,打开回显,并回车即可

  4. MongoDb 创建用户以及其他版本造成的一些问题

    问题:require auth data to have schema version 3 but found 1 这是可以查看如下链接: http://stackoverflow.com/quest ...

  5. rsync 同步的艺术

    rsync是类unix系统下的数据镜像备份工具,可以提供快速的增量文件传输. rsync 也可用于本机传输,如: # rsync -v mysql--linux-glibc2.-x86_64.tar. ...

  6. 48个国际音标-/iː/

    /iː/ 是单元音前元音,是个长元音. ***ee,ea,ie,ei*** 1)张开你的嘴巴,好像你在微笑,露出你的牙齿,嘴唇向两边伸开,成扁平形. 2)将舌前部向硬腭尽量抬起.舌头轻微接触下齿背部. ...

  7. javascript的学习笔记---复习及学习

    1.javascript包含三大部分(BOM,DOM,ECMAscript) ECMAscript:规定js的语法规范 BOM:Document Object Model 给我们提供了一套完整的操作页 ...

  8. day01 继承

  9. JS 两个数组合并

    让我们先考虑下面这情况: 代码如下: var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];var b = [ "foo", "bar", ...

  10. flask_之参数传递

    参数篇 request接收数据 request对象 method:当前请求方法(POST,GET等) url:当前链接地址 path:当前链接的路径 environ:潜在的WSGI环境 headers ...