web-dev-qa-db-de.com

Json-Daten in der Textarea-Eingabe verfestigen

Ich habe nach diesem Thema gesucht und konnte nichts ähnliches dazu finden. Sollte dies der Fall sein, schließen Sie bitte dieses und geben Sie einen Link an.

Ich erstelle einen Json Data-API-Simulator. Ich möchte, dass Benutzer in der Lage sind, eine Json-Objektanforderung in einen Textbereich zu kopieren und dort einzufügen, wo sie sie auch ändern können, bevor sie an den Server gesendet werden. 

Das Problem ist json obj copy und patses führt oft zu zusätzlichen Leerzeichen und wird nie richtig ausgerichtet, auch nicht mit dem pre-Tag. Ich möchte auch ein gutes Farbschema für Schlüssel und Werte.

Ich habe Plugins, andere Fragen und Code-Snippets gesehen, sie gelten jedoch nicht für Textbereiche, in denen der Text bearbeitet werden kann. Gibt es einen Stil, der im Bearbeitungsmodus angezeigt wird, ohne dass alle HTML-Tags angezeigt werden, die ihn gestylt haben? Ich möchte es mit Javascript oder Jquery von Grund auf schreiben können.

24
archytect

Die Syntaxhervorhebung ist hart, aber überprüfen Sie diese Geige für das hübsche Drucken eines Json-Objekts , die in einen Textbereich eingegeben wird. Beachten Sie, dass der JSON-Code gültig sein muss, damit dies funktioniert. (Verwenden Sie die Dev-Konsole, um Fehler abzufangen.) Überprüfen Sie jsLint auf gültigen Json.

Das HTML:

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

Die 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;
}

Probieren Sie zunächst die einfache Eingabe aus: {"a": "hallo", "b": 123}

Einfacher hübscher Druck von JSON ist ziemlich einfach. Probieren Sie diesen js-Code aus: ( 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;

Für dieses HTML:

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

Und check out JSON.stringify Dokumentation .

88
Paul Sasik

Ich glaube nicht, dass dies mit normalen Textareas möglich ist. Was Sie tun können (und wie die meisten Online-Code-Editoren dies tun), ist das Erstellen eines transparenten Textbereichs, der sich über einem Div befindet, das den Stilcode enthält. Der Benutzer kann weiterhin die Eingabe eingeben und mit dieser interagieren (und löst die zugehörigen Formularereignisse aus), und Sie können die Hervorhebung der Syntax im div anzeigen, die der Benutzer visuell sehen kann (Siehe Textbereich, der Syntax ausführen kann Hervorhebung im Fluge? )

Wie bei der JSON-Formatierung würde ich dem Textbereich benutzerdefinierte Ereignisse hinzufügen. Wenn ein Benutzer etwas eingibt oder einfügt, führen Sie ihn über einen Javascript-JSON-Prettifier aus (siehe Wie kann ich JSON mit JavaScript hübsch drucken? ) und dann Füllen Sie das Div und das Textfeld entsprechend neu auf

0
trekforever

Für den Parsing-Schritt wollen Sie einfach den Inhalt des Textbereichs JSON.parse und alle Fehler aufgrund fehlerhafter Eingaben behandeln.

Für den Formatierungsteil Ihrer Frage verwenden Sie JSON.stringify(blob, undefined, 2). Wenn Sie Farben benötigen, können Sie alternativ eine einfache JSON-Format-/Farbkomponente in React schreiben:

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>;
};

Funktioniert in diesem CodePen: https://codepen.io/benshope/pen/BxVpjo

Hoffentlich hilft das!

0
benshope