<!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. html和xml的区别

    一.HTML HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言. 二.XML XML即ExtentsibleMarkup Language(可扩展标记语 ...

  2. IntelliJ IDEA的自动提示貌似是区分大小写的，首字母小写的话，怎么都提示不出来。

    IntelliJ IDEA的自动提示貌似是区分大小写的,首字母小写的话,怎么都提示不出来. File>Settings>editor >general >code comple ...

  3. java读取properties文件的配置信息

    项目开发中,我们一般来向 application.properties 文件中放一些全局配置变量,以便程序中读取使用,本篇内容来演示从properties配置文件中读取键值. 当然,我们不一定写入 a ...

  4. [Xcode 实际操作]八、网络与多线程-(17)使用网址会话对象URLSession向远程服务器上传图片

    目录:[Swift]Xcode实际操作 本文将演示如何通过网址会话对象URLSession向远程服务器上传图片. 网址会话对象URLSession具有在后台上传和下载.暂停和恢复网络操作.丰富的代理模 ...

  5. 用EnumSet代替位域

    用EnumSet代替位域   如果一个枚举类型的元素主要用在集合中,一般使用int枚举模式,将2的不同倍数赋予每个常量: // Bit field enumeration constants - OB ...

  6. 笔记-JavaWeb学习之旅9

    XML Extensible Markup Language 可扩展标记语言 功能:配置文件,在网络中传输 基本语法 1.xml文档的后缀名.xml 2.xml第一行必须定义为文档声明 3.xml文档 ...

  7. Maven - settings.xml里的offline节点的作用

    场景 某天我在本地修改了某个子项目的代码,并进行了打包:mvn clean install -DskipTests,接着我运行父项目却发现自己刚刚的改动并没有生效,或者说,我刚刚打包好的子项目变回了打 ...

  8. java isAssignableFrom instanceof 小结 专题

    一句话总结: isAssignableFrom()方法是从类继承的角度去判断,instanceof()方法是从实例继承的角度去判断. public native boolean isAssignabl ...

  9. C#打开office文件,pdf文件和视频文件

    打开office文件 1 需要从网站下载dsoframer.ocx文件 2 把dsoframer.ocx文件复制到c:\windows\system32目录下 开始->运行->regsvr ...

  10. nodejs 快要变成爬虫界的王者

    nodejs 快要变成爬虫界的王者 爬虫这东西是很多数据采集必须要的东西. 但是现在随着网页不断发展,已经出现了出单纯的网页,到 ajax 网页, 再到 spa , 再到 websocket 应用,一 ...