जावास्क्रिप्ट का उपयोग कर सुंदर प्रिंट JSON


2425

मैं JSON को आसानी से पढ़ने के लिए (मानव पाठकों के लिए) प्रारूप में कैसे प्रदर्शित कर सकता हूं? मैं मुख्य रूप से इंडेंटेशन और व्हॉट्सएप की तलाश कर रहा हूं, शायद रंगों / फ़ॉन्ट-शैलियों / आदि के साथ भी।




3
यदि आप html में केवल आउटपुट कर रहे हैं, तो आप इसे एक <pre>टैग में लपेट सकते हैं ।
रयान वॉकर

जवाबों:


5057

प्रिटी-प्रिटिंग को देशी तरीके से लागू किया जाता हैJSON.stringify() । तीसरा तर्क सुंदर प्रिंटिंग को सक्षम करता है और उपयोग करने के लिए रिक्ति सेट करता है:

var str = JSON.stringify(obj, null, 2); // spacing level = 2

यदि आपको सिंटैक्स हाइलाइटिंग की आवश्यकता है, तो आप कुछ रेगेक्स जादू का उपयोग कर सकते हैं:

function syntaxHighlight(json) {
    if (typeof json != 'string') {
         json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

क्रिया में यहां देखें: jsfiddle

या नीचे दिया गया एक पूर्ण स्निपेट:


23
सुपर कमाल। मैंने डिबगिंग के लिए इसे एक नई विंडो में खोलने के लिए एक फ़ंक्शन जोड़ा: var json = syntaxHighlight (JSON.stringify (obj, अनिर्धारित, 4);); var w = window.open (); var html = "<head> <style> pre {रूपरेखा: 1px ठोस #ccc; गद्दी: 5 codec: 5px;} .string {color: green;}"; html + = ".number {color: darkorange;} .boolean {color: blue;} .null {color: magenta;} .key {color: red;} </ style> </ head> <body>"; html + = "<pre>" + json + "</ pre>"; w.document.writeln (एचटीएमएल);
JayCrossler

16
अच्छा लगा। <pre>हालांकि यह css और एक की जरूरत है मत भूलना ।
NoBugs

4
किसी कारण के लिए, जब मैं इसे सचेत करता हूं, तो यह वास्तव में स्वरूपित दिखाता है लेकिन फिर भी एक सपाट स्ट्रिंग दिखाता है जब मैंने इसे jQuery के माध्यम से एक थूक से बाहर किया: $ ("# लेन-देन")। अशक्त, '\ t'); जहाँ prettifyObject एक ऐसी विधि है जिसे मैंने बनाया है जिसमें आपकी पहली दो पंक्तियाँ ऊपर हैं।
पॉजिटिव

5
@CopyAddict सुनिश्चित करें कि आपके #transactionResponseतत्व में white-space: pre;CSS शैली है।
user123444555621

72
ध्यान दें कि stringify(...)JSON ऑब्जेक्ट्स पर काम करता है , JSON स्ट्रिंग्स पर नहीं। यदि आपके पास एक तार है, तो आपको JSON.parse(...)पहली बार
विहंग

271

उपयोगकर्ता Pumbaa80 का उत्तर बहुत अच्छा है यदि आपके पास एक वस्तु है जिसे आप सुंदर मुद्रित करना चाहते हैं। यदि आप एक वैध JSON स्ट्रिंग से शुरू कर रहे हैं, जिसे आप बहुत मुद्रित करना चाहते हैं, तो आपको इसे पहले किसी ऑब्जेक्ट में बदलने की आवश्यकता है:

var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);  

यह स्ट्रिंग से JSON ऑब्जेक्ट बनाता है, और फिर JSON स्ट्रिंग के सुंदर प्रिंट का उपयोग करके इसे वापस स्ट्रिंग में कनवर्ट करता है।


11
इसने मेरे लिए काम किया, लेकिन एक त्रुटि का उपयोग करके JSON.parseमैंने इसे संशोधित किया JSON.stringify(jsonString, null, 2)। आपके JSON / ऑब्जेक्ट पर निर्भर करता है।
जैज़ी

14
ध्यान दें कि स्ट्रिंग प्रदर्शित करते समय आपको इसे <pre></pre>टैग में लपेटने की आवश्यकता होती है ।
अंडरस्टैंडिंग

