json字符串很有用,不经常候有个别后台接口重返的音信是字符串格式的,可读性相当不好,那年要是有个能够格式化并高亮突显json串的秘技那就大多了,下边看看二个正则表明式实现的json字符串的格式化与高亮展现

采取正则表明式的格式化与高亮展现json字符串,正则表明式json

json字符串很有用,不常候有些后台接口重回的音信是字符串格式的,可读性非常不好,那一年假使有个能够格式化并高亮显示json串的章程那就繁多了,下边看看二个正则表明式完结的json字符串的格式化与高亮呈现

率先是对输入举办转变,借使是目的则转向为专门的学业的json字符串,不是目的时,先将字符串转化为对象(幸免不标准的字符串),然后再度转发为json串。在那之中json为输入。

复制代码 代码如下:

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

等标准完数据之后对字符串进行标识,为了前边的切分、重新组合

此处有多少个地点要增添标识,包含大括号、小括号的内外和逗号的前边都要增加标识,作者那边运用的是换行\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’);

加上完毕标志之后将在做一些优化处理,去掉多余的换行、去掉逗号后面包车型客车换行,这样做是为着在切分是免得出现空串浪费二遍巡回处理,最后在冒号后边增加空格,看起来更完美。

复制代码 代码如下:

// 去除多余的换行
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,不然缩进量不变。

复制代码 代码如下:

//这里境遇{、[时缩进品级加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举行美化,这样就足以了应用软件.format(jsonstr),直接出口至<pre></pre>标签中就足以见到功能,

上面是二个测量检验地方,
能够步入试一下,看看完整的源代码

复制代码 代码如下:

<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;
                }
永利开户送38元体验金,                //增加代码高亮
                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>

何以,json字符串是否天生丽质了众多吧,一流实用呢,这么好的东东,当然无法独享,这里推荐给小伙伴们。

json字符串很有用,一时候有个别后台接口返回的新闻是字符串格式的,可读性…

首先是对输入进行转变,假如是指标则转向为业内的json字符串,不是目的时,先将字符串转化为对象(幸免不职业的字符串),然后再一次倒车为json串。当中json为输入。

复制代码 代码如下:

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

等标准完数据之后对字符串实行标识,为了前面包车型大巴切分、重新组合

此处有多少个地点要增添标志,包涵大括号、小括号的上下和逗号的前边都要增多标志,小编这里运用的是换行\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’);

加上完结标识之后将在做一些优化管理,去掉多余的换行、去掉逗号前面包车型客车换行,那样做是为着在切分是免得出现空串浪费叁回巡回管理,最终在冒号前边增加空格,看起来更完美。

复制代码 代码如下:

// 去除多余的换行
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,不然缩进量不改变。

复制代码 代码如下:

//这里遭遇{、[时缩进等第加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举行美化,这样就足以了应用软件.format(jsonstr),直接出口至<pre></pre>标签中就足以看来功能,

下边是三个测量检验地方,
能够步向试一下,看看完整的源代码

复制代码 代码如下:

<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>

什么,json字符串是否赏心悦目了过多啊,一级实用呢,这么好的东东,当然不能够独享,这里推荐给小同伙们。

你只怕感兴趣的篇章:

  • String字符串相配javascript
    正则表明式
  • JS使用正则表达式除去字符串中另行字符的主意
  • javascript正则表明式和字符串RegExp and
    String(一)
  • js
    正则表明式学习笔记之相配字符串
  • js将字符串转成正则表明式的实现方式
  • javascript中动用正则表达式实行字符串验证示例
  • javascript中使用正则表明式完毕删除字符串中的前后空格
  • 用正则表明式推断字符串是汉字还是拼音的js函数代码
  • JS正则表达式提取字符串中有所汉字的本子
  • JavaScript利用正则表明式替换字符串中的内容

相关文章