缘由

为什么博客园的markdown解析出问题了啊?好奇怪啊!

一直以来在编码规范界有2大争论不休的话题,一个是关于是用空格缩进还是tab缩进的问题,一个是花括号是否换行的问题,笔者是tab缩进花括号换行的坚决拥护者,不解释,免得挑起争论。

可惜的是,几乎找遍全网都找不到一个支持tab缩进花括号换行的json格式化工具(IDE除外),包括Chrome在内,几乎所有浏览器内置的代码格式化都是空格缩进花括号不换行的,每次看着花括号放在右上角像一个驼背的老婆婆的样子,患有严重强迫症的我实在不爽,so,只能自己写一个了。

代码

代码不多,一共32行,挂在jQuery下面,如果不想要jQuery,单独把formatJSON写成一个方法就是了。

$.extend(
{
/**
* 格式化一段JSON字符串,支持解析非标准JSON
* 不同于绝大多数格式化工具,本方法支持设置缩进方式以及左大括号是否换行
* @start 2016-08-24
* @param {Object} json 要格式化的json串
* @param {Object} indent 缩进方式,可以是若干个空格和tab,默认tab缩进,如 2个空格:" "、4个空格:" "、tab:" "
* @param {Object} leftBracesInSameLine 左大括号是否保持在同一行,默认 false
*/
formatJSON: function (json, indent, leftBracesInSameLine)
{
function getIndentStr(level)
{
var str = '';
for(var i=0; i<level; i++) str += (indent || ' ');
return str;
}
function format(obj, level)
{
level = level == undefined ? 0 : level;
var result = '';
if(typeof obj == 'object' && obj != null) // 如果是object或者array
{
var isArray = obj instanceof Array, idx = 0;
result += (isArray ? '[' : '{') + '\n';
for(var i in obj)
{
result += (idx++ > 0 ? ',\n' : ''); // 如果不是数组或对象的第一个内容,追加逗号
var nextIsObj = (typeof obj[i] == 'object' && obj[i] != null), indentStr = getIndentStr(level+1);
result += (isArray && nextIsObj) ? '' : indentStr; // 如果当前是数组并且子项是对象,无需缩进
result += isArray ? '' : ('"' + i + '": ' + (nextIsObj && !leftBracesInSameLine ? '\n' : '') );
result += (!nextIsObj || (nextIsObj && leftBracesInSameLine && !isArray)) ? '' : indentStr;
result += format(obj[i], level+1); // 递归调用
}
result += '\n' + getIndentStr(level) + (isArray ? ']' : '}') + '';
}
else // 如果是 null、number、boolean、string
{
var quot = typeof obj == 'string' ? '"' : '';//是否是字符串
result += (quot + obj + quot + '');
}
return result;
}
return format(eval('(' + json + ')')); // 使用eval的好处是可以解析非标准JSON
}
});

效果

为了方便演示,简单写了一个测试页面,里面没啥东西,别见笑:

http://tool.liuxianan.com

(以下是以前写的一个json高亮的效果图,不是本文的效果图,别误会了,哈哈)

