jsonを整形するブックマークレット

json-formatter.js

javascript:(
() => {
  const doneId = 'json-formatter-hogashi';
  if (document.querySelector(`#${doneId}`)) {
    return;
  }
  /* EDIT HERE: `elem` is the element which has one-lined-JSON text */
  const elem = document.querySelector('pre');
  let str = elem.innerHTML,
    formatted = '',
    cursor = 0,
    bigp = 0,
    midp = 0;
  const newLineWithSpace = num => {
    let nlsp = '\n';
    for (let i = 0; i < num; i++) {
      nlsp += ' ';
    }
    return nlsp;
  };
  const length = str.length;
  while (cursor < length) {
    switch (str[cursor]) {
      case '{':
        formatted += '{' + newLineWithSpace((bigp + ++midp) * 2);
        cursor++;
        break;
      case '[':
        formatted += '[' + newLineWithSpace((++bigp + midp) * 2);
        cursor++;
        break; 
      case '"':
        const [quoted] = str.slice(cursor).match(/"(?:\\\\|((?<!\\)\\(?!("|\\)))|[^\\"]|\\")*?"/);
        formatted += quoted;
        cursor += quoted.length;
        break;
      case ',':
        formatted += ',' + newLineWithSpace((bigp + midp) * 2);
        cursor++;
        break;
      case ':':
        formatted += ': ';
        cursor++;
        break;
      case '}':
        formatted += newLineWithSpace((bigp + --midp) * 2) + '}';
        cursor++;
        break;
      case ']':
        formatted += newLineWithSpace((--bigp + midp) * 2) + ']';
        cursor++;
        break;
      default:
        formatted += str[cursor];
        cursor++;
        break;
    }
  }
  elem.innerHTML = formatted;
  document.querySelector('body').insertAdjacentHTML('beforeend', `<div id="${doneId}" style="display: none;"></div>`)
})();