6
@ जैज़ी JSON.parseकेवल तभी मर जाता है जब आपके पास एक अमान्य JSON स्ट्रॉग होता है या यह पहले से ही किसी ऑब्जेक्ट में परिवर्तित हो जाता है ... सुनिश्चित करें कि आप जानते हैं कि कोशिश करने से पहले आपका डेटाटाइप क्या हो रहा हैJSON.parse
Kolob Canyon

@ आपकी टिप्पणी मेरे लिए उपयोगी थी, मैं जांचने की आवश्यकता होगी कि वास्तव में क्या preकरता है।
धवल जर्दोष

7
@ जैज़ी अगर आपको ऐसा करना होता, तो आपके पास JSON स्ट्रिंग नहीं होती, तो आपके पास एक सामान्य वस्तु होती। JSON हमेशा एक स्ट्रिंग है। यह एक जावास्क्रिप्ट ऑब्जेक्ट का केवल एक स्ट्रिंग-आधारित प्रतिनिधित्व है।
क्लोन्सेक्स

37

बेहतर तरीका।

जावास्क्रिप्ट में JSON ऐरे को प्रीटेट करें

JSON.stringify(jsonobj,null,'\t')

3
धन्यवाद! यह समाधान वह है जिसे मैं व्यक्तिगत रूप से देख रहा था क्योंकि मैं एक <textarea> में केवल एक इंडेंट किए गए JSON को लगाना चाहता था
Turbo

2
यह बेहतर है क्योंकि आप केवल मूल जावास्क्रिप्ट फ़ंक्शन का उपयोग कर रहे हैं, जिन्हें अतिरिक्त गणना की आवश्यकता नहीं है जो प्रदर्शन के मुद्दों का कारण बन सकता है यदि ऑपरेशन को कई बार दोहराया जाता है। केवल मेरे लिए यह काम करने के लिए गायब था <pre> टैग।
सीएल

बिल्कुल सही और बिल्कुल वही जिसकी मुझे तलाश थी! संक्षिप्त, प्यारा और सटीक।
जॉन

वाह! धन्यवाद! यह मेरे लिए बहुत उपयोगी है।
शाम

29

Pumbaa80 के उत्तर के आधार पर मैंने सांत्वना का उपयोग करने के लिए कोड को संशोधित किया है। रंग (क्रोम पर काम करना सुनिश्चित करें) और HTML नहीं। कंसोल के अंदर आउटपुट देखा जा सकता है। आप फ़ंक्शन के अंदर _variables को कुछ और स्टाइल जोड़कर संपादित कर सकते हैं।

function JSONstringify(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, '\t');
    }

    var 
        arr = [],
        _string = 'color:green',
        _number = 'color:darkorange',
        _boolean = 'color:blue',
        _null = 'color:magenta',
        _key = 'color:red';

    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var style = _number;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                style = _key;
            } else {
                style = _string;
            }
        } else if (/true|false/.test(match)) {
            style = _boolean;
        } else if (/null/.test(match)) {
            style = _null;
        }
        arr.push(style);
        arr.push('');
        return '%c' + match + '%c';
    });

    arr.unshift(json);

    console.log.apply(console, arr);
}

यहाँ एक बुकमार्क है जिसका आप उपयोग कर सकते हैं:

