正则表达式优化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进行美化,这样就可以了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>

PS:正则表达式替换json字符串的某一项的数字值

aa=aa.replaceAll("\"ccfsID\":\"[0-9]*\"", "\"ccfsID\":\""+id1+"\"");

aa为json字符串,如:

{"items":[{"dishprice":30,"ccfsID":"","order.item.id":1,"zuofaid":"","zuofajiajia":0,"isTaoCan":false,"num":1,"price":30,"name":"","ID":"00000001","lsdishID":"","zuofaname":"","tzs":"","addTime":"2013-05-14"}],"deskId":"00000008"}
(0)

相关推荐

  • 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等

    一.校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$ 8 正数.负数.和小数:^(\-|\+)?\d+(\.\d+)?$ 9 有两位小数的正实数:^[0-9]

  • javascript正则表达式和字符串RegExp and String(一)

    前言 正则表达式是javascript非常重要和常用的功能,在jquery等大型框架中用的非常频繁,最近抽时间学习了解了相关知识,记录下来与需要的朋友分享. 思维导图 RegExp(正则表达式)的创建方式 可以通过两种方式创建一个RegExp,具体如下: 通过/-./的方式来创建正则表达式(注意: /--/两边是没有单引号或双引号的) 通过RegExp构造方法来创建一正则表达式 为了更好的描述模式,正则表达式提供了3个标识,分别是: g/i/m g: 全局匹配:在整个字符串中匹配,而不是在第一次

  • JS使用正则表达式除去字符串中重复字符的方法

    本文实例讲述了JS使用正则表达式除去字符串中重复字符的方法.分享给大家供大家参考,具体如下: 这里演示一个简单的JavaScript正则表达式实例,将一串含有重复字符串中的多余字符滤除掉,请运行查看效果. 具体代码如下: <html> <head> <title>利用正则表达法除去字符串中的重复字符</title> </head> <body> <script language="javascript">

  • 去掉字符串前后所有空格的正则表达式

    正则表达式,又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. /**去掉字符串前后所有空格*/ function trim(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); } //计算标题长度 funct

  • 常用的正则表达式大全(数字、字符、固定格式)

    相关阅读: IOS开发常用的正则表达式 Java正则表达式过滤出字母.数字和中文 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 列目录时, dir *.txt或ls *.txt中的*.txt就不是一个正则表达式,因为这里*与正则式的*的含义是不同的. 构造正则表达式的方法和创建数学表达式的方法一样.也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式.

  • 利用正则表达式判断一个给定的字符是否是回文

    如果给定的字符串是回文,返回true,反之,返回false. 如果一个字符串忽略标点符号.大小写和空格,正着读和反着读一模一样,那么这个字符串就是palindrome(回文). 注意你需要去掉字符串多余的标点符号和空格,然后把字符串转化成小写来验证此字符串是否为回文. 函数参数的值可以为"racecar","RaceCar"和"race CAR". 关键代码: 去掉字符串中的标点符号和空白格.可以用str.replace()+正则表达式匹配. v

  • ORACLE数据库中怎么求除数字、字母之外的非中文字符的正则表达式

    最近做项目,有这样一需求:ORACLE数据库中求除数字.字母之外的非中文字符的正则表达式 如有如下字段,需将其中除字母.数字.汉字外的其他所有字符替换为空 'asdfsad ,,:)()!@123234#$%^&*(我w 是e ? 中国人../\[]::''""一人' 最终得到值:asdfsad123234我是中国人一人 select FN_REG_REPLACEOTHER('asdfsad ,,:)()!@#$%^&*(我是?中国人../\[]::''"&q

  • Java正则表达式提取字符的方法实例

    正好遇到一个需求需要将字符串中特定的字符全部提取出来,这个如果是按常规的字符串处理的话非常的繁琐.于是想到用正则表达式来完成.项目需求是这样的:需要提取车牌号中最后一个数字,比如说:苏A7865提取5,苏A876X提取6 实现方法: import java.util.regex.Matcher; import java.util.regex.Pattern; public class Test { public static void main(String[] args) { String s

  • 正则表达式优化JSON字符串的技巧

    json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示 首先是对输入进行转换,如果是对象则转化为规范的json字符串,不是对象时,先将字符串转化为对象(防止不规范的字符串),然后再次转化为json串.其中json为输入. if (typeof json !== 'string') { json = JSON.stringify(json); } el

  • 使用正则表达式的格式化与高亮显示json字符串

    json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示 首先是对输入进行转换,如果是对象则转化为规范的json字符串,不是对象时,先将字符串转化为对象(防止不规范的字符串),然后再次转化为json串.其中json为输入. 复制代码 代码如下: if (typeof json !== 'string') {     json = JSON.string

  • 正则表达式匹配不包含某些字符串的技巧

    经常我们会遇到想找出不包含某个字符串的文本,程序员最容易想到的是在正则表达式里使用,^(hede)来过滤"hede"字串,但这种写法是错误的.我们可以这样写:[^hede],但这样的正则表达式完全是另外一个意思,它的意思是字符串里不能包含'h','e','d'三个但字符.那什么样的正则表达式能过滤出不包含完整"hello"字串的信息呢? 事实上,说正则表达式里不支持逆向匹配并不是百分之百的正确.就像这个问题,我们就可以使用否定式查找来模拟出逆向匹配,从而解决我们的问

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

    在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

  • JSON字符串和JSON对象相互转化实例详解

    本文实例讲述了JSON字符串和JSON对象相互转化的方法.分享给大家供大家参考,具体如下: 将json字符串转换为json对象的方法.在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键 例如: JSON字符串: var str = '{ "name": "name1","sex": "m" }'; JSON对象: var obj = {

  • JSON字符串和对象相互转换实例分析

    本文实例分析了JSON字符串和对象相互转换方法.分享给大家供大家参考,具体如下: 同事问了我一个问题--server端返回了一个json结构的字符串,怎么样去访问json对象里面的值?jquery有没有对返回的JSON数据进行解析? 我自己写了一个小的demo,还有从网上查了一些资料,在这里跟大家分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • 正则表达式链接替换函数的技巧

    正则表达式链接替换函数的技巧如下所示: 1) 字符串       前面的字符<a href="http://www.aaa.cn/000011.html">任意长度字符</a>后面的字符 替换成        前面的字符<a href="http://www.bbb.cn/folder/show.asp?id=000011">任意长度字符</a>后面的字符 2) 字符串       前面的字符<a href=&q

  • Python对象转JSON字符串的方法

    本文实例讲述了Python对象转JSON字符串的方法.分享给大家供大家参考,具体如下: import json class JSONObject(object): def __init__(self): self.name = 'Ahan' self.email = 'www@qq.com' self.age = 26 if __name__ == '__main__': o = JSONObject() print json.dumps(o, default=lambda o: o.__dic

  • C#格式化json字符串的方法分析

    本文实例讲述了C#格式化json字符串的方法.分享给大家供大家参考,具体如下: 将Json字符串转化成格式化表示的方法: 字符串反序列化为对象-->对象再序列化为字符串 使用Newtonsoft.Json提供的API,下载地址:http://www.newtonsoft.com/json 很多时候我们需要将json字符串以 { "status": 1, "sum": 9 } 这种方式显示,而从服务端取回来的时候往往是这样 {"status"

  • java解析任意层数json字符串的方法

    复制代码 代码如下: //解析策略,有可能是解析json字符串,有可能为数据中的图片地址,email等package cc.util.regex; public enum RegexPolicy { Json("Json"), Image("ImageFromHtml"); private String value; RegexPolicy (String value) {  this.value = value; } @Override public String

随机推荐