JSON格式化

我個人主要是做一些后端的工作,比如php、python、c之類的,c比較少,最主要的是php,不過我非常喜歡js,所以經常會愿意去寫一些小玩意自娛自樂。

今天在測試接口的時候,使用原生js的XMLHttpRequest去請求,直接使用document….innerHTML輸出到頁面,因為沒有瀏覽器的json格式化沒有生效,所以接口響應的json數據就看起來很不舒服。

于是乎,我就想起了為啥我自己不能實現一個,應該不是很難吧。

我仔細思考了一下,這玩意不就是遇到大括號、中括號和中括號就換行嗎,每行還有個縮進,人家再高級一點的還有顏色,折疊功能、縮進對齊線之類的,于是我覺得一步一步來,先把格式化和顏色實現出來,后面的折疊、動畫和縮進對齊線再慢慢做。

電影有句話說的好啊:“步子邁大了,咔,容易扯著蛋”。

扯了這老些沒用的,下面開始我的正經思路:

合法的JSON字符串是一個單行字符串,邊界符號是“{} []”,鍵值對之間是以英文逗號“,”作為分隔,鍵和值之間是用英文冒號“:”進行分隔。JSON內的字符串必須以雙引號包括在外側,數字類型或布爾類型可以不使用雙引號包括。逗號分隔符的后面必須至少存在一個鍵值對(即末尾的鍵值對的后面不能有逗號分隔符了,這里的逗號指的是鍵值對分隔符,而不是指值內的逗號字符串)。

看看別人優秀的是什么樣子的。

從某平臺的json格式化服務截取

可以發現在“{, [”的后面都會有一個換行,每個鍵值對的后面都有一個換行,在符號“], 和 }, ”的后面都會有一個換行。

而且格式化后的JSON是有“結構區塊”的,從縮進來區分不同的結構塊,這一點有點像python,不過這有點牽強,格式化這樣做的目的是為了能夠很清晰的查看JSON的結構,與python的目的是有本質的區別的。

從截圖來看,只要遇到一個“{ 或 [”,就要出現縮進,而且可以看出,縮進是隨著遇到的個數增加的,這是成正比啊。而且只要遇到“]或}”,縮進就要少一個。

說到這里是不是就有感覺了,縮進就是在匹配括號啊,這匹配括號在逆波蘭式里的操作啊,不就是基礎的數據結構“?！眴?。

那我對整個字符串進行遍歷判斷是不就能做到了,那有了思路就可以動手了,能動手我就不在這里扯?了。

<!-- 這里在頁面放一個pre標簽,讓輸入的結構按照我們需要的形式展現 --><pre ></pre>

假設我有一個jsonStr,我想要格式化它。

var jsonStr = '{"state":{"code":0,"success":true,"ok":1},"body":[{"count":2394,"dbName":"star_all"},{"count":133,"dbName":"star"},{"count":7,"dbName":"zy"},{"count":1,"dbName":"gordon_test"}]}';

function format(str){    var stack = []; //棧-用于括號匹配    var tmpStr = '';    //新格式化JSON字符串    var len = str.length;   //原始JSON長度    //遍歷每一個字符    for (let i = 0; i < len; i++) {        //當遇到結構塊起始結構        if (str[i] == '{' || str[i] === '[') {            //起始結構后面直接換行              tmpStr += str[i] + "n";            //入棧            stack.push(str[i]);                        //這里的意思是結構塊起始的下一行開始就會有一個縮進,縮進量與遇到的結構塊起始符個數成正比1:1            tmpStr += "t".repeat(stack.length);        }         //當遇到結構塊結束符        else if (str[i] == ']' || str[i] === '}') {            //因為本身JSON格式是固定的,所以括號一定是成對的,這里先不考慮錯誤的json數據            //遇到結束符就退棧,            stack.pop();            //結束符本身輸出到下一行,并減少一個縮進            tmpStr += "n"+"t".repeat(stack.length) + str[i];        }         //當遇到逗號的時候        else if (str[i] == ',') {            //逗號后方直接換行,以及下一行的縮進處理            tmpStr += str[i] + "n" + "t".repeat(stack.length);        }         else {            //其他字符直接復制            tmpStr += str[i];        }    }    return tmpStr;}

返回的數據放到<pre>標簽內

document.querySelector('#json').innerHTML = format(jsonStr);

輸出的效果如下圖

制表符t稍微有點遠,當然使用4個 也可以,別糾結～

這黑白色的不美觀,那就給上個色唄,看看人家的,括號一個顏色,鍵值對一個顏色,值一個顏色,我不能抄它的,我覺得字符串,數字、布爾都分別用一種顏色就行,這個實現就都能實現了。

那既然需要分開使用不同的顏色,那么必然就涉及CSS了,每個結構就得有HTML結構了,我直接用正則是不是就解決了。

先寫個CSS樣式把

.bold{    font-weight: 900;}.string-color {    color: darkred;}.token {    color: darkgreen;}.number {    color: green;}.bool {    color: orange;}

//使用捕獲,匹配全部的邊界符號,class使用tokentmpStr = tmpStr.replace(/([{[]}])/g, '<span >$1</span>');//使用零寬斷言和捕獲,匹配全部的兩側是雙引號的字符串,class使用stringtmpStr = tmpStr.replace(/(?<=")(w+)(?=")/g, '<span >$1</span>');//使用零寬斷言,匹配全部的前面位置是冒號,后面是逗號或換行的數字類型值tmpStr = tmpStr.replace(/(?<=:)(d+)(?=[,n])/g, '<span >$1</span>');//同理匹配布爾,tmpStr = tmpStr.replace(/(?<=:)(true|false)(?=[,n])/g, '<span >$1</span>');

零寬斷言就是匹配一個位置,分負向零寬斷言和正向零寬斷言,不知道的可以搜索一下。

效果還行

到這里就初步完成了一個還算能入眼的基礎JSON格式化小方法。后續再加個閃電爆炸的特效,下次再分享～