javascript:function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, '\t');}var arr = [],_string = 'color:green',_number = 'color:darkorange',_boolean = 'color:blue',_null = 'color:magenta',_key = 'color:red';json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {var style = _number;if (/^"/.test(match)) {if (/:$/.test(match)) {style = _key;} else {style = _string;}} else if (/true|false/.test(match)) {style = _boolean;} else if (/null/.test(match)) {style = _null;}arr.push(style);arr.push('');return '%c' + match + '%c';});arr.unshift(json);console.log.apply(console, arr);};void(0);

उपयोग:

var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);

संपादित करें: मैंने इस लाइन के साथ% प्रतीक से बचने की कोशिश की, चर घोषणा के बाद:

json = json.replace(/%/g, '%%');

लेकिन मुझे पता चला है कि क्रोम कंसोल में भागने से% का समर्थन नहीं कर रहा है। अजीब ... शायद यह भविष्य में काम करेगा।

चीयर्स!

यहां छवि विवरण दर्ज करें


1
मैंने उर कोड का उपयोग किया है, लेकिन मुझे आउटपुट जेनसन फॉर्मेट में मिल रहा है, लेकिन मुझे कलर नहीं मिल रहा है और आखिरी में मुझे कलर टैग मिल रहा है, यह आउटपुट {"एरर": {"कोड": 0, "मैसेज" है: "ओ"}}, रंग: लाल ,, रंग: लाल ,, रंग: गहरा:
ramesh027

25
var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

HTML में प्रदर्शित करने के मामले में, आपको एक बेलिस जोड़ना चाहिए <pre></pre>

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

उदाहरण:


1
"बालिस" क्या है?
डेन डस्केलस्क्यू

इसका मतलब फ्रेंच में "टैग" है
Aymeric Bouzy aybbyk

<pre>बहुत जरूरी है अगर आप एक में JSON दिखाने <div>। बस उस संकेत के लिए उत्कीर्ण!
मैनुअल

23

मैं JSONView Chrome एक्सटेंशन का उपयोग करता हूं (यह उतना ही सुंदर है जितना इसे प्राप्त होता है :):

संपादित करें: जोड़ा गया jsonreport.js

मैंने एक ऑनलाइन स्टैंड-अलोन JSON सुंदर प्रिंट दर्शक, jsonreport.js भी जारी किया है, जो मानव पठनीय HTML5 रिपोर्ट प्रदान करता है जिसका उपयोग आप किसी भी JSON डेटा को देखने के लिए कर सकते हैं।

आप न्यू जावास्क्रिप्ट एचटीएमएल 5 रिपोर्ट प्रारूप में प्रारूप के बारे में अधिक पढ़ सकते हैं ।


1
मुझे एक जावास्क्रिप्ट * .js लाइब्रेरी की आवश्यकता थी जो html एलिमेंट्स और क्लासेस को जोड़कर एक JSON स्ट्रिंग प्रिंट कर सके। Var result = prettyPrint ('{"key": "value"}') जैसे कुछ;
मार्क

21

आप उपयोग कर सकते हैं console.dir(), जो कि एक शॉर्टकट है console.log(util.inspect())। (अंतर केवल इतना है कि यह inspect()एक वस्तु पर परिभाषित किसी भी कस्टम फ़ंक्शन को बायपास करता है ।)

यह का उपयोग करता है वाक्य रचना-हाइलाइटिंग , स्मार्ट खरोज , कुंजी से निकाल देता है उद्धरण और सिर्फ सुंदर के रूप में यह हो जाता है के रूप में उत्पादन करता है।

const object = JSON.parse(jsonString)

console.dir(object, {depth: null, colors: true})

और कमांड लाइन के लिए:

cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"


इसे पाने का कोई तरीका तो इसका विस्तार होने लगा है?
डैनियल सोकोलोव्स्की

आपका क्या मतलब है @DanielSokolowski?
ad

Chrome डेवलपर टूल में, मुझे वें ऑब्जेक्ट कुंजियों को प्राप्त करने के लिए थोड़ा त्रिभुज पर क्लिक करना चाहिए, किसी भी तरह से इसे ऑटो विस्तारित करने के लिए? snag.gy/7wPqsl.jpg
डैनियल

MH। अच्छा प्रश्न। मैं एक के बारे में पता नहीं कर रहा हूँ, लेकिन यह वास्तव में मददगार होगा ...
adius

9

यहाँ user123444555621 का कमाल का HTML एक टर्मिनल के लिए अनुकूलित है। नोड स्क्रिप्ट को डीबग करने के लिए आसान:

function prettyJ(json) {
  if (typeof json !== 'string') {
    json = JSON.stringify(json, undefined, 2);
  }
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, 
    function (match) {
      let cls = "\x1b[36m";
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = "\x1b[34m";
        } else {
          cls = "\x1b[32m";
        }
      } else if (/true|false/.test(match)) {
        cls = "\x1b[35m"; 
      } else if (/null/.test(match)) {
        cls = "\x1b[31m";
      }
      return cls + match + "\x1b[0m";
    }
  );
}

उपयोग:

// thing = any json OR string of json
prettyJ(thing);

7

डीबगिंग उद्देश्य के लिए मैं उपयोग करता हूं:

कंसोल.डबग ("% o", डेटा);

