blocks|key|3047564|text|请注意，您提供的链接不是HTML页面，而是JSON文档。格式化由浏览器完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3047565|你必须决定是否：|3047566|3047567|您希望显示原始JSON+(而不是HTML页面)，如示例|ordered-list-item|3047568|所示显示带有格式化JSON|3047569|的HTML页面|3047570|如果需要1.，只需告诉应用程序使用JSON呈现响应正文，设置MIME类型(+application+/json)等。在这种情况下，格式化由浏览器(和/或浏览器插件)处理。|3047571|如果是2.，则只需使用JSON呈现一个简单的最小HTML页面，您可以通过几种方式突出显示它：|3047572|3047573|服务器端，具体取决于您的堆栈。几乎每个language|unordered-list-item|3047574|client-side都有使用Javascript亮点库的解决方案。|3047575|3047576|如果您提供了更多关于堆栈的详细信息，那么提供示例或资源就会更容易。|3047577|编辑:例如，对于客户端JS突出显示，您可以尝试higlight.js。|offset|length|3047578|entityMap|0|LINK|mutability|MUTABLE|url|http://softwaremaniacs.org/soft/highlight/en/^0|0|0|0|0|0|0|0|0|0|0|0|0|0|N|B|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1D|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|1E|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1F|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1G|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1H|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1J|8|@]|9|@]|A|$]]|$1|T|3|U|5|S|7|1K|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1N|8|@]|9|@$10|1O|11|1P|1|1Q]]|A|$]]|$1|12|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

Note that the link you provided does is not an HTML page, but rather a JSON document. The formatting is done by the browser.

You have to decide if:

<ol>
<li>You want to show the raw JSON (not an HTML page), as in your example</li>
<li>Show an HTML page with formatted JSON</li>
</ol>

If you want 1., just tell your application to render a response body with the JSON, set the MIME type (application/json), etc.
In this case, formatting is dealt by the browser (and/or browser plugins)

If 2., it's a matter of rendering a simple minimal HTML page with the JSON where you can highlight it in several ways:

<ul>
<li>server-side, depending on your stack. There are solutions for almost every language</li>
<li>client-side with Javascript highlight libraries. </li>
</ul>

If you give more details about your stack, it's easier to provide examples or resources.

EDIT: For client side JS highlighting you can try <a href="http://softwaremaniacs.org/soft/highlight/en/" rel="noreferrer" title="highligh.js">higlight.js</a>, for instance.

blocks|key|204552|text|除了<script>标签之外，任何超文本标记中的JSON都只是一个文本。因此，这就像您向HTML页面添加了一个故事。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|204553|然而，关于格式，那是另一回事。我想你应该改变你问题的标题。|204554|看一看this问题。另请参阅this页面。|204555|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/883977/display-json-as-html|1|http://chris.photobooks.com/json/default.htm^0|2|8|0|0|3|4|0|E|4|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]|$9|11|A|12|1|13]]|E|$]]|$1|J|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

JSON in any HTML tag except <code>&lt;script&gt;</code> tag would be a mere text. Thus it's like you add a story to your HTML page.

However, about formatting, that's another matter. I guess you should change the title of your question.

Take a look at <a href="https://stackoverflow.com/questions/883977/display-json-as-html">this</a> question. Also see <a href="http://chris.photobooks.com/json/default.htm" rel="nofollow noreferrer">this</a> page.

