webdevtools
/
index.php.3

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!---base href="http://tools.seelinok.com/" /-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JSON代码格式、URL解码编码、在线二维码-开发工具</title>
<meta name="description" content="JSON代码格式、URL解码编码-开发工具">
<meta name="keywords" content="JSON代码格式 URL解码编码 JSON转译 在线二维码 二维码">
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<style>
.Canvas{ font: 10pt Georgia; background-color:#ECECEC; color:#000000; border:solid 1px #CECECE;width:800px;margin:0 auto;overflow:scroll;}
.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;}
#container{}
.toolsTab{margin:0 auto;margin-top:20px;}
.tab{display:none;}
#clipboard_container{float:left; width:100px; height:32px; margin-left:-101px;}
#result_text{float:left; height:32px; line-height:32px; margin-left:5px; color:#f00;}
.hide{display:none;}
.show{display:block;}

.qr-box{height:200px;margin:0 auto;padding:10px;}
.nav{margin-bottom: 10px;}
.space{margin-top:10px;margin-bottom:10px;}
.btn{margin-top:2px;margin-bottom:2px;}
@media screen and (min-width: 160px) and (max-width: 319px) {
   .panel-title {font-size: 12px;}
   body{font-size:9px;}
   h4,.h4 {font-size: 12px;}
   .btn{font-size: 12px;}
  .col-xs-11,.col-xs-12{padding-right: 1px;padding-left: 1px;}
}
</style>
<script  type="text/javascript">
	window.TAB = "  ";
	function IsArray(obj) {
		return obj && typeof obj === 'object' && typeof obj.length === 'number' && !(obj.propertyIsEnumerable('length'))
	}

	function Process() {
		var json = $("#RawJson").val();
		FormatJson(json);
	}

	function FormatJson(json)
	{

		$("#Canvas").css("display","block");
		var html = "";
		try {
			if (json == "") json = "\"\"";
			var obj = eval("[" + json + "]");
			html = ProcessObject(obj[0], 0, false, false, false);
			$("#Canvas").html("<PRE class='CodeContainer'>" + html + "</PRE>");
		} catch(e) {
			alert("JSON语法错误,不能格式化,错误信息:\n" + e.message);
			$("#Canvas").html();
		}
	}

	function FormatApiJson(json)
	{

		$("#ApiCanvas").css("display","block");
		var html = "";
		try {
			if (json == "") json = "\"\"";
			var obj = eval("[" + json + "]");
			html = ProcessObject(obj[0], 0, false, false, false);
			$("#ApiCanvas").html("<PRE class='CodeContainer'>" + html + "</PRE>");
		} catch(e) {
			alert("JSON语法错误,不能格式化,错误信息:\n" + e.message);
			$("#ApiCanvas").html();
		}
	}

	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("&lt;").split(">").join("&gt;");
		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>

<!---script type="text/javascript" name="baidu-tc-cerfication" src="http://apps.bdimg.com/cloudaapi/lightapp.js#b93c3b01eb6cc4e34b670dac3d792686"></script> <script type="text/javascript">window.bd && bd._qdc && bd._qdc.init({app_id: '3d75f61e11ef9316f2ff7b87'});</script----->

</head>
<body>
<div class="container" id="container">
<div class="row">
  <div class="col-xs-12">
	<div class="toolsTab clearfix">
		<ul class="nav nav-tabs ">
			<li  class="active"><a href="javascript:;;">JSON格式化</a></li>
			<li><a href="javascript:;;">API调试</a></li>
			<li><a href="javascript:;;">编码解码</a></li>
			<li><a href="javascript:;;">生成二维码</a></li>
			<li><a href="javascript:;;">JSON转译</a></li>
			<li><a href="javascript:;;">简繁转换</a></li>
		</ul>
	</div>
 </div>
 </div>


<div class="row tab show"><div class="col-xs-12">

  <div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">JSON代码格式化</h3>
  </div>
  <div class="panel-body">
        <div class="col-xs-12"><input type="text" class="form-control" id="jsonUrl" value=""></div>
		  <div class="col-xs-12 space text-center">
		     <input type="Button" class="btn btn-default" value="打开URL" onclick="ProcessUrlJson()">
			 <input type="Button" class="btn btn-default" value="清除结果" onclick="ClearUrlJson()">
			 </div>
		  <div class="col-xs-12"><h4>请在下方输入你的JSON:</h></div>
          <div class="col-xs-12"><textarea id="RawJson" class="form-control" rows="5" ></textarea></div>
		  <div class="col-xs-12 space text-center"><input type="Button" class="btn btn-default" value="格式化" onclick="Process()" id="ProcessBtn"></div>
		<div id="Canvas" class="col-xs-12"></div>
  </div>