3
-1; यह सिर्फ console.debug(data);(कम से कम) क्रोम और फ़ायरफ़ॉक्स में करने के बराबर है । यह एक JSON प्रतिनिधित्व नहीं दिखाता है data, अकेले एक सुंदर मुद्रित करें।
मार्क अमेरी

1
@MarkAmery 2 साल पहले यह सुविधा ब्राउज़र के लिए नई थी और केवल उसी तरह काम करती थी जैसा मैंने बताया। यदि आप बहुत छोटे हैं - मैं आपके लिए खुश हूँ! इसके अलावा वाक्यविन्यास console.debug("%s: %o x %d", str, data, cnt);भी किसी के लिए उपयोगी हो सकता है।
गवेंको

2
यह भी देखें कि console.dirकौन सा डेटा नेविगेट करने की अनुमति देता है।
क्रिस्टोफ रूसो

7

रूबी के लिए अन्य सुंदर प्रिंटर से असंतुष्ट, मैंने अपना खुद का लिखा ( NeatJSON ) और फिर इसे एक मुफ्त ऑनलाइन फॉर्मेटर सहित जावास्क्रिप्ट में पोर्ट किया । MIT लाइसेंस (काफी अनुमन्य) के तहत कोड मुफ्त है।

सुविधाएँ (सभी वैकल्पिक):

  • लाइन की चौड़ाई सेट करें और एक तरह से लपेटें जो ऑब्जेक्ट्स और एरेज़ को उसी लाइन पर रखता है जब वे फिट होते हैं, प्रति पंक्ति एक मान लपेटते हैं जब वे नहीं करते हैं।
  • यदि आप चाहें तो ऑब्जेक्ट कुंजियों को क्रमबद्ध करें।
  • ऑब्जेक्ट कुंजियों को संरेखित करें (कॉलनों को पंक्तिबद्ध करें)।
  • पूर्णांक को गड़बड़ाने के बिना, दशमलव की विशिष्ट संख्या के लिए फ़्लोटिंग पॉइंट संख्या को प्रारूपित करें।
  • 'शॉर्ट' रैपिंग मोड मान के रूप में एक ही लाइन पर ब्रैकेट्स / ब्रेसेस को खोलने और बंद करने के लिए डालता है, जो एक प्रारूप प्रदान करता है जो कुछ पसंद करते हैं।
  • कोलों और कॉमा से पहले / बाद में, कोष्ठक के बीच, सरणियों और वस्तुओं के लिए रिक्ति पर दानेदार नियंत्रण।
  • फ़ंक्शन वेब ब्राउज़र और Node.js. दोनों के लिए उपलब्ध है

मैं यहाँ स्रोत कोड को कॉपी करूँगा ताकि यह सिर्फ एक लाइब्रेरी का लिंक न हो, लेकिन मैं आपको GitHub प्रोजेक्ट पेज पर जाने के लिए प्रोत्साहित करता हूँ , क्योंकि इसे अप-टू-डेट रखा जाएगा और नीचे दिया गया कोड नहीं होगा।

