原始JSON代码格式化及着色

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-10-24   阅读次数: 25   查看权限: 游客查看

原始JSON代码格式化及着色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>原始JSON代码格式化及着色</title>
    <script type="text/javascript">
        function IsArray(obj) {
            return obj && typeof obj === 'object' && typeof obj.length === 'number' && !(obj.propertyIsEnumerable('length'));
        }
        function Process() {
            window.TAB = "  ";
            var html = "";
            var json = document.getElementById("RawJson").value;
            try {
                //var obj = eval("["+JSON.stringify(json)+"]"); //如果是现成的json变量
                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语法错误,不能格式化,错误信息:\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("&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 = "",i;
            for (i = 0; i < indent; i++) tabs += window.TAB;
            var funcStrArray = obj.toString().split("\n");
            var str = "";
            for (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 type="text/css">
    .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;font-style:italic}
    .Null{color:#0000FF}
    .Comma{color:#000000;font-weight:bold}
    PRE.CodeContainer{margin-top:0;margin-bottom:0}
    </style>
</head>
<body>
<h3 style="margin-bottom:2px">原始JSON代码格式化及着色</h3>
<div>请在下方输入你的JSON:</div>
<textarea id="RawJson" cols="100" rows="8"></textarea><br>
<input type="button" value="格式化" onclick="Process()">
<div id="Canvas" class="Canvas"></div>
</body>
</html>

 

原始JSON代码格式化及着色

请在下方输入你的JSON:


 

关键词: json,格式化,着色   编辑时间: 2013-10-24 15:29:56

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
上一篇:链接3D切换效果
下一篇:kendo ui简介
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程