json查看器

简介

json简约查看器，可折叠，高亮显示

预览图片

脚本源码

// JSON Viewer
const jsonViewer = (function() {
  const container = document.createElement('div');
  container.style.fontFamily = 'Arial, sans-serif';
  container.style.maxWidth = '800px';
  container.style.margin = '20px auto';
  container.style.padding = '20px';
  container.style.border = '1px solid #ddd';
  container.style.borderRadius = '5px';
  document.body.appendChild(container);

  // Create textarea for JSON input
  const textarea = document.createElement('textarea');
  textarea.style.width = '100%';
  textarea.style.height = '150px';
  textarea.style.marginBottom = '15px';
  textarea.style.padding = '10px';
  textarea.style.border = '1px solid #ccc';
  textarea.style.borderRadius = '4px';
  textarea.placeholder = '将json字符粘贴到此...';
  container.appendChild(textarea);

  // Create parse button
  const button = document.createElement('button');
  button.textContent = '解析JSON';
  button.style.padding = '8px 15px';
  button.style.backgroundColor = '#4CAF50';
  button.style.color = 'white';
  button.style.border = 'none';
  button.style.borderRadius = '4px';
  button.style.cursor = 'pointer';
  container.appendChild(button);

  // Create result container
  const resultDiv = document.createElement('div');
  resultDiv.style.marginTop = '20px';
  resultDiv.style.padding = '15px';
  resultDiv.style.backgroundColor = '#f9f9f9';
  resultDiv.style.borderRadius = '4px';
  resultDiv.style.overflowX = 'auto';
  container.appendChild(resultDiv);

  // Function to render JSON
  function renderJSON(data, parentEl) {
    if (typeof data !== 'object' || data === null) {
      const span = document.createElement('span');
      if (typeof data === 'string') {
        span.textContent = `"${data}"`;
        span.style.color = '#d14';
      } else if (typeof data === 'number') {
        span.textContent = data;
        span.style.color = '#099';
      } else if (typeof data === 'boolean') {
        span.textContent = data ? 'true' : 'false';
        span.style.color = '#099';
      } else if (data === null) {
        span.textContent = 'null';
        span.style.color = '#099';
      }
      parentEl.appendChild(span);
      return;
    }

    const isArray = Array.isArray(data);
    const wrapper = document.createElement('div');
    wrapper.style.marginLeft = '20px';

    const header = document.createElement('div');
    header.style.cursor = 'pointer';
    header.style.userSelect = 'none';
    header.style.display = 'flex';
    header.style.alignItems = 'center';

    const toggle = document.createElement('span');
    toggle.textContent = '▼';
    toggle.style.marginRight = '5px';
    toggle.style.fontSize = '12px';

    const typeSpan = document.createElement('span');
    typeSpan.textContent = isArray ? '[' : '{';
    typeSpan.style.color = '#999';

    header.appendChild(toggle);
    header.appendChild(typeSpan);

    const countSpan = document.createElement('span');
    countSpan.textContent = ` ${Object.keys(data).length} ${isArray ? 'items' : 'keys'} `;
    countSpan.style.color = '#999';
    countSpan.style.fontSize = '0.9em';
    countSpan.style.marginLeft = '5px';
    header.appendChild(countSpan);

    const closingBrace = document.createElement('span');
    closingBrace.textContent = isArray ? ']' : '}';
    closingBrace.style.color = '#999';
    header.appendChild(closingBrace);

    wrapper.appendChild(header);

    const content = document.createElement('div');
    content.style.display = 'block';

    Object.entries(data).forEach(([key, value]) => {
      const item = document.createElement('div');
      item.style.marginTop = '5px';

      const keySpan = document.createElement('span');
      keySpan.textContent = isArray ? '' : `"${key}": `;
      if (!isArray) {
        keySpan.style.color = '#0086b3';
      }
      item.appendChild(keySpan);

      renderJSON(value, item);
      content.appendChild(item);
    });

    wrapper.appendChild(content);
    parentEl.appendChild(wrapper);

    // Toggle functionality
    header.addEventListener('click', () => {
      if (content.style.display === 'none') {
        content.style.display = 'block';
        toggle.textContent = '▼';
      } else {
        content.style.display = 'none';
        toggle.textContent = '▶';
      }
    });
  }

  // Parse button click handler
  button.addEventListener('click', () => {
    try {
      const json = JSON.parse(textarea.value);
      resultDiv.innerHTML = '';
      renderJSON(json, resultDiv);
    } catch (e) {
      resultDiv.innerHTML = `<div style="color: red;">解析错误: ${e.message}</div>`;
    }
  });

  return {
    container,
    textarea,
    button,
    resultDiv
  };
})();