(function(exports){
exports.neatJSON = neatJSON;

function neatJSON(value,opts){
  opts = opts || {}
  if (!('wrap'          in opts)) opts.wrap = 80;
  if (opts.wrap==true) opts.wrap = -1;
  if (!('indent'        in opts)) opts.indent = '  ';
  if (!('arrayPadding'  in opts)) opts.arrayPadding  = ('padding' in opts) ? opts.padding : 0;
  if (!('objectPadding' in opts)) opts.objectPadding = ('padding' in opts) ? opts.padding : 0;
  if (!('afterComma'    in opts)) opts.afterComma    = ('aroundComma' in opts) ? opts.aroundComma : 0;
  if (!('beforeComma'   in opts)) opts.beforeComma   = ('aroundComma' in opts) ? opts.aroundComma : 0;
  if (!('afterColon'    in opts)) opts.afterColon    = ('aroundColon' in opts) ? opts.aroundColon : 0;
  if (!('beforeColon'   in opts)) opts.beforeColon   = ('aroundColon' in opts) ? opts.aroundColon : 0;

  var apad  = repeat(' ',opts.arrayPadding),
      opad  = repeat(' ',opts.objectPadding),
      comma = repeat(' ',opts.beforeComma)+','+repeat(' ',opts.afterComma),
      colon = repeat(' ',opts.beforeColon)+':'+repeat(' ',opts.afterColon);

  return build(value,'');

  function build(o,indent){
    if (o===null || o===undefined) return indent+'null';
    else{
      switch(o.constructor){
        case Number:
          var isFloat = (o === +o && o !== (o|0));
          return indent + ((isFloat && ('decimals' in opts)) ? o.toFixed(opts.decimals) : (o+''));

        case Array:
          var pieces  = o.map(function(v){ return build(v,'') });
          var oneLine = indent+'['+apad+pieces.join(comma)+apad+']';
          if (opts.wrap===false || oneLine.length<=opts.wrap) return oneLine;
          if (opts.short){
            var indent2 = indent+' '+apad;
            pieces = o.map(function(v){ return build(v,indent2) });
            pieces[0] = pieces[0].replace(indent2,indent+'['+apad);
            pieces[pieces.length-1] = pieces[pieces.length-1]+apad+']';
            return pieces.join(',\n');
          }else{
            var indent2 = indent+opts.indent;
            return indent+'[\n'+o.map(function(v){ return build(v,indent2) }).join(',\n')+'\n'+indent+']';
          }

        case Object:
          var keyvals=[],i=0;
          for (var k in o) keyvals[i++] = [JSON.stringify(k), build(o[k],'')];
          if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
          keyvals = keyvals.map(function(kv){ return kv.join(colon) }).join(comma);
          var oneLine = indent+"{"+opad+keyvals+opad+"}";
          if (opts.wrap===false || oneLine.length<opts.wrap) return oneLine;
          if (opts.short){
            var keyvals=[],i=0;
            for (var k in o) keyvals[i++] = [indent+' '+opad+JSON.stringify(k),o[k]];
            if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
            keyvals[0][0] = keyvals[0][0].replace(indent+' ',indent+'{');
            if (opts.aligned){
              var longest = 0;
              for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
              var padding = repeat(' ',longest);
              for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
            }
            for (var i=keyvals.length;i--;){
              var k=keyvals[i][0], v=keyvals[i][1];
              var indent2 = repeat(' ',(k+colon).length);
              var oneLine = k+colon+build(v,'');
              keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
            }
            return keyvals.join(',\n') + opad + '}';
          }else{
            var keyvals=[],i=0;
            for (var k in o) keyvals[i++] = [indent+opts.indent+JSON.stringify(k),o[k]];
            if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
            if (opts.aligned){
              var longest = 0;
              for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
              var padding = repeat(' ',longest);
              for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
            }
            var indent2 = indent+opts.indent;
            for (var i=keyvals.length;i--;){
              var k=keyvals[i][0], v=keyvals[i][1];
              var oneLine = k+colon+build(v,'');
              keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
            }
            return indent+'{\n'+keyvals.join(',\n')+'\n'+indent+'}'
          }

        default:
          return indent+JSON.stringify(o);
      }
    }
  }

  function repeat(str,times){ // http://stackoverflow.com/a/17800645/405017
    var result = '';
    while(true){
      if (times & 1) result += str;
      times >>= 1;
      if (times) str += str;
      else break;
    }
    return result;
  }
  function padRight(pad, str){
    return (str + pad).substring(0, pad.length);
  }
}
neatJSON.version = "0.5";

})(typeof exports === 'undefined' ? this : exports);

5

