json转html

json转html

const defaultColorMap = {
  key: 'red',
  string: 'green',
  number: 'darkorange',
  boolean: 'blue',
  null: 'magenta',
};
function syntaxHighlight(json, colorMap = defaultColorMap) {
  if (typeof json != 'string') {
    json = JSON.stringify(json, undefined, 2);
  }
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return json.replace(
    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
    function (match) {
      let 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 style="color: ${colorMap[cls]}">${match}</span>`;
    },
  );
}

用法

<pre
  dangerouslySetInnerHTML={{
    __html: syntaxHighlight(JSON.parse(text)),
  }}
/>