</div>

</div></div>

<div class="row tab"><div class="col-xs-12">

  <div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">API调试</h3>
  </div>
  <div class="panel-body">
        <div class="col-xs-12">
		  <input type="text" class="form-control" style="width:43%;float:left" id="apiHost"  value="http://120.25.175.26/">
	      <input type="text" class="form-control"  style="width:40%;float:left" id="apiUri" value="">
		  <select name="reqtype"  class="form-control" style="width:15%;float:left" id="apiReqtype" >
		    <option value="p">POST</option>
			<option value="g" selected>GET</option>
		  </select>
		  <input type="text" class="form-control"  id="apiParam" value="">
		 </div>

		  <div class="col-xs-12 space text-center">
		     <input type="Button" class="btn btn-default" value="打开URL" onclick="ProcessApiJson()">
			 <input type="Button" class="btn btn-default" value="清除结果" onclick="ClearApiJson()">
			 </div>
		  <div class="col-xs-12"><h4>请在下方输入你的JSON:</h></div>
          <div class="col-xs-12"><textarea id="ApiRawJson" class="form-control" rows="5" ></textarea></div>
		  <div class="col-xs-12 space text-center"><input type="Button" class="btn btn-default" value="格式化" onclick="Process()" id="ProcessBtn"></div>
		<div id="ApiCanvas" class="col-xs-12"></div>
  </div>
</div>

</div></div>


 <div class="row tab"><div class="col-xs-12">
  <div class="panel panel-default">

  <div class="panel-heading">
    <h3 class="panel-title">编码解码</h3>
  </div>
  <div class="panel-body">
		<div class="col-xs-12"><textarea id="code" class="form-control" rows="5" onmouseover="javascript:this.focus();this.select();"></textarea></div>
		<div class="col-xs-12 space text-center">
			<button id="js_escape" class="btn btn-default">escape编码</button>
			<button id="js_unescape" class="btn btn-default">escape解码</button>

			<button id="gb2312_encode" class="btn btn-default">GB2312编码</button>
			<button id="gb2312_decode" class="btn btn-default">GB2312解码</button>

			<button id="utf8_encode" class="btn btn-default">UTF8编码</button>
			<button id="utf8_decode" class="btn btn-default" >UTF8解码</button>

			<button id="md5_encode" class="btn btn-default" >MD5编码</button>

			<button id="base64_encode" class="btn btn-default" >Base64编码</button>
			<button id="base64_decode" class="btn btn-default" >Base64解码</button>

		</div>
		<div class="col-xs-12"><textarea class="form-control" rows="5" id="result_code" onmouseover="javascript:this.focus();this.select();"></textarea></div>
		<div class="col-xs-12 text-center space">
		   <button id="clear" class="btn btn-default">清除</button>
		    <a id="result_text"></a>
		   <button id="copybtn" class="btn btn-default">复制结果</button>

		 </div>
  </div>
</div>
</div></div>


 <div class="row tab"><div class="col-xs-12">
  <div class="panel panel-default">

   <div class="panel-heading">
    <h3 class="panel-title">生成二维码</h3>
  </div>

<div class="panel-body">
   	<div  class="col-xs-12"><input type="text" class="form-control" id="qrUrl" value=""></div>
    <div  class="col-xs-12 space text-center"><input class="btn btn-default" type="Button" value="生成二维码" onclick="ProcessUrlQr()"></div>
	<div class="qr-box col-xs-12"><img id='qrcodeimg' src=""></div>
  </div>

</div>
</div></div>

  <div class="row tab"><div class="col-xs-12">
  <div class="panel panel-default">

  <div class="panel-heading">
    <h3 class="panel-title">JSON转译</h3>
  </div>
  <div class="panel-body">

				   <div class="col-xs-12 space">
			         <input type="hidden" id="reformat" value="1" />
                     <input type="hidden" id="compress" value="0" />
                      <textarea id="json_input" name="json_input"  class="form-control" rows="5" spellcheck="false"></textarea>
                    </div>
				   <div class="col-xs-11 space text-center">
						<input type="button"  class="btn btn-default" value="压缩" onclick="doact(1);"/>
						<input type="button"  class="btn btn-default" value="转义" onclick="doact(2);"/>
						<input type="button"  class="btn btn-default" value="压缩并转义" onclick="doact(3);"/>
						<input type="button"  class="btn btn-default" value="去除转义" onclick="doact(4);"/>
						<input type="button"  class="btn btn-default" value="Unicode转中文" onclick="u2h()"/>
						<input type="button"  class="btn btn-default" value="中文转Unicode" onclick="h2u()"/>
						<input type="button"  class="btn btn-default" value="中英符号转换" onclick="cnChar2EnChar()"/>
                  </div>


  </div>
