Javascript 如何在HTML页面上显示原始JSON数据

可能重复：

我希望在HTML页面上显示我的原始JSON数据，就像JSONview一样。例如，我的原始json数据是：

  {
   "hey":"guy",
   "anumber":243,
   "anobject":{
      "whoa":"nuts",
      "anarray":[
         1,
         2,
         "thr<h1>ee"
      ],
      "more":"stuff"
   },
   "awesome":true,
   "bogus":false,
   "meaning":null,
   "japanese":"明日がある。",
   "link":"http://jsonview.com",
   "notLink":"http://jsonview.com is great"
}

{
“嘿”：“伙计”，
“成员”：243，
“对象”：{
“哇”：“坚果”，
“混乱”：[
1.
2.
“三个”
],
“更多”：“东西”
},
“真棒”：没错，
"假":假,，
“含义”：空，
“日语”：明日がある。",
“链接”：http://jsonview.com",
“notLink”：http://jsonview.com “太好了”
}

它来自，我想要实现的是，如果你使用Chrome并安装了JSONView插件

---

我已经试过了，但没能理解它是如何工作的。我想使用JS脚本（CSS来突出显示）要自定义由ajax检索的原始JSON数据的格式，并最终将其放在HTML页面上的任何位置，例如放入div元素中。是否有任何现有的JS库可以实现此目的？或者如何实现此目的？

请注意，您提供的链接不是HTML页面，而是JSON文档。格式由浏览器完成

您必须决定是否：

您希望显示原始JSON（而不是HTML页面），如示例所示

显示带有格式化JSON的HTML页面

如果需要1.，只需告诉应用程序使用JSON呈现响应体，设置MIME类型（application/JSON），等等。 在这种情况下，格式由浏览器（和/或浏览器插件）处理

如果是2，则需要使用JSON呈现一个简单的最小HTML页面，您可以通过几种方式突出显示该页面：

• 服务器端，取决于您的堆栈。几乎每种语言都有解决方案
• 带有Javascript高亮显示库的客户端

如果您提供有关堆栈的更多详细信息，则更容易提供示例或资源

---

编辑：例如，对于客户端JS突出显示，您可以尝试。

除了

标记之外的任何HTML标记中的JSON都只是一个文本。因此，这就像您在HTML页面中添加了一个故事

但是，关于格式，那是另一回事。我想你应该改变你问题的标题

---

请看问题。另请看第页。

我认为在HTML页面上显示数据所需的全部内容是

例如，如果您的JSON存储方式如下：

var jsonVar = {
        text: "example",
        number: 1
    };

然后，只需执行以下操作即可将其转换为字符串：

var jsonStr = JSON.stringify(jsonVar);

然后可以直接插入HTML，例如：

document.body.innerHTML = jsonStr;

当然，您可能希望通过

getElementById

用其他元素替换

body

至于问题中的CSS部分，在将字符串化对象放入DOM之前，可以使用RegExp操作该对象

var jsonVar = {
        text: "example",
        number: 1,
        obj: {
            "more text": "another example"
        },
        obj2: {
             "yet more text": "yet another example"
        }
    }, // THE RAW OBJECT
    jsonStr = JSON.stringify(jsonVar),  // THE OBJECT STRINGIFIED
    regeStr = '', // A EMPTY STRING TO EVENTUALLY HOLD THE FORMATTED STRINGIFIED OBJECT
    f = {
            brace: 0
        }; // AN OBJECT FOR TRACKING INCREMENTS/DECREMENTS,
           // IN PARTICULAR CURLY BRACES (OTHER PROPERTIES COULD BE ADDED)

regeStr = jsonStr.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (m, p1) {
var rtnFn = function() {
        return '<div style="text-indent: ' + (f['brace'] * 20) + 'px;">' + p1 + '</div>';
    },
    rtnStr = 0;
    if (p1.lastIndexOf('{') === (p1.length - 1)) {
        rtnStr = rtnFn();
        f['brace'] += 1;
    } else if (p1.indexOf('}') === 0) {
         f['brace'] -= 1;
        rtnStr = rtnFn();
    } else {
        rtnStr = rtnFn();
    }
    return rtnStr;
});

document.body.innerHTML += regeStr; // appends the result to the body of the HTML document

var jsonVar={
文本：“示例”，
编号：1，
obj：{
“更多文本”：“另一个示例”
},
obj2：{
“更多文本”：“又一个例子”
}
}，//原始对象
jsonStr=JSON.stringify（jsonVar），//对象字符串化
regeStr=''，//最终保存格式化字符串化对象的空字符串
f={
括号：0
}；//用于跟踪增量/减量的对象，
//特别是大括号（可以添加其他属性）
regeStr=jsonStr.replace（/（{124;}[，]*.[^{}:+:[^{}:，]*[，{]*）/g，函数（m，p1）{
var rtnFn=函数（）{
返回“+p1+”；
},
rtnStr=0；
if（p1.lastIndexOf（'{'）==（p1.length-1））{
rtnStr=rtnFn（）；
f['brace']+=1；
}else if（p1.indexOf（'}'）==0）{
f['brace']-=1；
rtnStr=rtnFn（）；
}否则{
rtnStr=rtnFn（）；
}
返回rtnStr；
});
document.body.innerHTML+=regeStr；//将结果附加到HTML文档的正文中

---

这段代码只是在字符串中查找对象的各个部分，并将它们分成div（尽管您可以更改其中的HTML部分）。但是，每次遇到大括号时，它都会根据是开始大括号还是结束大括号来增加或减少缩进（行为类似于）。但您可以将其作为不同格式的基础。

尝试语法高亮插件。JSON打印到

块的示例-您应该尝试

块。它很简单，工作正常。当我发布答案时，这个问题显然已结束。我将在这里留下我的答案，以防对任何人有用答案中给出的代码比我的更神奇：-）非常感谢！！我想尝试一下你的方法。我的HTML页面添加了jquery库，我想知道是否还有其他基于jquery的库可以实现我的目标。我想轻松编码…主要是因为我不擅长javascript--我会尝试！这是一个很长的解决方案。意思是有点复杂。我发现了一个棘手的解决方案，通过它我可以以更好的格式显示json数据。这是你的解决方案：好的，所以使用正则表达式进行格式化是绝对糟糕的。正则表达式不能很好地处理嵌套或嵌入（例如，在json内的字符串中）等。只需使用

json.stringify（数据，null，2）

将为您缩进字符串。

div.innerHtml=''+JSON.stringify（数据，null，2）+''；

不需要所有这些代码。很抱歉，英语不是我的母语。我想要的是2。实际情况是这样的：我通过DIV元素获取数据，然后放入HTML页面。原始数据不可读，所以我想像JSONView那样格式化它，但JSONView只格式化数据，这只是从serv获取的json数据呃，不包含html元素。对于hightlight.js，我已经尝试过了，但似乎不起作用。json数据只显示在一行中，我不知道为什么。我检查了源文件，似乎行json数据已写入…e，我无法从…Hi timon.ma获得更多文档。在这种情况下，我建议