By
被删
更新日期:
最近项目需要用到将json格式化展示在html页面中，在这里简答整理一下其中逻辑实现，将json转换为字符串然后用正则匹配。
分析json格式化样式
这里我们先分析一下json格式化后的展示方式，例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| {
"type": "type1",
"total": 111,
"data": [{
"time": "2016-10-10 22:22:22",
"flag": null,
"appear": {
"head": "head",
"list": ["123","123","123"]
}
}, {
"time": "2016-10-10 22:22:22",
"flag": true,
"appear": {
"head": "head",
"list": ["123","123","123","123","123"]
}
}]
}
|
数据类型展示
从上面的json我们可以大概将数据格式分为以下几种：
- Object对象
- Array数组
- String字符串
- 可通过
""来进行标志判断
- 可分为key和value两种
- Number数字
- Null
- Boolen
json样式/颜色
为了使得展示的体验增加，我们可以根据不同的数据类型设置不同的颜色展示。
- 基本符号，
{}、[]、:、""、,
- 字符串
- 数字
- true/false/null
实现逻辑
通过上述json分析，我们可以使用两种方式实现json格式化：
- 分析JSON.stringify()后的字符串，使用正则把需要的格式匹配替换
- 将json转化为object，然后通过js判断数据类型进行格式化
这里我们先使用第一种方法实现。
字符串匹配
需要匹配的值
- 需要换行的字符，包括
,后、{后、}前
- 位于行首需要缩进的字符，这里包括字符串key键值，以及
}
- 字符串
- key键值，使用
""、位于:前
- value值，使用
""、不位于:前
- true/false/null
- 其余为数字number
匹配方法
- 字符使用正则，
/[,\{\}:\[\]]/
- 字符串，
/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/
- ture/false/null，
/\b(true|false|null)\b/
- 数字，
/-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/
实现
这里将上述的逻辑进行实现。
数组换行实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| function JsonToHtml(data) {
var str = typeof data === 'string' ? str : JSON.stringify(data);
str = str.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
var indent = 0,
line = '</br>',
indentChar = ' ';
str = str.replace(/((,(\t)*[^\{])|(,(\t)*\{)|(\[(\t)*\{)|(\}(\t)*\])|\}|\{|\[|\])/g, match => {
var str = '';
if (match === '{' || match === '[' || /,(\t)*\{/.test(match) || /\[(\t)*\{/.test(match)) {
indent++;
} else if (match === '}' || match === ']' || /\}(\t)*\]/.test(match)) {
indent--;
}
for (var i = 0, tab = ''; i < indent; i++) {
tab += indentChar;
}
if (match === '}' || match === ']' || /\}\]/.test(match)) {
str = line + tab + match;
} else if (/,(\t)*[^\{]/.test(match)) {
str = ',' + line + tab + match.substring(1);
} else {
str = match + line + tab;
}
return str;
});
return ('<div class="json">' + str + '</div>');
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| function JsonToHtml(data) {
var str = typeof data === 'string' ? str : JSON.stringify(data);
str = str.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
var indent = 0,
line = '</br>',
indentChar = ' ',
inArray = false,
inObject = true;
str = str.replace(/((,(\t)*[^\{])|(,(\t)*\{)|\}|\{|\]|\[)/g, match => {
var str = '';
if (match === ']') {
inArray = false;
return match;
} else if (match === '[') {
inArray = true;
inObject = false;
return match;
}
if (match === '{' || /,(\t)*\{/.test(match)) {
indent++;
inObject = true;
} else if (match === '}') {
indent--;
inObject = false;
}
for (var i = 0, tab = ''; i < indent; i++) {
tab += indentChar;
}
if (match === '}') {
str = line + tab + match;
} else if (/,(\t)*[^\{]/.test(match)) {
str = (inArray && !inObject) ? match : (',' + line + tab + match.substring(1));
} else {
str = match + line + tab;
}
return str;
});
return ('<div class="json">' + str + '</div>');
}
|
结束语
这里我们讨论了其中一种方式，后面章节我们将使用另外一种方法实现。
此处查看项目代码
此处点击查看页面
查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢
