23 Вопрос: Как мне красиво распечатать JSON с помощью JavaScript?

вопрос создан в Tue, Jan 21, 2014 12:00 AM

Как я могу отобразить JSON в удобном для чтения (для читателей) формате? Я ищу в первую очередь отступы и пробелы, возможно, даже с цветами /font-styles /etc.

    
2037
  1. 2016-03-02 03: 28: 44Z
  2. 2016-11-29 21: 58: 13Z
  3. Если вы просто выводите html, вы можете заключить его в тег <pre>.
    2018-03-30 04: 36: 04Z
23 ответа                              23                         

реализована симпатичная печать изначально в 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

Или полный фрагмент ниже:

р>

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
    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>';
    });
}

var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
var str = JSON.stringify(obj, undefined, 4);

output(str);
output(syntaxHighlight(str));
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
    
4349
2017-05-31 10: 48: 56Z
  1. Супер круто. Я добавил функцию, чтобы открыть это в новом окне для отладки: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "< head > < style > pre {outline: 1px solid #ccc; отступ: 5px; margin: 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 (HTML);
    2012-07-30 02: 07: 44Z
  2. Отлично. Не забывайте, что ему нужны css и
    function output(inp) {
        document.body.appendChild(document.createElement('pre')).innerHTML = inp;
    }
    
    function syntaxHighlight(json) {
        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>';
        });
    }
    
    var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
    var str = JSON.stringify(obj, undefined, 4);
    
    output(str);
    output(syntaxHighlight(str));
    .
    2013-06-04 05: 37: 16Z
  3. по какой-то причине, когда я предупреждаю об этом, он действительно показывает отформатированный, однако все еще показывает плоскую строку, когда я выплевываю ее в div через jQuery: $("# actionResponse "). show (). html (prettifyObject (data), null, '\t'); где prettifyObject - это метод, который я создал и который содержит ваши первые две строки выше.
    2013-12-16 06: 18: 33Z
  4. @ CoffeeAddict Убедитесь, что ваш элемент
    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }
    имеет <pre> в качестве стиля CSS.
    2013-12-16 08: 52: 01Z
  5. Обратите внимание, что #transactionResponse работает с объектами JSON, а не со строками JSON. Если у вас есть строка, вам нужно сначала white-space: pre;
    2014-08-05 12: 40: 30Z

Пользователь Pumbaa80 ответит отлично, если у вас есть объект , который вы хотите красиво напечатать. Если ты'Начиная с правильной JSON строки , которую вы хотите печатать, вам нужно сначала преобразовать ее в объект:

stringify(...)

Это создает объект JSON из строки, а затем преобразует его обратно в строку, используя красивую печать JSON stringify.

    
218
2016-01-14 03: 57: 55Z
  1. Это сработало для меня, но выдало ошибку, используя JSON.parse(...), поэтому я изменил ее на
    var jsonString = '{"some":"json"}';
    var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);  
    
    . Зависит от вашего JSON /Object.
    2014-08-02 22: 20: 29Z
  2. Обратите внимание, что при отображении строки ее необходимо заключить в теги JSON.parse.
    2017-02-10 16: 05: 22Z
  3. @ Jazzy JSON.stringify(jsonString, null, 2) умирает, только если у вас есть недопустимая строка JSON или она уже преобразована в объект ... убедитесь, что вы знаете, с каким типом данных вы имеете дело, прежде чем пытаться до <pre></pre>
    2017-04-05 00: 16: 23Z
  4. @ Undistraction Ваш комментарий был мне полезен, я проверю необходимость проверить, что именно делает JSON.parse.
    2017-12-05 15: 20: 52Z
  5. @ Jazzy Если вам нужно было это сделать, у вас не было строки JSON, у вас был обычный объект. JSON - это всегда строка. Это просто строковое представление объекта Javascript.
    2018-01-03 02: 53: 09Z

Основываясь на ответе Pumbaa80, я изменил код, чтобы использовать цвета console.log (работающие на Chrome наверняка), а не HTML. Вывод можно увидеть внутри консоли. Вы можете редактировать переменные _ внутри функции, добавив еще несколько стилей.

JSON.parse

Вот букмарклет, который вы можете использовать:

pre

Использование:

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

Но я обнаружил, что Chrome не поддерживает% экранирования в консоли. Странно ... Может быть, это сработает в будущем.

Ура!

 введите описание изображения здесь

    
24
2016-12-19 22: 03: 38Z
  1. Я использовал ваш код, но я получаю вывод в формате json, но я не получаю цвет, а также в последнем я получаю тег цвета, это вывод { "error": {"code": 0, "message": "O"}}, цвет: красный , цвет: красный , цвет: darkorange
    2014-04-25 09: 05: 46Z
  2. + 1 за предложение использования в качестве букмарклета! спасибо
    2014-08-06 16: 45: 04Z

