May 1, 2018

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

By Gideon Javascript /Jquery / React / Bootstrap / Web 0 Comments

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, '&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

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

Just Code

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

方法1：使用rainbowJSON插件 How to use it:

方法2：无插件实例:

About Author

Gideon

Add a Comment

方法1：使用rainbowJSON插件 How to use it:

方法2：无插件实例:

Related Posts

Related Posts

About Author

Gideon

Add a Comment