बहुत बहुत धन्यवाद @all! पिछले उत्तरों के आधार पर, यहाँ एक और भिन्न विधि है जो पैरामीटर के रूप में कस्टम प्रतिस्थापन नियम प्रदान करती है:

 renderJSON : function(json, rr, code, pre){
   if (typeof json !== 'string') {
      json = JSON.stringify(json, undefined, '\t');
   }
  var rules = {
   def : 'color:black;',    
   defKey : function(match){
             return '<strong>' + match + '</strong>';
          },
   types : [
       {
          name : 'True',
          regex : /true/,
          type : 'boolean',
          style : 'color:lightgreen;'
       },

       {
          name : 'False',
          regex : /false/,
          type : 'boolean',
          style : 'color:lightred;'
       },

       {
          name : 'Unicode',
          regex : /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/,
          type : 'string',
          style : 'color:green;'
       },

       {
          name : 'Null',
          regex : /null/,
          type : 'nil',
          style : 'color:magenta;'
       },

       {
          name : 'Number',
          regex : /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/,
          type : 'number',
          style : 'color:darkorange;'
       },

       {
          name : 'Whitespace',
          regex : /\s+/,
          type : 'whitespace',
          style : function(match){
             return '&nbsp';
          }
       } 

    ],

    keys : [
       {
           name : 'Testkey',
           regex : /("testkey")/,
           type : 'key',
           style : function(match){
             return '<h1>' + match + '</h1>';
          }
       }
    ],

    punctuation : {
          name : 'Punctuation',
          regex : /([\,\.\}\{\[\]])/,
          type : 'punctuation',
          style : function(match){
             return '<p>________</p>';
          }
       }

  };

  if('undefined' !== typeof jQuery){
     rules = $.extend(rules, ('object' === typeof rr) ? rr : {});  
  }else{
     for(var k in rr ){
        rules[k] = rr[k];
     }
  }
    var str = json.replace(/([\,\.\}\{\[\]]|"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
    var i = 0, p;
    if (rules.punctuation.regex.test(match)) {
               if('string' === typeof rules.punctuation.style){
                   return '<span style="'+ rules.punctuation.style + '">' + match + '</span>';
               }else if('function' === typeof rules.punctuation.style){
                   return rules.punctuation.style(match);
               } else{
                  return match;
               }            
    }

    if (/^"/.test(match)) {
        if (/:$/.test(match)) {
            for(i=0;i<rules.keys.length;i++){
            p = rules.keys[i];
            if (p.regex.test(match)) {
               if('string' === typeof p.style){
                   return '<span style="'+ p.style + '">' + match + '</span>';
               }else if('function' === typeof p.style){
                   return p.style(match);
               } else{
                  return match;
               }                
             }              
           }   
            return ('function'===typeof rules.defKey) ? rules.defKey(match) : '<span style="'+ rules.defKey + '">' + match + '</span>';            
        } else {
            return ('function'===typeof rules.def) ? rules.def(match) : '<span style="'+ rules.def + '">' + match + '</span>';
        }
    } else {
        for(i=0;i<rules.types.length;i++){
         p = rules.types[i];
         if (p.regex.test(match)) {
               if('string' === typeof p.style){
                   return '<span style="'+ p.style + '">' + match + '</span>';
               }else if('function' === typeof p.style){
                   return p.style(match);
               } else{
                  return match;
               }                
          }             
        }

     }

    });

  if(true === pre)str = '<pre>' + str + '</pre>';
  if(true === code)str = '<code>' + str + '</code>';
  return str;
 }

"आरआर" तर्क क्या है?
manking

1
@manking ... नियम = $ .extend (नियम, ('ऑब्जेक्ट' === टाइपो आरआर); rr: {}); ... यह नियम को एक शासक वस्तु द्वारा विस्तारित करना है। (शायद आपको अपडेट मिले: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
webfan


4

डगलस क्रुकफोर्ड के JSON में जावास्क्रिप्ट लाइब्रेरी में स्ट्रिंग विधि के माध्यम से JSON प्रिंट करेगा।

आपको इस पुराने प्रश्न के उत्तर भी उपयोगी मिल सकते हैं : मैं JSON इन (यूनिक्स) शेल स्क्रिप्ट को कैसे प्रिंट कर सकता हूं?


4

मैं आज @ Pumbaa80 के कोड के साथ एक समस्या में भाग गया। मैं JSON सिंटैक्स को उस डेटा पर हाइलाइट करने के लिए लागू करने का प्रयास कर रहा हूं जिसे मैं एक मिथाइल दृश्य में प्रदान कर रहा हूं , इसलिए मुझे JSON.stringifyआउटपुट में सब कुछ के लिए DOM नोड बनाने की आवश्यकता है ।

मैं इसके घटक भागों में वास्तव में लंबे रेगेक्स को विभाजित करता हूं।

render_json = (data) ->
  # wraps JSON data in span elements so that syntax highlighting may be
  # applied. Should be placed in a `whitespace: pre` context
  if typeof(data) isnt 'string'
    data = JSON.stringify(data, undefined, 2)
  unicode =     /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/
  keyword =     /\b(true|false|null)\b/
  whitespace =  /\s+/
  punctuation = /[,.}{\[\]]/
  number =      /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/

  syntax = '(' + [unicode, keyword, whitespace,
            punctuation, number].map((r) -> r.source).join('|') + ')'
  parser = new RegExp(syntax, 'g')

  nodes = data.match(parser) ? []
  select_class = (node) ->
    if punctuation.test(node)
      return 'punctuation'
    if /^\s+$/.test(node)
      return 'whitespace'
    if /^\"/.test(node)
      if /:$/.test(node)
        return 'key'
      return 'string'

    if /true|false/.test(node)
      return 'boolean'

     if /null/.test(node)
       return 'null'
     return 'number'
  return nodes.map (node) ->
    cls = select_class(node)
    return Mithril('span', {class: cls}, node)

यहाँ Github पर संदर्भ में कोड


4

यहाँ एक साधारण 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>;
};

