JSONを整形するWebツール(コードあり)

上部のテキストエリアに整形前のJSONを貼り付けると下部のテキストエリアに整形されたJSONが表示されます。※入力内容はサーバには送信されません。

整形前のJSON

整形後のJSON

上部のテキストエリアに貼り付けた瞬間、下部の整形されたJSONは既にコピーされているのでそのまま別の場所に貼り付け可能です。

変換例

整形前

{"color1":"赤","color2":"黄"}

整形後

{
    "color1": "赤",
    "color2": "黄"
}

JSONを整形するコード

上記サンプルのコードです。テキストに貼り付けて拡張子をhtmlにして使用できます。

<!DOCTYPE html>
<html>
    <head>
        <title>JSON formatting</title>
        <style>
            .txt{
                width: 700px;
                max-width: 99%;
                margin-bottom: 5px;
            }
        </style>
    </head>
    <body>
        <div><textarea id="textarea1" class="txt" rows="5"></textarea></div>
        <div><textarea id="textarea2" class="txt" rows="5"></textarea></div>
        <script>
            const indent = 2;
            const textarea1 = document.getElementById("textarea1");
            const textarea2 = document.getElementById("textarea2");
            textarea1.addEventListener("input", formatJSON);
            function formatJSON() {
                try {
                    textarea2.value = formattedJSON 
                    = JSON.stringify(JSON.parse(textarea1.value),null,indent);
                    document.getElementById("textarea2").select();
                    var result = document.execCommand("copy");
                } catch (error) {
                    textarea2.value = error.message;
                }
            }
        </script>
    </body>
</html>

17行目のindentでJSONのインデントを指定できます。