在textarea輸入中美化json數據

我已經搜索了這個特定的主題，並且找不到與它相似的任何內容。如果有，請關閉此並給出鏈接。在textarea輸入中美化json數據

我正在創建一個json數據api模擬器。我希望用戶能夠將json對象請求複製並粘貼到textarea中，並在發送給服務器之前對其進行修改。

問題是json obj複製和pattes經常導致額外的空間，並永遠不會正確對齊，即使與pre標籤。我也想要一個適用於鍵和值的良好配色方案。

我看過插件，其他問題和代碼片段，但它們不適用於文本可編輯的textareas。有沒有在編輯模式下保持它的風格，而不顯示所有的風格的HTML標籤？我希望能夠用JavaScript或jquery從頭開始編寫它。

2014-10-12 archytect

語法高亮顯示爲強硬，但檢查出這個fiddle for pretty printing a json object輸入一個文本區域。請注意，JSON必須有效才能使其正常工作。（使用dev控制檯捕獲錯誤。）檢查jsLint是否有效的json。

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

首先嚐試像簡單的輸入：{ 「一個」：「你好」，「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。

來源

2014-10-12 10:14:57

偉大的答案男人。那完美的工作。 – archytect 2014-10-12 17:08:20

真的很好的答案。 – Azim 2016-11-01 19:23:25

JSON.stringify（obj，undefined，4）這就是我一直在尋找的東西。謝謝 – 2017-09-14 11:20:29

-1

我不認爲這可以用普通textareas來完成。你可以做什麼（以及大多數在線代碼編輯器是這樣做的）是創建一個透明的textarea，它覆蓋包含樣式代碼的div的頂部。該用戶仍然可以輸入並與輸入交互（以及它觸發相關的表單事件），並可以顯示語法在div用戶將直觀地看到的高亮（見Textarea that can do syntax highlighting on the fly?）現在

爲JSON格式化，我會將自定義事件添加到textarea，以便當用戶輸入或粘貼某些內容時，通過Javascript JSON美化器（請參閱How can I pretty-print JSON using JavaScript?）運行它，然後重新填充div和textarea

來源

2014-10-12 01:30:46 trekforever

在textarea輸入中美化json數據

回答

相關問題