轻量实现JSON数据高亮美化
创建时间：2022-03-09
更新时间：20 小时前
现在市面上存在一些优秀的代码高亮工具，例如highlight.js、prettify.js，在某些情况下，项目需要将后端接口返回的数据进行高亮美化，然后显示在 web 端。为了达到这种效果而引入整个插件，会显得臃肿。因此，我们需要一种更轻量的代码高亮的实现方式。
下面的方法接受一段需要美化的代码，方法为一些基本类型加上了类名，这样，我们就可以为代码添加样式。
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>";
}
);
}
例如后端返回的数据为
{
"name": "Jons",
"age": 14,
"id": 001,
"sex": "male",
"address": null
}
经过我们高亮后的代码
查看效果