web-dev-qa-db-ja.com

テキストエリア入力のJSONデータをきれいにする

この特定のトピックを検索しましたが、それに類似するものは見つかりませんでした。ある場合はこれを閉じてリンクをお願いします。

JSONデータAPIシミュレーターを作成しています。ユーザーがjsonオブジェクトリクエストをコピーしてテキストエリアに貼り付けて、サーバーに送信する前にリクエストを変更できるようにしたいのです。

問題はjson objコピーであり、patsesは多くの場合余分なスペースをもたらし、preタグがあっても適切に整列されません。また、キーと値に適切な配色を適用したいです。

プラグイン、その他の質問、コードのスニペットを見てきましたが、テキストが編集可能なテキストエリアには適用されません。スタイルを設定したHTMLタグをすべて表示せずに、編集モードでスタイルを維持するためにありますか？ javascriptまたはjqueryを使用してゼロから作成できるようにしたいと思います。

javascriptjqueryhtmlcssjson
33
archytect

構文の強調表示は難しいですが、これを確認してください jsonオブジェクトをきれいに印刷するためのフィドル テキスト領域に入力します。これが機能するには、JSONが有効でなければならないことに注意してください。 （devコンソールを使用してエラーをキャッチします。）有効なjsonについて 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 here ）

// 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 documentation を確認してください。

102
Paul Sasik

解析ステップでは、テキストエリアの内容を_JSON.parse_して、不正な入力によるエラーを処理するだけです。

質問の書式設定部分には、JSON.stringify(blob, undefined, 2)を使用します。あるいは、ここで色が必要な場合は、Reactで記述された単純なJSON形式/色コンポーネントです。

_const HighlightedJSON = ({ json }: Object) => {
  const highlightedJSON = jsonObj =>
    Object.keys(jsonObj).map(key => {
      const value = jsonObj[key];
      let valueType = typeof value;
      const isSimpleValue =
        ["string", "number", "boolean"].includes(valueType) || !value;
      if (isSimpleValue && valueType === "object") {
        valueType = "null";
      }
      return (
        <div key={key} className="line">
          <span className="key">{key}:</span>
          {isSimpleValue ? (
            <span className={valueType}>{`${value}`}</span>
          ) : (
            highlightedJSON(value)
          )}
        </div>
      );
    });
  return <div className="json">{highlightedJSON(json)}</div>;
};
_

このCodePenでの動作をご覧ください： https://codepen.io/benshope/pen/BxVpjo

お役に立てば幸いです！

1
benshope

通常のテキストエリアではそれができないと思います。できること（およびほとんどのオンラインコードエディターでできること）は、スタイル設定されたコードを含むdivの上にオーバーレイする透明なテキストエリアを作成することです。ユーザーは入力を入力して操作することができ（関連付けられたフォームイベントを発生させます）、ユーザーに視覚的に表示されるdivに構文の強調表示を表示できます（ 構文の強調表示が可能なテキスト領域を参照）オンザフライ？ ）

JSONフォーマットについては、ユーザーが何かを入力または貼り付けたときに、JavaScript JSONプリティファイアーを介して実行されるように、カスタムイベントをtextareaに追加します（ JavaScriptを使用してJSONをきれいに印刷するにはどうすればよいですか？ ）そして、それに応じてdivとtextareaを再設定します

0
trekforever