看看你的正則行不行——正則優化通常的json字符串

時間 2019-11-19

原文原文鏈接

json字符串頗有用，有時候一些後臺接口返回的信息是字符串格式的，可讀性不好，這個時候要是有個能夠格式化並高亮顯示json串的方法那就好多了，下面看看一個正則表達式完成的json字符串的格式化與高亮顯示css

首先是對輸入進行轉換，若是是對象則轉化爲規範的json字符串，不是對象時，先將字符串轉化爲對象（防止不規範的字符串），而後再次轉化爲json串。其中json爲輸入。node

if (typeof json !== 'string') {
    json = JSON.stringify(json);
} else {
    json = JSON.parse(json);
    json = JSON.stringify(json);
}

等規範完數據以後對字符串進行標記，爲了後面的切分、從新組合jquery

這裏有幾個地方要添加標記，包括大括號、小括號的先後和逗號的後面都要添加標記，我這裏使用的是換行\r\n（這樣在命令行下測試時效果會比較好看）。正則表達式

// 在大括號先後添加換行
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');

添加完成標記以後就要作一些優化處理，去掉多餘的換行、去掉逗號前面的換行，這樣作是爲了在切分是省得出現空串浪費一次循環處理，最後在冒號後面添加空格，看起來更漂亮。json

// 去除多餘的換行
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');

// 逗號前面的換行去掉
reg = /\r\n\,/g;
json = json.replace(reg, ',');

//冒號前面縮進
reg = /\:/g;
json = json.replace(reg, ': ');

接下來就是對這個初步處理過的串進行進一步處理了,我會在function(index, node) {}函數中添加邏輯，對每個切分單元進行處理，包括縮進和美化格式。數組

$.each(json.split('\r\n'), function(index, node) {});

首先說下縮進，縮進的方法很簡單，遇到{、[符號時縮進增長1，遇到}、]符號時縮進減小1，不然縮進量不變。app

//這裏遇到{、[時縮進等級加1，遇到}、]時縮進等級減1，沒遇到時縮進等級不變
if (node.match(/\{$/) || node.match(/\[$/)) {
    indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
    if (pad !== 0) {
        pad -= 1;
    }
} else {
    indent = 0;
}

完成縮進後就該美化高亮顯示代碼了，這裏要用到幾個css規則，下面能夠看到，對切分單元進行高亮顯示的時候這裏用正則進行判斷，若是匹配到大括號標記爲對象class、中括號標記爲數組class、屬性名稱、屬性值，一次對這些進行css規則添加，添加完成以後拼接起來就能夠了。函數

.ObjectBrace{color:#00AA00;font-weight:bold;}
.ArrayBrace{color:#0033FF;font-weight:bold;}
.PropertyName{color:#CC0000;font-weight:bold;}
.String{color:#007777;}
.Number{color:#AA00AA;}
.Comma{color:#000000;font-weight:bold;}

//添加代碼高亮
node = node.replace(/([\{\}])/g,"<span class='ObjectBrace'>$1</span>");
node = node.replace(/([\[\]])/g,"<span class='ArrayBrace'>$1</span>");
node = node.replace(/(\".*\")(\:)(.*)(\,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");
node = node.replace(/\"([^"]*)\"(\,)?$/g,"<span class='String'>\"$1\"</span><span class='Comma'>$2</span>");
node = node.replace(/(-?\d+)(\,)?$/g,"<span class='Number'>$1</span><span class='Comma'>$2</span>");

最後咱們看看完整的方法代碼（這裏我使用了jquery類庫），以及測試地址：測試

要對jsonstr進行美化，這樣就能夠了APP.format(jsonstr)，直接輸出至<pre></pre>標籤中就能夠看到效果，優化

下面是一個測試地址，http://iforever.sinaapp.com/ 能夠進去試一下，看看完整的源代碼

<script>
    var APP=function(){
        var format=function(json){
            var reg=null,
                result='';
                pad=0,
                PADDING='    ';
            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, ',');

            //冒號前面縮進
            reg = /\:/g;
            json = json.replace(reg, ': ');

            //對json按照換行進行切分而後處理每個小塊
            $.each(json.split('\r\n'), function(index, node) {
                var i = 0,
                    indent = 0,
                    padding = '';
                //這裏遇到{、[時縮進等級加1，遇到}、]時縮進等級減1，沒遇到時縮進等級不變
                if (node.match(/\{$/) || node.match(/\[$/)) {
                    indent = 1;
                } else if (node.match(/\}/) || node.match(/\]/)) {
                    if (pad !== 0) {
                        pad -= 1;
                    }
                } else {
                    indent = 0;
                }

                   //padding保存實際的縮進
                for (i = 0; i < pad; i++) {
                    padding += PADDING;
                }
                //添加代碼高亮
                node = node.replace(/([\{\}])/g,"<span class='ObjectBrace'>$1</span>");
                node = node.replace(/([\[\]])/g,"<span class='ArrayBrace'>$1</span>");
                node = node.replace(/(\".*\")(\:)(.*)(\,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");
                node = node.replace(/\"([^"]*)\"(\,)?$/g,"<span class='String'>\"$1\"</span><span class='Comma'>$2</span>");
                node = node.replace(/(-?\d+)(\,)?$/g,"<span class='Number'>$1</span><span class='Comma'>$2</span>");
                result += padding + node + '<br>';
                pad += indent;
            });
            return result;
        };
        return {
            "format":format,
        };
    }();
</script>