jsonFormater之应用
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/json_format.js" ></script>
<script type="text/javascript" src="js/jsonFormater.js" ></script>
<style>
.jf-PropertyName{
color: #CC0000;
}
.jf-String{
color: #007777;
}
#josn_div{
font-family: Lucida Console,Georgia;
color: #000000;
border: solid 1px #CECECE;
width: 90%;
background-color: #FFFFDD;
}
</style>
<script type="text/javascript"> var jf = null; //创建对象
$(function(){
var options = {
dom : '#test_light', //对应容器的css选择器
baseDom : "json_text"
};
jf = new JsonFormater(options); //创建对象
}); function testJson(){
jf.baseFomat($("#json_input").val());
} function testHighLight(){
jf.doFormat($("#json_input").val()); //格式化json
} </script>
</head>
<body>
<input type="text" id="json_input" placeholder="请输入json"/>
<input type="button" value="数据转换" onclick="testJson()"/>
<input type="button" value="高亮" onclick="testHighLight()"/>
<br>
<textarea id="json_text" cols="50" rows="20" style="background-color: #263238; font-weight:bold ; color: #A5E88D; font-family: "Source Sans Pro", 'Microsoft Yahei', '微软雅黑', sans-serif, Helvetica, 'Hiragino Sans GB', Arial;">
</textarea> <div id="josn_div">
<pre id="test_light"> </pre>
</div>
</body>
</html>
JS脚本：
function JsonFormater(opt) {
this.options = $.extend({
dom: '',//带有高亮、关键字颜色设置
baseDom:'', //基本格式节点
tabSize: 2,
singleTab: " ",
quoteKeys: true,
imgCollapsed: "img/Collapsed.gif",
imgExpanded: "img/Expanded.gif",
isCollapsible: true
}, opt || {});
this.isFormated = false;
this.obj = {
_dateObj: new Date(),
_regexpObj: new RegExp()
};
this.init();
}
JsonFormater.prototype = {
init: function () {
this.tab = this.multiplyString(this.options.tabSize, this.options.singleTab);
this.bindEvent();
},
// 基本格式转换-只读模式
baseFomat: function(txt,compress/*是否为压缩模式*/){/* 格式化JSON源码(对象转换为JSON文本) */
var indentChar = ' ';
if(/^\s*$/.test(txt)){
alert('数据为空,无法格式化! ');
return;
}
try{var data=eval('('+txt+')');}
catch(e){
alert('数据源语法错误,格式化失败! 错误信息: '+e.description,'err');
return;
};
var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0;
var notify=function(name,value,isLast,indent/*缩进*/,formObj){
nodeCount++;/*节点计数*/
for (var i=0,tab='';i<indent;i++ )tab+=indentChar;/* 缩进HTML */
tab=compress?'':tab;/*压缩模式忽略缩进*/
maxDepth=++indent;/*缩进递增并记录*/
if(value&&value.constructor==Array){/*处理数组*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/
for (var i=0;i<value.length;i++)
notify(i,value[i],i==value.length-1,indent,false);
draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/
}else if(value&&typeof value=='object'){/*处理对象*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/
var len=0,i=0;
for(var key in value)len++;
for(var key in value)notify(key,value[key],++i==len,indent,true);
draw.push(tab+'}'+(isLast?line:(','+line)));/*缩进'}'换行,若非尾元素则添加逗号*/
}else{
if(typeof value=='string')value='"'+value+'"';
draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line);
};
};
var isLast=true,indent=0;
notify('',data,isLast,indent,false);
if(this.options.baseDom){
$("#"+this.options.baseDom).html(draw.join(''));
}else{
return draw.join('');
}
},
// 带有颜色、高亮功能额格式化方法
doFormat: function (json) {
var html;
var obj;
try {
if(typeof json == 'object'){
obj = [json];
}else{
if (json == ""){
json = "\"\"";
}
obj = eval("[" + json + "]");
}
html = this.ProcessObject(obj[0], 0, false, false, false);
$(this.options.dom).html("<pre class='jf-CodeContainer'>" + html + "</pre>");
this.isFormated = true;
} catch (e) {
alert("JSON数据格式不正确:\n" + e.message);
$(this.options.dom).html("");
this.isFormated = false;
}
},
bindEvent: function () {
var that = this;
$(this.options.dom).off('click','.imgToggle');
$(this.options.dom).on('click', '.imgToggle', function () {
if (that.isFormated == false) {
return;
}
that.makeContentVisible($(this).parent().next(), !$(this).data('status'));
});
},
expandAll: function () {
if (this.isFormated == false) {
return;
}
var that = this;
this.traverseChildren($(this.options.dom), function(element){
if(element.hasClass('jf-collapsible')){
that.makeContentVisible(element, true);
}
}, 0);
},
collapseAll: function () {
if (this.isFormated == false) {
return;
}
var that = this;
this.traverseChildren($(this.options.dom), function(element){
if(element.hasClass('jf-collapsible')){
that.makeContentVisible(element, false);
}
}, 0);
},
collapseLevel: function(level){
if (this.isFormated == false) {
return;
}
var that = this;
this.traverseChildren($(this.options.dom), function(element, depth){
if(element.hasClass('jf-collapsible')){
if(depth >= level){
that.makeContentVisible(element, false);
}else{
that.makeContentVisible(element, true);
}
}
}, 0);
},
isArray: function (obj) {
return obj &&
typeof obj === 'object' &&
typeof obj.length === 'number' && !(obj.propertyIsEnumerable('length'));
},
getRow: function (indent, data, isPropertyContent) {
var tabs = "";
if (!isPropertyContent) {
tabs = this.multiplyString(indent, this.tab);
}
if (data != null && data.length > 0 && data.charAt(data.length - 1) != "\n") {
data = data + "\n";
}
return tabs + data;
},
formatLiteral: function (literal, quote, comma, indent, isArray, style) {
if (typeof literal == 'string') {
literal = literal.split("<").join("<").split(">").join(">");
}
var str = "<span class='jf-" + style + "'>" + quote + literal + quote + comma + "</span>";
if (isArray) str = this.getRow(indent, str);
return str;
},
formatFunction: function (indent, obj) {
var tabs;
var i;
var funcStrArray = obj.toString().split("\n");
var str = "";
tabs = this.multiplyString(indent, this.tab);
for (i = 0; i < funcStrArray.length; i++) {
str += ((i == 0) ? "" : tabs) + funcStrArray[i] + "\n";
}
return str;
},
multiplyString: function (num, str) {
var result = '';
for (var i = 0; i < num; i++) {
result += str;
}
return result;
},
traverseChildren: function (element, func, depth) {
var length = element.children().length;
for (var i = 0; i < length; i++) {
this.traverseChildren(element.children().eq(i), func, depth + 1);
}
func(element, depth);
},
makeContentVisible : function(element, visible){
var img = element.prev().find('img');
if(visible){
element.show();
img.attr('src', this.options.imgExpanded);
img.data('status', 1);
}else{
element.hide();
img.attr('src', this.options.imgCollapsed);
img.data('status', 0);
}
},
ProcessObject: function (obj, indent, addComma, isArray, isPropertyContent) {
var html = "";
var comma = (addComma) ? "<span class='jf-Comma'>,</span> " : "";
var type = typeof obj;
var clpsHtml = "";
var prop;
if (this.isArray(obj)) {
if (obj.length == 0) {
html += this.getRow(indent, "<span class='jf-ArrayBrace'>[ ]</span>" + comma, isPropertyContent);
} else {
clpsHtml = this.options.isCollapsible ? "<span><img class='imgToggle' data-status='1' src='" + this.options.imgExpanded + "'/></span><span class='jf-collapsible'>" : "";
html += this.getRow(indent, "<span class='jf-ArrayBrace'>[</span>" + clpsHtml, isPropertyContent);
for (var i = 0; i < obj.length; i++) {
html += this.ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
}
clpsHtml = this.options.isCollapsible ? "</span>" : "";
html += this.getRow(indent, clpsHtml + "<span class='jf-ArrayBrace'>]</span>" + comma);
}
} else if (type == 'object') {
if (obj == null) {
html += this.formatLiteral("null", "", comma, indent, isArray, "Null");
} else {
var numProps = 0;
for (prop in obj) numProps++;
if (numProps == 0) {
html += this.getRow(indent, "<span class='jf-ObjectBrace'>{ }</span>" + comma, isPropertyContent);
} else {
clpsHtml = this.options.isCollapsible ? "<span><img class='imgToggle' data-status='1' src='" + this.options.imgExpanded + "'/></span><span class='jf-collapsible'>" : "";
html += this.getRow(indent, "<span class='jf-ObjectBrace'>{</span>" + clpsHtml, isPropertyContent);
var j = 0;
for (prop in obj) {
var quote = this.options.quoteKeys ? "\"" : "";
html += this.getRow(indent + 1, "<span class='jf-PropertyName'>" + quote + prop + quote + "</span>: " + this.ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true));
}
clpsHtml = this.options.isCollapsible ? "</span>" : "";
html += this.getRow(indent, clpsHtml + "<span class='jf-ObjectBrace'>}</span>" + comma);
}
}
} else if (type == 'number') {
html += this.formatLiteral(obj, "", comma, indent, isArray, "Number");
} else if (type == 'boolean') {
html += this.formatLiteral(obj, "", comma, indent, isArray, "Boolean");
}else if (type == 'undefined') {
html += this.formatLiteral("undefined", "", comma, indent, isArray, "Null");
} else {
html += this.formatLiteral(obj.toString().split("\\").join("\\\\").split('"').join('\\"'), "\"", comma, indent, isArray, "String");
}
return html;
}
};
jsonFormater之应用的更多相关文章
- 【转】json格式化、高亮库jsonFormater
http://leo108.com/pid-1996.asp JsonFormater 基于jQuery的json格式化.高亮库 核心代码参考天马行空工作室,本人只做了模块化和一些代码优化. demo ...
- Xcode插件优缺点对比（推荐20款插件）
本文大致整理了自己用过的一些插件的使用感想(就是好不好用). 在那之前先简单贴两条插件须知,知道的可以忽略. 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- javascript的一点学习
最近用vue.js用的很爽,在全栈开发的路上一路狂奔,发现后台跟前台一起确实更有意义. 记录一个比较有意思的bug: 目标是对一个全局的paramList进行json格式化显示.代码借鉴了 http: ...
- 【转】Xcode 插件优缺点对比（推荐 20 款插件）
[转自]http://www.cnblogs.com/dsxniubility/p/5099191.html 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- xcode 必用插件二
本文大致整理了自己用过的一些插件的使用感想(就是好不好用). 在那之前先简单贴两条插件须知,知道的可以忽略. 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- 简易的highcharts公共绘图模块封装--基于.net mvc
运行效果: 之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,Demo丰富,配置使用简单.具体内容请登录中文官网:http://www.hcharts.cn/ 项目详细: 项目环境 ...
- Xcode 插件优缺点对比（推荐 20 款插件）
链接地址:http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=402439598&idx=1&sn=e8800cb0aa2 ...
- 插上腾飞的翅膀：为asp.net core添加protobuf支持
没时间解释了,快上车. 通过NuGet获取Zaabee.AspNetCoreProtobuf Install-Package Zaabee.AspNetCoreProtobuf 在Startup.cs ...
- 基于async/non-blocking高性能redis组件库BeetleX.Redis
BeetleX.Redis是基于async/non-blocking模式实现的高性能redis组件库,组件支持redis基础指令集,并封装更简便的List,Hashset和Subscribe操作.除了 ...
随机推荐
- Altiun designer问题汇总（不断更新）
(1)元件库-引脚名称被矩形方框遮住 该问题可能是因为设置中文版而产生的错误,可以尝试在旁边再摆一个矩形,并且摆上引脚观察是否会被隐藏.如果还存在该现象,先将版本语言改为原版(英文版),再重新绘制即可
- C++中的函数
1.函数的定义和调用 函数的定义形式 返回类型 函数名(形式参数) { 语句序列: } 函数的调用 调用:声明函数原型,函数调用 声明函数原型:类型说明符 被调函数名(含类型说明的形参表) 函数调用: ...
- React 组件间通信
https://jsfiddle.net/69z2wepo/9719/ <script src="https://facebook.github.io/react/js/jsfiddl ...
- 20155210 潘滢昊 Java第一次实验---凯撒密码
Java第一次实验---凯撒密码 实验内容 实现凯撒密码,并进行测试. 实验代码 import java.io.*; import java.util.Scanner; public class ks ...
- 2015526 《Java程序设计》实验二实验报告
2015526 <Java程序设计>实验二实验报告 一.单元测试和TDD 用程序解决问题时,要学会写以下三种代码: 伪代码 产品代码 测试代码 正确的顺序应为:伪代码(思路)→ 测试代码( ...
- 20145209刘一阳《网络对抗》Exp8 Web基础
20145209刘一阳<网络对抗>Exp8 Web基础 基础问题回答 1.什么是表单? 表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等 ...
- cogs696 longest prefix
cogs696 longest prefix 原题链接 IOI1996原题? 其实这题我不会. map+string+手动氧气大法好 //就是这么皮(滑稽 Code // It is made by ...
- 单元测试或main方法 进行单元测试时 idea检查其他类的语法是否正确的去除方法
在进行单元测试或者main方法时,在 运行/调试 设置中设置想要使用的测试单位的 before launch 即可
- 提取oracle awr报告
做性能测试时有时需要分析sql的执行情况,以找出需要优化的sql,oracle数据库就提供了很好的数据库状态和sql执行情况的监控平台,数据库的监控平台可以时时的监控数据库的状态,同时还可以取监控的时 ...
- Struts 2（四）：类型转换
类型转换是Struts 2的一个非常重要的部分,通过类型转换能够将表单参数转换成Java中的各种类型,本文将详细介绍Struts 2的内建类型转换器和自定义类型转换器. 第一节 Struts 2内建类 ...