下载:20130709125708248 原文:jquery ui仿腾讯web qq界面desktop酷炫特效
May 1, 2018
jQuery: json美化插件, JSON高亮, JSON Syntax Highlighting & Formatting, rainbowJSON

rainbowJSON is a jQuery based JSON formatting and syntax Highlighting plugin to make your JSON objects & strings collapsible, colorful and more user readable.
项目地址:https://github.com/Stanko/jquery.rainbowJSON
直接下载: jQuery-Plugin-For-JSON-Syntax-Highlighting-Formatting-rainbowJSON
方法1:使用rainbowJSON插件 How to use it:
1. 引入css文件 Include the jquery.rainbowJSON.css style sheet in the head section of the webpage.
<link href="css/jquery.rainbowJSON.css" rel="stylesheet">
2. 添加json数据 Wrap your JSON strings into a container.
<div class="demo"> { JSON DATA GOES HERE ... } </div>
3. 引入jquery文件和rainbow js文件 Include jQuery library and the jQuery rainbowJSON plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.rainbowJSON.js"></script>
4. 绑定 Initialize the plugin to format your JSON data.
$('.demo').rainbowJSON();
5. 其他选项 Options and defaults.
$('.demo').rainbowJSON({ // maximum elements per object that will be printed maxElements: 0, // maximum depth for recursive printing maxDepth: 0, // json as object or in string format (if empty, html of the DOM object will be used) json: null, // // background color of the div, which will be used for shading bgColor: '#F5FAFF' });

方法2:无插件实例:
<!DOCTYPE html> <html> <head> <title>JustCode iKeepStudying</title> <style type="text/css"> pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; } </style> <script type="text/javascript"> window.onload=function() { function output(inp) { document.body.appendChild(document.createElement('pre')).innerHTML = inp; } function syntaxHighlight(json) { json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { var cls = '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>'; }); } var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]}; var str = JSON.stringify(obj, undefined, 4); output(str); output(syntaxHighlight(str)); } </script> </head> <body> </body> </html>
效果图:
本文:jQuery: json美化插件, JSON高亮, JSON Syntax Highlighting & Formatting, rainbowJSON