syntax highlight json

json-highlight.js

import { escape } from "lodash";

export default function(str, format = true) {
  try {
    // ensure that we got valid json here...
    const obj = JSON.parse(str);
    if (format) str = JSON.stringify(obj, null, 2);
    str = _parseObj(obj, str);
    // dont wrap with the parent tag till we are done...
    return `<span class="json-markup">${str}</span>`;
  } catch (err) {
    throw err;
  }
}

function _wrapWithTag(str, search, classSuffix) {
  // make sure we are dealing with a string
  search = `${search}`;
  // use regex to make sure we are not already inside a tag
  return str.replace(
    new RegExp(`(${search})(?![^<]*>|[^<>]*</)`),
    `<span class="json-markup-${classSuffix}">${escape(search)}</span>`
  );
}

function _parseObj(obj, str) {
  Object.keys(obj).forEach(key => {
    const val = obj[key];
    str = _wrapWithTag(str, `"${key}"`, "key");

    if (val === null) str = _wrapWithTag(str, val, "null");
    else if (typeof val === "object") str = _parseObj(val, str);
    else if (typeof val === "string") str = _wrapWithTag(str, `"${val}"`, "string");
    else if (typeof val === "boolean") str = _wrapWithTag(str, val, "bool");
    else if (typeof val === "number") str = _wrapWithTag(str, val, "number");
  });

  return str;
}