HTML page Presentation JSON style

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.