prettify json data in textarea input

Question

Ho cercato questo argomento particolare e non ho trovato nulla di simile ad esso. Se c'è, chiudi e chiedi un link.

Sto creando un simulatore di json data api. Voglio che gli utenti siano in grado di copiare e incollare una richiesta di oggetti json in una textarea in cui possono anche modificarla prima di inviarla al server.

Il problema è che json obj copy e patses risulta spesso in spazi aggiuntivi e non è mai allineato correttamente, anche con il tag pre. Voglio anche una buona combinazione di colori applicata a chiavi e valori.

Ho visto plug-in, altre domande e snippet di codice, ma non si applicano alle aree di testo in cui il testo è modificabile. È lì per tenerlo in stile mentre sei in modalità di modifica senza mostrare tutti i tag html che lo hanno disegnato? Voglio poterlo scrivere da zero con javascript o jquery.

Answer 1

L'evidenziazione della sintassi è difficile ma controlla questo fiddle for pretty printing a json object inserito in un'area di testo. Si noti che il JSON deve essere valido affinché funzioni. (Utilizzare la console di sviluppo per rilevare gli errori.) Verificare jsLint per JSON valido.

Il codice HTML:

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

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

Prima prova semplice ingresso come: { "a": "ciao", "b": 123}

Semplice la bella stampa di JSON può essere fatta piuttosto facilmente. Prova questo codice 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; 

Per questo HTML:

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

E verificare JSON.stringify documentation.

Answer 2

Non penso che si possa fare con le normali aree di testo. Quello che puoi fare (e come la maggior parte degli editor di codice online lo fa) è creare una textarea trasparente che si sovrapponga a un div che contiene il codice in stile. L'utente sarebbe ancora in grado di digitare e di interagire con l'ingresso (e spara gli eventi forma associata), ed è possibile mostrare l'evidenziazione della sintassi nel div che l'utente visivamente vedere (vedi Textarea that can do syntax highlighting on the fly?)

Ora, come per Formattazione JSON, vorrei aggiungere eventi personalizzati alla textarea in modo che quando un utente digita o incolla qualcosa, eseguirlo attraverso un prettifier JSON Javascript (vedere How can I pretty-print JSON using JavaScript?) e quindi ri-popolare il div e textarea di conseguenza