JSON構文チェッカー

エラーのある行:
JSON構文チェッカー hi0a.com


  view source
  JavaScript
  function checkJSON() {
  const input = document.getElementById('jsonInput').value;
  const errorOutput = document.getElementById('errorOutput');
  const successOutput = document.getElementById('successOutput');
  const errorDetails = document.getElementById('errorDetails');

  errorOutput.textContent = '';
  successOutput.textContent = '';
  errorDetails.value = '';

  try {
    JSON.parse(input);
    successOutput.textContent = '✅ 正しいJSONです。';
  } catch (e) {
    errorOutput.textContent = '❌ 構文エラー: ' + e.message;

    const lines = input.split('\n');

    // --- 方法1: positionで推定 ---
    let position = null;
    const posMatch = e.message.match(/position (\d+)/);
    if (posMatch) {
      position = parseInt(posMatch[1], 10);
    }

    let lineInfo = null;

    if (position !== null) {
      let charCount = 0;
      for (let i = 0; i < lines.length; i++) {
        const lineLength = lines[i].length + 1; // +1 for '\n'
        if (charCount + lineLength > position) {
          const column = position - charCount;
          lineInfo = {
            line: i,
            column: column,
            content: lines[i]
          };
          break;
        }
        charCount += lineLength;
      }
    }

    // --- 方法2: token文字列から推定 ---
    if (!lineInfo) {
      const tokenMatch = e.message.match(/Unexpected token ['"`]?([^\s"'`,\]\}]+)/i) ||
                         e.message.match(/['"`]([^'"`]+)['"`]/i);

      if (tokenMatch) {
        const token = tokenMatch[1];
        for (let i = 0; i < lines.length; i++) {
          if (lines[i].includes(token)) {
            lineInfo = {
              line: i,
              column: lines[i].indexOf(token),
              content: lines[i]
            };
            break;
          }
        }
      }
    }

    // 結果を表示
    if (lineInfo) {
      errorDetails.value =
        `行 ${lineInfo.line + 1}, 列 ${lineInfo.column + 1}:\n` +
        lineInfo.content + '\n' +
        ' '.repeat(lineInfo.column) + '^ ←ここ';
    } else {
      errorDetails.value = 'エラーの行を特定できませんでした。';
    }
  }
}

  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-json-checker/
  
  ABOUT
  
    hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    仕様変更、API廃止等、実験途中で動かないページもあります。