轻量实现JSON数据高亮美化

现在市面上存在一些优秀的代码高亮工具,例如highlight.jsprettify.js,在某些情况下,项目需要将后端接口返回的数据进行高亮美化,然后显示在web端。为了达到这种效果而引入整个插件,会显得臃肿。因此,我们需要一种更轻量的代码高亮的实现方式。

下面的方法接受一段需要美化的代码,方法为一些基本类型加上了类名,这样,我们就可以为代码添加样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function syntaxHighlight(json) {
if (typeof json !== 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function (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>';
});
}

例如后端返回的数据为

1
2
3
4
5
6
7
{
name: 'Jons',
age: 14,
id: 001,
sex: 'male',
address: null
}

经过我们高亮后的代码
https://p1.meituan.net/dpnewvc/affbd2bff7c2efce15c862c220db2ebc14675.jpg
效果查看
https://jsfiddle.net/zhaohd/v4q8zp0k/