有强迫症的我只能自己写一个json格式化工具的更多相关文章

  1. 手写一个json格式化 api

    最近写的一个东西需要对json字符串进行格式化然后显示在网页上面. 我就想去网上找找有没有这样的api可以直接调用.百度 json api ,搜索结果都是那种只能在网页上进行校验的工具,没有api. ...

  2. java 写一个JSON解析的工具类

    上面是一个标准的json的响应内容截图,第一个红圈”per_page”是一个json对象,我们可以根据”per_page”来找到对应值是3,而第二个红圈“data”是一个JSON数组,而不是对象,不能 ...

  3. 我为什么要再给lua写一个json模块

    最近要给自己编写的服务器加上json解析模块.根据我当前的项目,可以预测服务器中使用json的地方: 通信.由于与客户端通信使用google protocolbuffer,仅在与SDK通信中使用jso ...

  4. 一起写一个JSON解析器

    [本篇博文会介绍JSON解析的原理与实现,并一步一步写出来一个简单但实用的JSON解析器,项目地址:SimpleJSON.希望通过这篇博文,能让我们以后与JSON打交道时更加得心应手.由于个人水平有限 ...

  5. 自己做了一个json格式化工具,亲测可以使用

    随笔背景:在向后台请求数据之后,我们常常会拿到一串json格式.此时,为了方便查看key-value,程序猿们常常使用一些在线json格式化工具或者是类似于notepadd++这样的工具进行转换.今天 ...

  6. 用c#写一个json的万能解析器

    CommonJsonModel .cs /// <summary> /// 万能JSON解析器 /// </summary> public class CommonJsonMo ...

  7. 改变滚动条的原始样式: chrome 可以改变, IE只能变相关颜色,firfox好像也不好改。最好是自己写一个或是用插件

    相关作者链接地址: https://www.lyblog.net/detail/314.html 问题: 1.我在项目中遇到的问题: 在设置了::-webkit-scrollbar 后,滚动条不见了! ...

  8. 深入浅出React Native 3: 从零开始写一个Hello World

    这是深入浅出React Native的第三篇文章. 1. 环境配置 2. 我的第一个应用 将index.ios.js中的代码全部删掉,为什么要删掉呢?因为我们准备从零开始写一个应用~学习技术最好的方式 ...

  9. 如何写一个HttpClient[1]——URI的处理

    如何写一个HttpClient[1]--URI的处理 在翻阅apache的http client的代码的时候,看到org.apache.http.client.utils.URIBuilder.jav ...

随机推荐

  1. CSS布局技巧 -- 内凹圆角

    圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...

  2. Hadoop2.6.0的FileInputFormat的任务切分原理分析(即如何控制FileInputFormat的map任务数量)

    前言 首先确保已经搭建好Hadoop集群环境,可以参考<Linux下Hadoop集群环境的搭建>一文的内容.我在测试mapreduce任务时,发现相比于使用Job.setNumReduce ...

  3. 数据库表映射到MyEclipse的实体对象

    第一步:新增一个项目 第二步:在项目中新增一个包 第三步:将项目变为SSH (1)加Hibernate 选中项目点击右键,选择MyEclipse→project Facets→ 选择Hiberbate ...

  4. zabbix微信告警(虚拟机脚本测试成功,zabbix上收不到信息)

    前言: 使用zabbix直接运行脚本又可以正常接收.但是登录zabbix  web界面,测试!  动作显示已送达,但是微信并没有收到信息! 解决: 添加脚本参数,因为不添加脚本参数,调用不了你这个脚本 ...

  5. VMware克隆虚拟机,克隆机网卡启动不了解决方案

    Shutting down loopback interface: [ OK ] Bringing up loopback interface: [ OK ] Bringing up interfac ...

  6. 天气预报API(二):全球城市、景点代码列表(“旧编码”)

    说明 2016-12-10 补充 (后来)偶然发现中国天气网已经有城市ID列表的网页...还发现城市编码有两种,暂且称中国天气网这些编码为旧标准"旧编码"的特征是 9个字符长度; ...

  7. [spark案例学习] WEB日志分析

    数据准备 数据下载:美国宇航局肯尼迪航天中心WEB日志 我们先来看看数据:首先将日志加载到RDD,并显示出前20行(默认). import sys import os log_file_path =' ...

  8. windows 7下qtcreator里QWT文件的pro配置

    http://blog.chinaunix.net/uid-20717410-id-272331.html 把编译好的qwt的include文件夹下面 所有的.h文件 复制到qt目录下 然后在pro里 ...

  9. web前端防治重复提交

    web前端开发中防治重复提交 web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表 ...

  10. Ubuntu下使用USB串口

    Ubuntu本身一般都带了USB转串口的驱动. 1. 首先确认系统支持USBSerial,输入以下命令:      lsmod | grep usbserial 2. 接上USB串口线,看看系统是否可 ...