blocks|key|3047625|text|我认为在超文本标记语言页面上显示数据所需要的就是JSON.stringify。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3047626|例如，如果您的JSON存储如下：|3047627|var+jsonVar+=+{
++++++++text:+"example",
++++++++number:+1
++++};|code-block|syntax|javascript|3047628|然后，您只需执行此操作即可将其转换为字符串：|3047629|var+jsonStr+=+JSON.stringify(jsonVar);|3047630|然后，您可以直接插入到HTML中，例如：|3047631|document.body.innerHTML+=+jsonStr;|3047632|当然，您可能希望通过getElementById将body替换为其他元素。|3047633|至于问题的CSS部分，您可以在将字符串对象放入DOM之前使用RegExp来操作它。例如，这段代码(also+on+JSFiddle+for+demonstration+purposes)应该注意大括号的缩进。|3047634|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(/({%7C}[,]*%7C[%5E{}:]%2B:[%5E{}:,]*[,{]*)/g,+function+(m,+p1)+{
var+rtnFn+=+function()+{
++++++++return+'<div+style="text-indent:+'+%2B+(f['brace']+*+20)+%2B+'px;">'+%2B+p1+%2B+'</div>';
++++},
++++rtnStr+=+0;
++++if+(p1.lastIndexOf('{')+===+(p1.length+-+1))+{
++++++++rtnStr+=+rtnFn();
++++++++f['brace']+%2B=+1;
++++}+else+if+(p1.indexOf('}')+===+0)+{
+++++++++f['brace']+-=+1;
++++++++rtnStr+=+rtnFn();
++++}+else+{
++++++++rtnStr+=+rtnFn();
++++}
++++return+rtnStr;
});

document.body.innerHTML+%2B=+regeStr;+//+appends+the+result+to+the+body+of+the+HTML+document|3047635|这段代码只是在字符串中查找对象的各个部分，并将它们分离到div中(不过您可以更改其中的HTML部分)。但是，每次遇到大括号时，它都会根据是左大括号还是右大括号来递增或递减缩进(行为类似于the++argument+of+'JSON.stringify')。但您可以将此作为不同类型格式的基础。|3047636|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify|1|http://jsfiddle.net/f24UP/2/|2^0|O|E|O|E|0|0|0|0|0|0|0|0|A|E|P|4|0|1D|17|1|0|0|2L|X|2|0^^$0|@$1|2|3|4|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|F|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1L|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1N|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|1U|8|@]|D|@$9|1V|A|1W|1|1X]]|E|$]]|$1|Y|3|Z|5|J|7|1Y|8|@]|D|@]|E|$K|L]]|$1|10|3|11|5|6|7|1Z|8|@]|D|@$9|20|A|21|1|22]]|E|$]]|$1|12|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]|1A|$5|15|16|17|E|$18|1B]]|1C|$5|15|16|17|E|$18|19]]]]

I think all you need to display the data on an HTML page is <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify"><code>JSON.stringify</code></a>.

For example, if your JSON is stored like this:

<pre><code>var jsonVar = {
 text: "example",
 number: 1
 };
</code></pre>

Then you need only do this to convert it to a string:

<pre><code>var jsonStr = JSON.stringify(jsonVar);
</code></pre>

And then you can insert into your HTML directly, for example:

<pre><code>document.body.innerHTML = jsonStr;
</code></pre>

Of course you will probably want to replace <code>body</code> with some other element via <code>getElementById</code>.

As for the CSS part of your question, you could use RegExp to manipulate the stringified object before you put it into the DOM. For example, this code (<a href="http://jsfiddle.net/f24UP/2/">also on JSFiddle for demonstration purposes</a>) should take care of indenting of curly braces.

<pre><code>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 '&lt;div style="text-indent: ' + (f['brace'] * 20) + 'px;"&gt;' + p1 + '&lt;/div&gt;';
 },
 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
</code></pre>

This code simply looks for sections of the object within the string and separates them into divs (though you could change the HTML part of that). Every time it encounters a curly brace, however, it increments or decrements the indentation depending on whether it's an opening brace or a closing (behaviour similar to <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">the space argument of 'JSON.stringify'</a>). But you could this as a basis for different types of formatting.

<blockquote>
 Possible Duplicate: 
 <a href="https://stackoverflow.com/questions/4810841/json-pretty-print-using-javascript">JSON pretty print using JavaScript</a> 
</blockquote>



I'd like to display my raw JSON data on a HTML page just as JSONview does. For example, my raw json data is:

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

It comes from <a href="http://jsonview.com/" rel="noreferrer">http://jsonview.com/</a>, and what I want to achieve is like <a href="http://jsonview.com/example.json" rel="noreferrer">http://jsonview.com/example.json</a> if you use Chrome and have installed the JSONView plugin.

I've tried but failed to understand how it works. I'd like to use a JS script (CSS to highlight) to custom format my raw JSON data which is retrieved by ajax and finally put it on a HTML page in any position like into a div element. Are there any existing JS libraries that can achieve this? Or how to do it?

How to display raw JSON data on a HTML page

 可能重复：我希望像JSONview一样在HTML页上显示我的原始JSON数据。例如，我的原始json数据是：  {   "hey":"guy",   "anumber":243,   "anobject":{      "whoa":"nuts",      "anarray":[         1,       ...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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