Я использую расширение JSONView Chrome (оно довольно красивое :)

Изменить: добавлено

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

Я также выпустил онлайновый автономный JSONreport Viewer для просмотра печати JSON, который предоставляет удобочитаемый отчет HTML5, который можно использовать для просмотра любых данных JSON.

Подробнее о формате можно прочитать в новом формате отчета JavaScript HTML5 . .

    
20
2014-07-11 00: 46: 22Z
  1. Мне была нужна библиотека Javascript * .js, которая могла бы печатать строку JSON, добавляя элементы и классы HTML. Что-то вроде var result = prettyPrint ('{"key": "value"}');
    2011-01-30 19: 23: 55Z

Лучше.

Prettify JSON Array в Javascript

json = json.replace(/%/g, '%%');
    
20
2017-10-21 10: 19: 59Z
  1. Лучше, чем что и как?
    2018-07-06 09: 48: 34Z
  2. @ DanDascalescu Лучше, чем все вышеперечисленное?
    2018-07-07 06: 31: 04Z
  3. Спасибо! Это решение - то, что я искал лично, потому что я хотел просто вставить отступ JSON в текстовое поле < textarea >
    2018-10-24 21: 44: 31Z

Вы можете использовать jsonreport.js, который является ярлыком для

JSON.stringify(jsonobj,null,'\t')
. (Единственное отличие состоит в том, что он обходит любую пользовательскую функцию console.dir(), определенную для объекта.)

Он использует подсветку синтаксиса , интеллектуальные отступы , удаляет кавычки из ключей и просто делает вывод максимально привлекательным. р> console.log(util.inspect())

и для командной строки:

inspect() р>     

17
2016-05-02 13: 18: 57Z
  1. Есть ли способ получить его, чтобы он начал расширяться?
    2016-07-21 15: 00: 15Z
  2. Что вы имеете в виду @DanielSokolowski?
    2016-07-21 15: 42: 27Z
  3. в инструментах разработчика Chrome Я должен щелкнуть маленький треугольник, чтобы получить ключи объектов, какой-нибудь способ его автоматического расширения? snag.gy/7wPqsl.jpg
    2016-07-22 13: 08: 02Z
  4. Mh. Хороший вопрос. Я не знаю ни одного, но это было бы действительно полезно ...
    2016-07-24 07: 20: 09Z
const object = JSON.parse(jsonString)

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

В случае отображения в HTML, вы должны добавить баланс cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"

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

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

Пример: р>

р>

<pre></pre>
    
15
2018-07-12 03: 29: 50Z
  1. Лучший ответ - краткое и простое решение
    document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
    
    2018-11-27 17: 18: 32Z
  2. Что такое "balise"?
    2019-01-04 00: 34: 59Z

Вот удивительный HTML12 пользователя user123444555621приспособлен для терминалов. Удобно для отладки скриптов Node:

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

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

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
div { float:left; clear:both; margin: 1em 0; }
<div id="result-before"></div>
<div id="result-after"></div>

Использование:

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

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

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
    
6
2018-07-13 07: 35: 34Z

В целях отладки я использую:

div { float:left; clear:both; margin: 1em 0; }
5
2013-01-10 14: 11: 26Z
  1. - 1; это эквивалентно выполнению
    <div id="result-before"></div>
    <div id="result-after"></div>
    в (как минимум) Chrome и Firefox. Он не отображает JSON-представление <pre>, не говоря уже о довольно напечатанном.
    2014-05-31 21: 06: 39Z
  2. @ MarkAmery 2 года назад эта функция была новой для браузера и работала только так, как я описал. Если вы слишком молоды - я рад за вас! Также такой синтаксис, как
    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";
        }
      );
    }
    
    , все еще может быть полезен кому-то.
    2014-05-31 21: 15: 08Z
  3. Также посмотрите
    // thing = any json OR string of json
    prettyJ(thing);
    
    , который позволяет перемещаться по данным.
    2014-09-25 13: 19: 25Z

Неудовлетворенный другими красивыми принтерами для Ruby, я написал свой ( NeatJSON ), а затем перенес его в JavaScript , включая бесплатный онлайн-форматер . Код свободен под лицензией MIT (довольно разрешительный).

Функции (все необязательно):

  • Устанавливайте ширину линии и перенос таким образом, чтобы объекты и массивы оставались на одной строке, когда они уместились, оборачивая по одному значению на строку, если они не подходят.
  • Сортируйте ключи объекта, если хотите.
  • Совместите ключи объекта (выровняйте двоеточия).
  • Форматируйте числа с плавающей запятой в определенное количество десятичных знаков, не путая целые числа.
  • Режим обтекания "Short" помещает открывающие и закрывающие скобки /скобки в одну строку со значениями, предоставляя формат, который некоторые предпочитают.
  • Детальный контроль за расстоянием между массивами и объектами, между скобками, перед /после двоеточий и запятых.
  • Функция доступна как для веб-браузеров, так и для Node.js.

