टेक्स्टरेरा इनपुट

Question

में जेसन डेटा को प्रमाणित करें मैंने इस विशेष विषय की खोज की है और इसके समान कुछ भी नहीं मिला। अगर वहां है तो कृपया इसे बंद करें और एक लिंक दें।

मैं एक जेसन डेटा एपीआई सिम्युलेटर बना रहा हूं। मैं चाहता हूं कि उपयोगकर्ता एक json ऑब्जेक्ट अनुरोध को टेक्स्टरेरा में कॉपी और पेस्ट करने में सक्षम हों, जहां वे सर्वर पर भेजने से पहले इसे संशोधित भी कर सकते हैं।

समस्या जेसन ओबीजे प्रतिलिपि है और पीट्स अक्सर अतिरिक्त रिक्त स्थान में परिणाम देती हैं और पूर्व टैग के साथ भी ठीक से गठबंधन नहीं होती है। मैं भी एक अच्छी रंग योजना चाबियाँ और मूल्यों पर लागू करना चाहता हूं।

मैंने प्लगइन, अन्य प्रश्न और कोड के स्निपेट देखे हैं, लेकिन वे टेक्स्टरेस पर लागू नहीं होते हैं जहां टेक्स्ट संपादन योग्य है। क्या इसे संपादित मोड में रखते हुए स्टाइल किया गया है, इसके बिना सभी एचटीएमएल टैग जो इसे स्टाइल करते हैं? मैं इसे जावास्क्रिप्ट या jquery के साथ खरोंच से लिखने में सक्षम होना चाहता हूँ।

Answer 1

वाक्य रचना हाइलाइटिंग है कठिन लेकिन टेक्स्ट क्षेत्र में दर्ज fiddle for pretty printing a json object देखें। ध्यान दें कि जेएसओएन को काम करने के लिए इसके लिए वैध होना चाहिए। (त्रुटियों को पकड़ने के लिए dev console का उपयोग करें।) वैध जेसन के लिए 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; 
} 

पहले की तरह साधारण इनपुट की कोशिश: { "एक": "हैलो", "बी": 123}

सरल जेएसओएन की सुंदर प्रिंटिंग आसानी से की जा सकती है। इस HTML के लिए (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; 

: इस js कोड का प्रयास करें

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

और JSON.stringify documentation की जाँच करें।

Answer 2

मुझे नहीं लगता कि नियमित पाठों के साथ किया जा सकता है। आप क्या कर सकते हैं (और अधिकांश ऑनलाइन कोड संपादक इसे कैसे करते हैं) एक पारदर्शी टेक्स्टरेरा बनाना है जो स्टाइल कोड वाले div के शीर्ष पर ओवरले करता है। उपयोगकर्ता अभी भी लिखते हैं और इनपुट के साथ बातचीत (और यह जुड़े प्रपत्र घटनाओं आग) करने में सक्षम होगा, और आप के लिए के रूप में div कि उपयोगकर्ता नेत्रहीन देखेंगे में प्रकाश डाला वाक्य रचना दिखा सकते हैं (Textarea that can do syntax highlighting on the fly? देखें)

अब JSON स्वरूपण, मैं पाठ क्षेत्र के लिए कस्टम घटनाओं जोड़ना होगा ताकि जब कोई उपयोगकर्ता या पेस्ट कुछ, एक जावास्क्रिप्ट JSON prettifier के माध्यम से इसे चलाने (How can I pretty-print JSON using JavaScript? देखें) और उसके बाद div और पाठ क्षेत्र फिर से पॉप्युलेट तदनुसार