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>"

例子：

var jsonObj={“streetLabel”：“Avenue Anatole France”，“city”：“Paris 07”，“postalCode”：“75007”；document.getElementById（“result before”）.innerHTML=JSON.stringfy（jsonObj）；document.getElementById（“resultafter”）.innerHTML=“<pre>”+JSON.stringify（jsonObj，未定义，2）+“</pre>”div｛float:left；clear:both；margin:1em 0；｝<div id=“result before”></div><div id=“result after”></div>

这很好：

https://github.com/mafintosh/json-markup来自马芬托什

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

HTML

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

样式表示例可在此处找到

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

我今天遇到了@Pumbaa80的代码问题。我试图将JSON语法高亮显示应用于我在Mithril视图中呈现的数据，因此我需要为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上的上下文代码

您可以使用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（newstream.Writeable（｛write:cchunk=>console.dir（json.parse（chunk），｛depth:null，colors:true｝）｝）”

出于调试目的，我使用：

console.debug("%o", data);

https://getfirebug.com/wiki/index.php/Console_APIhttps://developer.mozilla.org/en-US/docs/DOM/console

基于@user123444555621，稍显现代。

const clsMap = [
    [/^".*:$/, "key"],
    [/^"/, "string"],
    [/true|false/, "boolean"],
    [/null/, "key"],
    [/.*/, "number"],
]

const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span class="${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

您还可以在js中指定颜色（不需要CSS）

const clsMap = [
    [/^".*:$/, "red"],
    [/^"/, "green"],
    [/true|false/, "blue"],
    [/null/, "magenta"],
    [/.*/, "darkorange"],
]

const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

和更少正则表达式的版本

const clsMap = [
    [match => match.startsWith('"') && match.endsWith(':'), "red"],
    [match => match.startsWith('"'), "green"],
    [match => match === "true" || match === "false" , "blue"],
    [match => match === "null", "magenta"],
    [() => true, "darkorange"],
];
    
const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([fn]) => fn(match))[1]}">${match}</span>`);