textarea入力のjsonデータを整形する

質問

この特定のトピックを検索しましたが、類似したものを見つけられませんでした。もしあれば、これを閉じて、リンクを教えてください。

私は、jsonデータapiシミュレータを作成しています。私は、ユーザーがjsonオブジェクト要求をコピーして、サーバーに送信する前に修正することができるテキストエリアに貼り付けることができるようにしたい。

問題は、json objのコピー＆パスは、しばしば余分なスペースが発生し、preタグを使用しても適切に整列されないということです。また、キーと値に適用される良いカラースキームが必要です。

プラグインや他の質問、コードの断片を見ましたが、テキストが編集可能なtextareasには適用されません。編集モード中に、スタイル付けしたhtmlタグを全て表示させずに、スタイル付けを維持する方法はないでしょうか？javascriptやjqueryで一から書けるようにしたいのですが。

どうすれば解決しますか？

シンタックスハイライトは大変ですが、次のようにチェックしてください。 を使うとjsonオブジェクトがきれいに表示されます。 をテキストエリアに入力すると、きれいに表示されます。JSONが有効である必要があることに注意してください。(エラーを検出するには開発コンソールを使ってください。) Check jsLint をチェックしてください。

HTMLのことです。

<textarea id="myTextArea" cols=50 rows=10></textarea>
<button onclick="prettyPrint()">Pretty Print</button>

jsのことです。

function prettyPrint() {
    var ugly = document.getElementById('myTextArea').value;
    var obj = JSON.parse(ugly);
    var pretty = JSON.stringify(obj, undefined, 4);
    document.getElementById('myTextArea').value = pretty;
}

まず、次のような簡単な入力を試してみましょう。{"a":"hello","b":123} のような簡単な入力をしてみてください。

JSONのシンプルできれいな印刷は、割と簡単にできます。以下のjsコードを試してみてください。( jsFiddleはこちら )

// arbitrary js object:
var myJsObj = {a:'foo', 'b':'bar', c:[false,2,null, 'null']};

// using JSON.stringify pretty print capability:
var str = JSON.stringify(myJsObj, undefined, 4);

// display pretty printed object in text area:
document.getElementById('myTextArea').innerHTML = str;

このHTMLの場合

<textarea id="myTextArea" cols=50 rows=25></textarea>

そして、チェックアウト JSON.stringifyのドキュメント .