</div>
</div></div>

 <div class="row tab"><div class="col-xs-12">
  <div class="panel panel-default">

   <div class="panel-heading">
    <h3 class="panel-title">繁简转换</h3>
  </div>

<div class="panel-body">
		<div  class="col-xs-12"><textarea id="transtrs" class="form-control" rows="5" onmouseover="javascript:this.focus();"></textarea></div>
		<div  class="col-xs-12 space text-center">
			<input class="btn btn-default" type="Button" value="转换简体字" onclick="convert(0)">
			<input class="btn btn-default" type="Button" value="转换繁体字" onclick="convert(1)">
		</div>
		<div class="col-xs-12"><textarea class="form-control" rows="5" id="tranres" onmouseover="javascript:this.focus();this.select();"></textarea></div>
		<!----div class="col-xs-12 text-center space">
		   <button id="copystran" class="btn btn-default">复制结果</button>
		</div--->
  </div>
</div>
</div></div>
</div><!--- container -->
<script  type="text/javascript" src="ZeroClipboard.js"></script>
<script  type="text/javascript" src="pystr.js"></script>
<script src="devtools.js"></script>
<script  type="text/javascript">
var clip;
try{
	ZeroClipboard.setMoviePath('ZeroClipboard.swf');
	var clip = new ZeroClipboard.Client();
	clip.addEventListener('mousedown',function() {
	    clip.setText($('#result_code').val());
	});

	clip.addEventListener('complete',function(client,text) {
	   $("#result_text").text("复制成功");
	});
 }catch(e){}


</script>

<script>
var ProcessUrlQr=function(){
    var toUrl=$('#qrUrl').val();
    var imgurl="qrcode.php?tourl="+toUrl+'&level=5';
    $('#qrcodeimg').attr('src',imgurl);
}

var ProcessUrlJson=function(){
var toUrl=$('#jsonUrl').val();
var re=/http:\/\/192/;
if(re.test(toUrl))
{
     var url="http://192.168.99.99/getJson.php?url="+encodeURIComponent($('#jsonUrl').val());
}else{
     var url="getJson.php?url="+encodeURIComponent($('#jsonUrl').val());
 }

$.ajax({type:'get',url:url,dataType:'jsonp',async:false,jsonp: "jsonpCallback",jsonpCallback:"jsonpCallback",success:function(data){
	  tmpjson=JSON.stringify(data);
	  $("#RawJson").val(tmpjson);
	  FormatJson(tmpjson);
  },error:function(data){alert('错误');}});
}

var ProcessApiJson=function(){
var apiHost=$('#apiHost').val();
var apiUri=$('#apiUri').val();
var apiParam=$('#apiParam').val();
var reqType=$('#apiReqtype').val();
var re=/http:\/\/192/;
var toUrl=apiHost;
var postdata='';
if(apiUri){
  toUrl=toUrl+''+apiUri;
}


if(apiParam){
	if(reqType=='g'){
        toUrl=toUrl+'&'+apiParam;
		postdata='';
	}else{
	   postdata=apiParam;
	}
}

var re=/http:\/\/192/;
if(re.test(toUrl))
{
     var url="http://192.168.99.99/getJson.php?url="+encodeURIComponent(toUrl);
}else{
     var url="getJson.php?url="+encodeURIComponent(toUrl);
 }
pdata={'postdata':encodeURIComponent(postdata)};

$.ajax({type:'get',url:url,data:pdata,dataType:'jsonp',async:false,jsonp: "jsonpCallback",jsonpCallback:"jsonpCallback",success:function(data){
	  tmpjson=JSON.stringify(data);
	  $("#ApiRawJson").val(tmpjson);
	  FormatApiJson(tmpjson);
  },error:function(data){alert('错误');}});
}

var ClearUrlJson=function(){
   $("#RawJson").val('');
   $("#Canvas").html('');
}

var ClearApiJson=function(){
   $("#ApiRawJson").val('');
   $("#ApiCanvas").html('');
}

$(".nav-tabs li").click(function(){
	   _this=$(this);
	   _this.parent().find("li.active").removeClass("active");
       _this.addClass("active");
       $("#container .tab.show").removeClass("show");
	   var idx=_this.index();
	   $("#container .tab").eq(idx).addClass("show");
	   if(idx==1)
	    {
	      	clip.glue('copybtn');
	   }
});

