jQuery: json美化插件, JSON高亮, JSON Syntax Highlighting & Formatting, rainbowJSON

jQuery: json美化插件, JSON高亮, JSON Syntax Highlighting & Formatting, rainbowJSON
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' 
  
});

 

jQuery: json美化插件, JSON高亮, JSON Syntax Highlighting & Formatting, rainbowJSON
jQuery: json美化插件, JSON高亮, JSON Syntax Highlighting & Formatting, rainbowJSON

 

方法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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
	    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