इसे इस कोड में काम करते हुए देखें: https://codepen.io/benshope/pen/BxVpjo

उम्मीद है की वो मदद करदे!


4

आप उपयोग कर सकते हैं JSON.stringify(your object, null, 2) दूसरे पैरामीटर को एक प्रतिकृति फ़ंक्शन के रूप में उपयोग किया जा सकता है जो पैरामीटर के रूप में कुंजी और वैल लेता है। इस का उपयोग उस स्थिति में किया जा सकता है जब आप अपने JSON ऑब्जेक्ट के भीतर कुछ संशोधित करना चाहते हैं।

अधिक संदर्भ: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify


3

यदि आपको एक textarea में काम करने के लिए इसकी आवश्यकता है तो स्वीकृत समाधान काम नहीं करेगा।

<textarea id='textarea'></textarea>

$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true));

function formatJSON(json,textarea) {
    var nl;
    if(textarea) {
        nl = "&#13;&#10;";
    } else {
        nl = "<br>";
    }
    var tab = "&#160;&#160;&#160;&#160;";
    var ret = "";
    var numquotes = 0;
    var betweenquotes = false;
    var firstquote = false;
    for (var i = 0; i < json.length; i++) {
        var c = json[i];
        if(c == '"') {
            numquotes ++;
            if((numquotes + 2) % 2 == 1) {
                betweenquotes = true;
            } else {
                betweenquotes = false;
            }
            if((numquotes + 3) % 4 == 0) {
                firstquote = true;
            } else {
                firstquote = false;
            }
        }

        if(c == '[' && !betweenquotes) {
            ret += c;
            ret += nl;
            continue;
        }
        if(c == '{' && !betweenquotes) {
            ret += tab;
            ret += c;
            ret += nl;
            continue;
        }
        if(c == '"' && firstquote) {
            ret += tab + tab;
            ret += c;
            continue;
        } else if (c == '"' && !firstquote) {
            ret += c;
            continue;
        }
        if(c == ',' && !betweenquotes) {
            ret += c;
            ret += nl;
            continue;
        }
        if(c == '}' && !betweenquotes) {
            ret += nl;
            ret += tab;
            ret += c;
            continue;
        }
        if(c == ']' && !betweenquotes) {
            ret += nl;
            ret += c;
            continue;
        }
        ret += c;
    } // i loop
    return ret;
}

3

यदि आप किसी वेब पेज पर json को पूर्वनिर्मित करने के लिए एक अच्छी लाइब्रेरी की तलाश कर रहे हैं ...

Prism.js बहुत अच्छा है।

http://prismjs.com/

मैंने इंडेंटेशन प्राप्त करने के लिए JSON.stringify (obj, अपरिभाषित, 2) का उपयोग किया और फिर एक विषय जोड़ने के लिए प्रिज्म का उपयोग करना एक अच्छा तरीका था।

यदि आप JSON में एक अजाक्स कॉल के माध्यम से लोड कर रहे हैं, तो आप प्रिज्म की उपयोगिता के तरीकों को चलाने के लिए चला सकते हैं

उदाहरण के लिए:

Prism.highlightAll()

1

यह अच्छा है:

https://github.com/mafintosh/json-markup सेmafintosh

const jsonMarkup = require('json-markup')
const html = jsonMarkup({hello:'world'})
document.querySelector('#myElem').innerHTML = html

एचटीएमएल

<link ref="stylesheet" href="style.css">
<div id="myElem></div>

उदाहरण स्टाइलशीट यहां मिल सकती है