Я скопирую здесь исходный код, чтобы это была не просто ссылка на библиотеку, но я призываю вас перейти на страница проекта GitHub , так как она будет обновляться, а приведенный ниже код - нет.

console.debug("%o", data);
    
5
2015-04-19 21: 49: 25Z

Большое спасибо @all! Основываясь на предыдущих ответах, вот еще один вариант метода, предоставляющий пользовательские правила замены в качестве параметра:

console.debug(data);     
3
2016-11-29 23: 13: 10Z
  1. Что такое аргумент "rr"?
    2017-04-24 14: 19: 47Z
  2. @ manking ... rules = $.extend (rules, ('object' === typeof rr)? rr: {}); ... это расширение набора правил объектом rulset. (может быть, вы найдете обновления: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js /… )
    2017-04-28 08: 32: 38Z

Хорошо работает:

data

Подробнее читайте здесь: https: //developer.mozilla .org /PT-BR /Docs /Web /API /консоль /таблица

    
3
2017-03-15 11: 51: 24Z
  1. console.table () хорошо использует разработку, с которой я работаю
    2017-04-03 08: 37: 35Z

JSON Дугласа Крокфорда в библиотеке JavaScript будет довольно печатать JSON с помощью метода stringify.

Вы можете также найти ответы на этот старый вопрос полезными: Как мне напечатать JSON в (unix) сценарии оболочки?

    
2
2017-05-23 12: 02: 45Z

Сегодня у меня возникла проблема с кодом @ Pumbaa80. Я пытаюсь применить подсветку синтаксиса JSON к данным, которые отображаю в мифриловом представлении, поэтому мне нужно создать DOM-узлы для всего в выводе console.debug("%s: %o x %d", str, data, cnt);.

Я также разделил действительно длинное регулярное выражение на его составные части.

console.dir

В контекстном коде на Github 2

2017-08-03 04: 35: 55Z

Если это необходимо для работы в текстовой области, принятое решение не будет работать.

(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);
р>

 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;
 }
console.table()
    
1
2017-04-05 00: 13: 26Z

Если вы ищете красивую библиотеку для предварительной настройки json на веб-странице ...

Prism.js довольно хорош.

http://prismjs.com/

Я обнаружил, что использование JSON.stringify (obj, undefined, 2) для получения отступа, а затем использование призмы для добавления темы было хорошим подходом.

Если вы загружаете в JSON с помощью вызова ajax, вы можете запустить один из служебных методов Prism для предварительного преобразования

Например:

JSON.stringify     
1
2017-11-19 16: 24: 06Z

Вот простой компонент формата /цвета JSON, написанный на React:

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)

Посмотрите, как это работает в этом CodePen: https://codepen.io/benshope/pen/BxVpjo

Надеюсь, это поможет!

    
1
2018-05-13 07: 36: 53Z

Вы можете использовать <textarea id='textarea'></textarea> Второй параметр можно использовать в качестве функции заменителя, который принимает ключ и Val в качестве параметров. Это можно использовать в случае, если вы хотите что-то изменитьвнутри вашего объекта JSON.

дополнительная ссылка: https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify р>     

1
2018-12-28 08: 45: 09Z

Я рекомендую использовать HighlightJS . Он использует тот же принцип , что и принятый ответ, но работает и для многих других языков и имеет множество предварительно определенных цветовых схем . Если вы используете RequireJS , вы можете создать совместимый модуль с

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

Поколение опирается на Python3 и Java. Добавьте

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;
}
, чтобы создать версию без минимизации.     
0
2014-09-03 13: 32: 55Z

Это хорошо:

https://github.com/mafintosh/json-markup от

Prism.highlightAll()
р>
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>;
};

HTML

JSON.stringify(your object, null, 2)

Пример таблицы стилей можно найти здесь

python3 tools/build.py -tamd json xml <specify other language here>
    
0
2016-12-22 22: 14: 24Z

Вот как вы можете печатать без использования встроенной функции.

-n     
0
2017-11-24 20: 11: 30Z

Самый простой способ отобразить объект в целях отладки:

mafintosh

Если вы хотите отобразить объект в DOM, вы должны учитывать, что он может содержать строки, которые будут интерпретироваться как HTML. Поэтому вам нужно сделать несколько побегов ...

const jsonMarkup = require('json-markup')
const html = jsonMarkup({hello:'world'})
document.querySelector('#myElem').innerHTML = html
    
0
2018-07-04 03: 48: 02Z

Не удалось найти ни одного решения с хорошей подсветкой синтаксиса для консоли, поэтому вот мой 2p

Установить & Добавить зависимость cli-highlight

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

Определить logjson глобально

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

Использование

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
    }
  }
*/

 output

    
0
2019-01-08 18: 05: 15Z
console.log("data",data) // lets you unfold the object manually
источник размещен Вот