写一个json格式化工具

经常用json格式化，以往都是随时打开在线网页工具格式化，最近发现各类网页 广告越来越多，自己动手做一个。 访问 jsonw.cn | 源码可读、无广告、安全好用~。

准备：用JS来写、页面操作元素就用Jquery、页面排版就用bootstrap。

1 对于单纯格式化json的话，只需要：

var jsonChar = '{"key":"char","key2":123,"key3":{"key31":123},"key4":[]}';
var jsonObj = JSON.parse(jsonChar);
var jsonFmt = JSON.stringify(jsonObj, null, 4);

这时候，jsonFmt就是格式化好的json文本了，直接展示就可以了。

2 往往由于日常工作中的json文本会很长，有时候我们是需要把一些对象给折叠起来。
那我们尝试把json的缩进用 ul和li代替，这样可以很方便些js把ul里的li给隐藏也就是折叠了，同时缩进的展示也可以利用 ul和li。
如上示例的json用ul和li代替

<ul>
    <li>
    {
    <ul>
        <li>"key1":"char"</li>
	<li>"key2":123</li>
	<li>
	"key3":{
	    <ul>
	        <li>"key31":123</li>
	    </ul>
	}
	</li>
	<li>"key4":[]</li>
    </ul>
    }
    </li>
</ul>

折叠的JS，思路如下：

$("li:has(ul)").click(function (event) {
    $(this).children().toggle();
});

3 格式化之后的json，按key. value 做颜色的区分，再或者把value的不同类型做区分，可以很方便查阅

思路：遍历格式化后的json文本，遍历到每一行的时候，用冒号：分开两组，则可以把key. value做颜色区分。 再把冒号后的value 做判断，也能判断出value的类型。

遍历json的每一行。

$.each(temparr,function (index,obj) {
    console.log(obj);
});

 

如此，再遍历每行json的时候，就可以给json的文本赋值class等的操作。