HTML page Presentation JSON style

Generally some do background data query, to return JSON data back to the page, if need to show the style clearer, intuitive, at a glance, it is necessary to use the HTML+CSS+JS to achieve this small function

First, CSS code

{outline: 1px solid #ccc;}  { color: green;}  { color: darkorange;}  { color: blue;}  { color: magenta;}  { color: red;}

Second, the HTML part of the code

<id= "Jsonshow"></pre>    //must use this tag, Otherwise the displayed JSON is not formatted 

Third, JS part

1, first encapsulate a piece of code to show the JSON style (I do not add line number, you can directly copy and take it)

JSONSHOWFN (JSON) {if(!json.match ("^\{(. +:.+,*) {1,}\}$"))) {                    returnJson//determines whether the JSON data is not returned directly                }                if(typeofJSON! = ' string ') {JSON= Json.stringify (JSON, Undefined, 2); } JSON= Json.replace (/&/g, ' &amp; '). Replace (/</g, ' &lt; '). Replace (/>/g, ' &gt; '); returnJson.replace (/("(\\u[a-za-z0-9]{4}|\\[^u]|[ ^\\ "]) *" (\s*:)? | \b (True|false|null) \b|-?\d+ (?: \. \d*)? (?: [ee][+\-]?\d+)?) /g,function(match) {varCLS = ' 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> ';            }); }

2. Function call

$ (' #jsonShow '). HTML (JSONSHOWFN (JSON))   //JSON for the data to be displayed to the page

Four, the effect

I only show part of the code style because the item returns a large amount of query data

In the background to return data in the process, the returned data is a string form of JSON, if you also encounter this situation, first turn the return data into JSON format, using the json.parse () method; If this is not the case, you can use it directly

Good! Done! I hope I can help you.

HTML page Presentation JSON style