JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでtextareaに入力されたJSONデータを整形（プリティプリント）する方法

textareaに入力されたJSONデータを整形（プリティプリント）して表示するには、JSON.parse()とJSON.stringify()を組み合わせて使用します。

まずJSON.parse()で文字列をJavaScriptオブジェクトに変換し、その後JSON.stringify()の第3引数にインデント幅（例：4）を指定することで、インデントが整った読みやすいJSON文字列を取得できます。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<textarea id="prettyJSONFormat" cols=100 rows=20></textarea>
<button onclick="printTheJSONInPrettyFormat()">ボタンをクリックして整形済みJSONを表示</button>
<script>
    function printTheJSONInPrettyFormat() {
        var badJSON = document.getElementById('prettyJSONFormat').value;
        var parseJSON = JSON.parse(badJSON);
        var JSONInPrettyFormat = JSON.stringify(parseJSON, undefined, 4);
        document.getElementById('prettyJSONFormat').value = JSONInPrettyFormat;
    }
</script>
</body>
</html>

実行方法

上記のプログラムを実行するには、ファイル名を任意の名前（例：index.html）で保存し、VS Codeエディタでファイルを右クリックして「Open with Live Server」を選択するだけです。

出力結果

上記のプログラムを実行すると、次のような画面が表示されます。

JavaScriptでtextareaに入力されたJSONデータを整形（プリティプリント）する方法

次に、整形されていないJSONデータを入力してみましょう。サンプルのJSONデータは以下の通りです。

JavaScriptでtextareaに入力されたJSONデータを整形（プリティプリント）する方法

ボタンをクリックすると、次のようにインデントが整った整形済みJSONが出力されます。

JavaScriptでtextareaに入力されたJSONデータを整形（プリティプリント）する方法

このように、JSON.parse()で一度オブジェクトに変換してからJSON.stringify()で再び文字列化するというシンプルな手法だけで、textarea内のJSONデータを簡単に整形できます。JSONの構文が不正な場合はJSON.parse()がエラーをスローするため、必要に応じてtry...catchでエラーハンドリングを追加すると、より実用的なツールになります。

  1. JavaScriptで関数の実行結果をHTMLとして表示する方法

    関数の結果をHTMLとして表示するには？JavaScriptで関数の実行結果をHTMLとして画面に表示したい場合は、document.getElementById().innerHTML を使います。このプロパティに文字列や計算結果を代入することで、指定した要素の中身を動的に書き換えることができます。innerHTMLはDOM操作の基本であり、ユーザーの操作に応じてリアルタイムに画面を更新したい場合によく利用されます。サンプルコード以下は、ページ内にあるテキストボックス（input type=text）の数をカウントし、その結果をHTMLとして表示するコード例です。<!DOCTYPE h

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in