經常用json格式化，以往都是隨時開啟線上網頁工具格式化，最近發現各類網頁 廣告越來越多，自己動手做一個。

用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等的操作。

可以訪問和使用：http://www.jsonw.cn| 原碼可讀。 就是要做沒廣告、好用的格式化工具。