首页 分类
阿荡的博客

轻量实现JSON数据高亮美化

创建时间:2022-03-09

更新时间:20 小时前

现在市面上存在一些优秀的代码高亮工具,例如highlight.jsprettify.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
}

经过我们高亮后的代码

../images/affbd2bff7c2efce15c862c220db2ebc14675.jpeg

查看效果

https://jsfiddle.net/zhaohd/v4q8zp0k/ (opens new window)