<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formatter and colorer of raw JSON code</title>
<meta name="description" content="A tool to format and color raw JSON code">
<meta name="keywords" content="Json, Printer, Colorer, Format, Color">
<script>
// we need tabs as spaces and not CSS magin-left
// in order to ratain format when coping and pasing the code
window.TAB = " ";
function IsArray(obj) {
return obj &&
typeof obj === 'object' &&
typeof obj.length === 'number' &&
!(obj.propertyIsEnumerable('length'));
}
function Process(){
var json = document.getElementById("RawJson").value;
var html = "";
try{
if(json == "") json = "/"/"";
var obj = eval("["+json+"]");
html = ProcessObject(obj[0], 0, false, false, false);
document.getElementById("Canvas").innerHTML = "<PRE class='CodeContainer'>"+html+"</PRE>";
}catch(e){
alert("JSON is not well formated:/n"+e.message);
document.getElementById("Canvas").innerHTML = "";
}
}
function ProcessObject(obj, indent, addComma, isArray, isPropertyContent){
var html = "";
var comma = (addComma) ? "<span class='Comma'>,</span> " : "";
var type = typeof obj;
if(IsArray(obj)){
if(obj.length == 0){
html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>"+comma, isPropertyContent);
}else{
html += GetRow(indent, "<span class='ArrayBrace'>[</span>", isPropertyContent);
for(var i = 0; i < obj.length; i++){
html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
}
html += GetRow(indent, "<span class='ArrayBrace'>]</span>"+comma);
}
}else if(type == 'object' && obj == null){
html += FormatLiteral("null", "", comma, indent, isArray, "Null");
}else if(type == 'object'){
var numProps = 0;
for(var prop in obj) numProps++;
if(numProps == 0){
html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>"+comma, isPropertyContent);
}else{
html += GetRow(indent, "<span class='ObjectBrace'>{</span>", isPropertyContent);
var j = 0;
for(var prop in obj){
html += GetRow(indent + 1, "<span class='PropertyName'>"+prop+"</span>: "+ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true));
}
html += GetRow(indent, "<span class='ObjectBrace'>}</span>"+comma);
}
}else if(type == 'number'){
html += FormatLiteral(obj, "", comma, indent, isArray, "Number");
}else if(type == 'boolean'){
html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean");
}else if(type == 'function'){
obj = FormatFunction(indent, obj);
html += FormatLiteral(obj, "", comma, indent, isArray, "Function");
}else if(type == 'undefined'){
html += FormatLiteral("undefined", "", comma, indent, isArray, "Null");
}else{
html += FormatLiteral(obj, "/"", comma, indent, isArray, "String");
}
return html;
}
function FormatLiteral(literal, quote, comma, indent, isArray, style){
if(typeof literal == 'string')
literal = literal.split("<").join("<").split(">").join(">");
var str = "<span class='"+style+"'>"+quote+literal+quote+comma+"</span>";
if(isArray) str = GetRow(indent, str);
return str;
}
function FormatFunction(indent, obj){
var tabs = "";
for(var i = 0; i < indent; i++) tabs += window.TAB;
var funcStrArray = obj.toString().split("/n");
var str = "";
for(var i = 0; i < funcStrArray.length; i++){
str += ((i==0)?"":tabs) + funcStrArray[i] + "/n";
}
return str;
}
function GetRow(indent, data, isPropertyContent){
var tabs = "";
for(var i = 0; i < indent && !isPropertyContent; i++) tabs += window.TAB;
if(data != null && data.length > 0 && data.charAt(data.length-1) != "/n")
data = data+"/n";
return tabs+data;
}
</script>
<style>
.Canvas
{
font: 10pt Georgia;
background-color:#ECECEC;
color:#000000;
border:solid 1px #CECECE;
}
.ObjectBrace
{
color:#00AA00;
font-weight:bold;
}
.ArrayBrace
{
color:#0033FF;
font-weight:bold;
}
.PropertyName
{
color:#CC0000;
font-weight:bold;
}
.String
{
color:#007777;
}
.Number
{
color:#AA00AA;
}
.Boolean
{
color:#0000FF;
}
.Function
{
color:#AA6633;
text-decoration:italic;
}
.Null
{
color:#0000FF;
}
.Comma
{
color:#000000;
font-weight:bold;
}
PRE.CodeContainer{
margin-top:0px;
margin-bottom:0px;
}
</style>
</head>
<body>
<div style="float:right;font-size:11px;">Quick Json Formatter 1.0 Copyright (c) 2008 Vladimir Bodurov <a href="http://blog.bodurov.com">http://blog.bodurov.com</a></div>
<h3 style="margin-bottom:2px">Formatter and colorer of raw JSON code</h3>
<div>Enter your JSON here:</div>
<textarea id="RawJson" cols="100" rows="8">
</textarea><BR/>
<input type="Button" value="Format" onClick="Process()"/>
<div id="Canvas" class="Canvas"></div>
</body>
</html>
分享到:
相关推荐
jsonFormatter 是一个简单快速的将杂乱无章的json格式化成上下有层次的字符串
JSON Formatter谷歌浏览器格式化json格式代码,在Chrome浏览器中输入链接,返回Json格式,默认非格式化显示,需要添加Chrome插件Json Formatter,
Chrome浏览器的json格式化插件,无需安装,解压后,配置Chrome插件后刷新后即可使用!!!
chrome 浏览器离线插件, JSON-Formatter_v0.6.0, json 格式化
jsonformatter是python 输出json 日志的格式化程序,例如输出LogStash所需的日志。 轻松自定义(添加/替换) LogRecord属性,例如在Flask Web 项目中,将username属性添加到LogRecord以自动输出用户名。 从 0.2.X...
JSON Formatter,特别好用的Chrome扩展打印JSON和JSONP,格式化、生成便于人观看的json数据格式,json开发者福音,直接在浏览器选项卡访问json格式数据。
json-formatter, 使 json/jsonp易于阅读 JSON格式化程序当你在浏览器选项卡中访问 in'直接'时,很好的打印JSON和tmodel的Chrome 扩展。特性JSONP支持快速,即使在长页面上有效的JSON页面- URL不重要语法高亮显示带有...
JSON格式器 使用可折叠的导航呈现HTML中的JSON对象。 JSON Formatter作为启动。 这是同一模块的纯JavaScript实现。 用法 通过npm安装 npm install --save json-formatter-js 在页面的dist文件夹中包含json-...
cherom的json格式化插件
JSONFormatter java中的json格式化程序小程序,使用org.json.jar
JSON -> HTML 格式化程序 ...new JSONFormatter(options).toHtml(json); 支持的options - 数字 - 字符串 - 布尔值 - 对象 - 数组 示例options覆盖 var formatterOptions = { 'string' : function
JSON格式化google插件,适合软件开发人员
JSON格式化工具.rar 可以简单的格式化Json,以及结果查询
一种chrome插件,可以快速将JSON字符串格式化成标准格式的JSON内容,直接拖入chrome的插件管理中心即可安装。对比了很多json的格式化插件,这个比较好用。
格式化JSON 格式化/格式化JSON响应。 与大多数前端世界一样,所有Rest API的响应都是JSON,因此开发人员需要在需要时格式化响应。 支持语言:English (United States)
JSON在线格式化工具 简单,快速和易于使用。 格式化和浏览JSON内容的快速简便方法。 安装此插件后,只需选择任何JSON文本,然后单击JSON Formatter图标即可。 该插件将检测剪贴板中当前存在的任何JSON数据并显示格式...
JsonFormatter 用于人类的 JSON 格式化程序
前端项目-json-formatter,Angular Publishable Directive Boilerplate
formatter功能•JSON和JSONP支持•黑暗主题,在黑暗的工作条件下减轻眼睛疲劳•语法突出显示•可折叠的树,带有缩进指南•可单击的URL•可在任何有效的JSON页面上使用– URL无关紧要•您可以检查通过在控制台中键入...