function default_tab(idx){
      obj=$(".nav-tabs li").eq(idx);
   	   _this=$(obj);
	   _this.parent().find("li.active").removeClass("active");
       _this.addClass("active");
       $("#container .tab.show").removeClass("show");
	   $("#container .tab").eq(idx).addClass("show");
	   if(idx==1)
	    {
	      	clip.glue('copybtn');
	   }
};

$(function(){
  default_tab(2);
});

</script>
<script>

function doact(ii){
		 var txtA =document.getElementById("json_input");
		 var text = txtA.value;
			if(ii==1||ii==3){
				 text = text.split("\n").join(" ");
				var t = [];
				var inString = false;
				for (var i = 0, len = text.length; i < len; i++) {
					var c = text.charAt(i);
					if (inString && c === inString) {
						// TODO: \\"
						if (text.charAt(i - 1) !== '\\') {
							inString = false;
						}
					} else if (!inString && (c === '"' || c === "'")) {
						inString = c;
					} else if (!inString && (c === ' ' || c === "\t")) {
						c = '';
					}
					t.push(c);
				}
				text= t.join('');
			}
			if(ii==2||ii==3){
				 text = text.replace(/\\/g,"\\\\").replace(/\"/g,"\\\"");
			}
			if(ii==4){
			 text = text.replace(/\\\\/g,"\\").replace(/\\\"/g,'\"');
			}
			 txtA.value = text;
}

String.prototype.trim=function()
{
     return this.replace(/(^\s*)|(\s*$)/g, '');
}

var GB2312UnicodeConverter={
  ToUnicode:function(str){
    var txt= escape(str).toLocaleLowerCase().replace(/%u/gi,'\\u');
	return txt.replace(/%7b/gi,'{').replace(/%7d/gi,'}').replace(/%3a/gi,':').replace(/%2c/gi,',').replace(/%27/gi,'\'').replace(/%22/gi,'"').replace(/%5b/gi,'[').replace(/%5d/gi,']');
  }
  ,ToGB2312:function(str){
    return unescape(str.replace(/\\u/gi,'%u'));
  }
};

function u2h(){
	 var txtA = document.getElementById("json_input");
	 var text = txtA.value;
	 text = text.trim();
	// text = text.replace(/\u/g,"");
	 txtA.value = GB2312UnicodeConverter.ToGB2312(text);
}

function h2u(){
	var txtA = document.getElementById("json_input");
	 var text = txtA.value;
	 text = text.trim();
	// text = text.replace(/\u/g,"");
	 txtA.value = GB2312UnicodeConverter.ToUnicode(text);
}

function cnChar2EnChar(){
 var txtA = document.getElementById("json_input");
  var str = txtA.value;
str = str.replace(/\’|\‘/g,"'").replace(/\“|\”/g,"\"");
str = str.replace(/\【/g,"[").replace(/\】/g,"]").replace(/\｛/g,"{").replace(/\｝/g,"}");
str = str.replace(/，/g,",").replace(/：/g,":");
 txtA.value = str;
}

function traditionalized(cc){
	var str='';
	for(var i=0;i<cc.length;i++){
		if(charPYStr().indexOf(cc.charAt(i))!=-1)
			str+=ftPYStr().charAt(charPYStr().indexOf(cc.charAt(i)));
		else if(qqPYStr().indexOf(cc.charAt(i))!=-1)
			str+=ftPYStr().charAt(qqPYStr().indexOf(cc.charAt(i)));
		else
			str+=cc.charAt(i);
	}
	return str;
}

function simplized(cc){
	var str='';
	for(var i=0;i<cc.length;i++){
		if(ftPYStr().indexOf(cc.charAt(i))!=-1)
			str+=charPYStr().charAt(ftPYStr().indexOf(cc.charAt(i)));
		else if(qqPYStr().indexOf(cc.charAt(i))!=-1)
			str+=charPYStr().charAt(qqPYStr().indexOf(cc.charAt(i)));
		else
			str+=cc.charAt(i);
	}
	return str;
}

function qqlized(cc){
	var str='';
	for(var i=0;i<cc.length;i++){
		if(ftPYStr().indexOf(cc.charAt(i))!=-1)
			str+=qqPYStr().charAt(ftPYStr().indexOf(cc.charAt(i)));
		else if(charPYStr().indexOf(cc.charAt(i))!=-1)
			str+=qqPYStr().charAt(charPYStr().indexOf(cc.charAt(i)));
		else
			str+=cc.charAt(i);
	}
	return str;
}

function convert(nOption){
	txt=document.getElementById("transtrs");
	res=document.getElementById("tranres");
	if(nOption==0)
		res.value=simplized(txt.value);
	else if(nOption==2)
		res.value=qqlized(txt.value);
	else
		res.value=traditionalized(txt.value);
}

</script>
</body>
</html>