实现 JSON 高亮

JSON 转换 HTML

function formatJson(json) {
  let regexp = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g;
  return json.replace(regexp, (substring) => {
    let cls = "number";
    if (/^"/.test(substring)) {
      if (/:$/.test(substring)) {
        cls = "key";
      } else {
        cls = "string";
      }
    } else if (/true|false/.test(substring)) {
      cls = "boolean";
    } else if (/null/.test(substring)) {
      cls = "null";
    }
    return '<span class="' + cls + '">' + substring + "</span>";
  });
}

JSON 代码高亮 CSS

pre {
  width: 900px;
  height: 500px;
  display: block;
  overflow-x: auto;
  padding: 20px;
  background: #2b2b2b;
  color: #bababa;
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace !important;
  font-size: 14px !important;
}

.string {
  color: green;
}

.number {
  color: darkorange;
}

.boolean {
  color: blue;
}

.null {
  color: magenta;
}

.key {
  color: red;
}

使用效果

import jsonFile from "./data.json";

let htmlJson = formatJson(JSON.stringify(jsonFile, null, 2));
$("#app > pre").append(htmlJson);

一般拿到的 JSON 字符串是没有缩进的，所以用JSON.stringify()缩进 2 个空格，再转换 HTML：

注意：一定要把转换之后的 HTML 插入到 <pre> 标签里，否则没有缩进效果。