https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css

1

कोई भी समाधान नहीं मिल रहा है जो कंसोल के लिए अच्छा सिंटैक्स हाइलाइटिंग था, इसलिए यहां मेरा 2p है

स्थापित करें और क्ली-हाइलाइट निर्भरता जोड़ें

npm install cli-highlight --save

विश्व स्तर पर लॉगजोन को परिभाषित करें

const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
                               highlight( JSON.stringify(obj, null, 4), 
                                          { language: 'json', ignoreIllegals: true } ));

उपयोग

console.logjson({foo: "bar", someArray: ["string1", "string2"]});

उत्पादन


0

मैं HighlightJS का उपयोग करने की सलाह देता हूं । यह स्वीकृत उत्तर के रूप में एक ही सिद्धांत का उपयोग करता है , लेकिन कई अन्य भाषाओं के लिए भी काम करता है , और कई पूर्व-निर्धारित रंग योजनाएं हैं । आवश्यकताएँ का उपयोग करते हुए , आप के साथ एक संगत मॉड्यूल उत्पन्न कर सकते हैं

python3 tools/build.py -tamd json xml <specify other language here>

पीढ़ी Python3 और Java पर निर्भर करती है। -nएक गैर-छोटा संस्करण बनाने के लिए जोड़ें ।


0

यहाँ आप मूल फ़ंक्शन का उपयोग किए बिना कैसे प्रिंट कर सकते हैं।

function pretty(ob, lvl = 0) {

  let temp = [];

  if(typeof ob === "object"){
    for(let x in ob) {
      if(ob.hasOwnProperty(x)) {
        temp.push( getTabs(lvl+1) + x + ":" + pretty(ob[x], lvl+1) );
      }
    }
    return "{\n"+ temp.join(",\n") +"\n" + getTabs(lvl) + "}";
  }
  else {
    return ob;
  }

}

function getTabs(n) {
  let c = 0, res = "";
  while(c++ < n)
    res+="\t";
  return res;
}

let obj = {a: {b: 2}, x: {y: 3}};
console.log(pretty(obj));

/*
  {
    a: {
      b: 2
    },
    x: {
      y: 3
    }
  }
*/

0

डीबगिंग उद्देश्यों के लिए ऑब्जेक्ट प्रदर्शित करने का सबसे सरल तरीका:

console.log("data",data) // lets you unfold the object manually

यदि आप DOM में ऑब्जेक्ट प्रदर्शित करना चाहते हैं, तो आपको विचार करना चाहिए कि इसमें ऐसे स्ट्रिंग्स हो सकते हैं जिन्हें HTML के रूप में समझा जाएगा। इसलिए, आपको कुछ बचने की ज़रूरत है ...

var s = JSON.stringify(data,null,2) // format
var e = new Option(s).innerHTML // escape
document.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display

0
<!-- here is a complete example pretty print with more space between lines-->
<!-- be sure to pass a json string not a json object -->
<!-- use line-height to increase or decrease spacing between json lines -->

<style  type="text/css">
.preJsonTxt{
  font-size: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 200%;
}
.boxedIn{
  border: 1px solid black;
  margin: 20px;
  padding: 20px;
}
</style>

<div class="boxedIn">
    <h3>Configuration Parameters</h3>
    <pre id="jsonCfgParams" class="preJsonTxt">{{ cfgParams }}</pre>
</div>

<script language="JavaScript">
$( document ).ready(function()
{
     $(formatJson);

     <!-- this will do a pretty print on the json cfg params      -->
     function formatJson() {
         var element = $("#jsonCfgParams");
         var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
     }
});
</script>

0

पर प्रकाश डाला और इसे सुशोभित करने HTMLका उपयोग कर Bootstrap:

function prettifyJson(json, prettify) {
    if (typeof json !== 'string') {
        if (prettify) {
            json = JSON.stringify(json, undefined, 4);
        } else {
            json = JSON.stringify(json);
        }
    }
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
        function(match) {
            let cls = "<span>";
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = "<span class='text-danger'>";
                } else {
                    cls = "<span>";
                }
            } else if (/true|false/.test(match)) {
                cls = "<span class='text-primary'>";
            } else if (/null/.test(match)) {
                cls = "<span class='text-info'>";
            }
            return cls + match + "</span>";
        }
    );
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.