阅读模式:

json在线格式化代码

查看:488  回复:0  类型:  来源:php自学网  标签 html javascript css

        在线验证json格式,格式化json代码,对json代码排版处理,支付json数据层级,展开和叠起,json缩进控制。代码来源网络整理。

josn format tool.png

在线预览地址:https://zixuephp.net/tool-json.html

代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>在线代码格式化</title>
    <script type="text/javascript">
		window.SINGLE_TAB = "  ";
window.ImgCollapsed = "https://zixuephp.net/static/images/Collapsed.gif";
window.ImgExpanded = "https://zixuephp.net/static/images/Expanded.gif";
window.QuoteKeys = true;

function $id(id) {
    return document.getElementById(id);
}

function IsArray(obj) {
    return obj &&
        typeof obj === 'object' &&
        typeof obj.length === 'number' &&
        !(obj.propertyIsEnumerable('length'));
}

function Process() {
    SetTab();
    window.IsCollapsible = $id("CollapsibleView").checked;
    var json = $id("RawJson").value;
    var html = "";
    try {
        if (json == "") {
            json = "\"\"";
            return;
        }
        var obj = eval("[" + json + "]");
        html = ProcessObject(obj[0], 0, false, false, false);
        $id("Canvas").innerHTML = "<PRE class='CodeContainer'>" + html + "</PRE>";
    } catch (e) {
        alert("JSON数据格式不正确:\n" + e.message);
        $id("Canvas").innerHTML = "";
    }
}

window._dateObj = new Date();
window._regexpObj = new RegExp();

function ProcessObject(obj, indent, addComma, isArray, isPropertyContent) {
    var html = "";
    var comma = (addComma) ? "<span class='Comma'>,</span> " : "";
    var type = typeof obj;
    var clpsHtml = "";
    if (IsArray(obj)) {
        if (obj.length == 0) {
            html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>" + comma, isPropertyContent);
        } else {
            clpsHtml = window.IsCollapsible ? "<span><img src=\"" + window.ImgExpanded + "\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : "";
            html += GetRow(indent, "<span class='ArrayBrace'>[</span>" + clpsHtml, isPropertyContent);
            for (var i = 0; i < obj.length; i++) {
                html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
            }
            clpsHtml = window.IsCollapsible ? "</span>" : "";
            html += GetRow(indent, clpsHtml + "<span class='ArrayBrace'>]</span>" + comma);
        }
    } else if (type == 'object') {
        if (obj == null) {
            html += FormatLiteral("null", "", comma, indent, isArray, "Null");
        } else if (obj.constructor == window._dateObj.constructor) {
            html += FormatLiteral("new Date(" + obj.getTime() + ") /*" + obj.toLocaleString() + "*/", "", comma, indent, isArray, "Date");
        } else if (obj.constructor == window._regexpObj.constructor) {
            html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
        } else {
            var numProps = 0;
            for (var prop in obj) numProps++;
            if (numProps == 0) {
                html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>" + comma, isPropertyContent);
            } else {
                clpsHtml = window.IsCollapsible ? "<span><img src=\"" + window.ImgExpanded + "\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : "";
                html += GetRow(indent, "<span class='ObjectBrace'>{</span>" + clpsHtml, isPropertyContent);

                var j = 0;

                for (var prop in obj) {

                    var quote = window.QuoteKeys ? "\"" : "";

                    html += GetRow(indent + 1, "<span class='PropertyName'>" + quote + prop + quote + "</span>: " + ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true));

                }

                clpsHtml = window.IsCollapsible ? "</span>" : "";

                html += GetRow(indent, clpsHtml + "<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') {

        if (obj.constructor == window._regexpObj.constructor) {

            html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");

        } else {

            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.toString().split("\\").join("\\\\").split('"').join('\\"'), "\"", 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;

}

function CollapsibleViewClicked() {

    $id("CollapsibleViewDetail").style.visibility = $id("CollapsibleView").checked ? "visible" : "hidden";

    Process();

}


function QuoteKeysClicked() {

    window.QuoteKeys = $id("QuoteKeys").checked;

    Process();

}


function CollapseAllClicked() {

    EnsureIsPopulated();

    TraverseChildren($id("Canvas"), function (element) {

        if (element.className == 'collapsible') {

            MakeContentVisible(element, false);

        }

    }, 0);

}

function ExpandAllClicked() {

    EnsureIsPopulated();

    TraverseChildren($id("Canvas"), function (element) {

        if (element.className == 'collapsible') {

            MakeContentVisible(element, true);

        }

    }, 0);

}

function MakeContentVisible(element, visible) {

    var img = element.previousSibling.firstChild;

    if (!!img.tagName && img.tagName.toLowerCase() == "img") {

        element.style.display = visible ? 'inline' : 'none';

        element.previousSibling.firstChild.src = visible ? window.ImgExpanded : window.ImgCollapsed;

    }

}

function TraverseChildren(element, func, depth) {

    for (var i = 0; i < element.childNodes.length; i++) {

        TraverseChildren(element.childNodes[i], func, depth + 1);

    }

    func(element, depth);

}

function ExpImgClicked(img) {

    var container = img.parentNode.nextSibling;

    if (!container) return;

    var disp = "none";

    var src = window.ImgCollapsed;

    if (container.style.display == "none") {

        disp = "inline";

        src = window.ImgExpanded;

    }

    container.style.display = disp;

    img.src = src;

}

function CollapseLevel(level) {

    EnsureIsPopulated();

    TraverseChildren($id("Canvas"), function (element, depth) {

        if (element.className == 'collapsible') {

            if (depth >= level) {

                MakeContentVisible(element, false);

            } else {

                MakeContentVisible(element, true);

            }

        }

    }, 0);

}

function TabSizeChanged() {

    Process();

}

function SetTab() {

    var select = $id("TabSize");

    window.TAB = MultiplyString(parseInt(select.options[select.selectedIndex].value), window.SINGLE_TAB);

}

function EnsureIsPopulated() {

    if (!$id("Canvas").innerHTML && !!$id("RawJson").value) Process();

}

function MultiplyString(num, str) {

    var sb = [];

    for (var i = 0; i < num; i++) {

        sb.push(str);

    }

    return sb.join("");

}

function SelectAllClicked() {


    if (!!document.selection && !!document.selection.empty) {

        document.selection.empty();

    } else if (window.getSelection) {

        var sel = window.getSelection();

        if (sel.removeAllRanges) {

            window.getSelection().removeAllRanges();

        }

    }


    var range =

        (!!document.body && !!document.body.createTextRange)

            ? document.body.createTextRange()

            : document.createRange();


    if (!!range.selectNode)

        range.selectNode($id("Canvas"));

    else if (range.moveToElementText)

        range.moveToElementText($id("Canvas"));


    if (!!range.select)

        range.select($id("Canvas"));

    else

        window.getSelection().addRange(range);

}

function LinkToJson() {

    var val = $id("RawJson").value;

    val = escape(val.split('/n').join(' ').split('/r').join(' '));

    $id("InvisibleLinkUrl").value = val;

    $id("InvisibleLink").submit();

}
	</script>
</head>
<body>

<div class="topBar">
    <div class="title">待格式化JSON:</div>
    <textarea id="RawJson" style="width:100%;" >{"name":"php自学网","site":"https://zixuephp.net"}</textarea>
</div>

<div class="operateTB form-inline">
    <label for="TabSize">缩进量:</label>
    <select id="TabSize" onchange="TabSizeChanged()" class="span1">
        <option value="1">1</option>
        <option value="2" selected="true">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
    <label for="QuoteKeys">
        <input type="checkbox" id="QuoteKeys" onclick="QuoteKeysClicked()" checked="true">引号
    </label>
    <span id="CollapsibleViewHolder">
          <label for="CollapsibleView">
            <input type="checkbox" id="CollapsibleView" onclick="CollapsibleViewClicked()" checked="true">显示控制
          </label>
    </span>
    <span id="CollapsibleViewDetail" style="visibility: visible;margin-right:10px; ">
        <a href="javascript:void(0);" onclick="ExpandAllClicked()">展开</a>
        <a href="javascript:void(0);" onclick="CollapseAllClicked()">叠起</a>
        <a href="javascript:void(0);" onclick="CollapseLevel(3)">2级</a>
        <a href="javascript:void(0);" onclick="CollapseLevel(4)">3级</a>
        <a href="javascript:void(0);" onclick="CollapseLevel(5)">4级</a>
        <a href="javascript:void(0);" onclick="CollapseLevel(6)">5级</a>
        <a href="javascript:void(0);" onclick="CollapseLevel(7)">6级</a>
        <a href="javascript:void(0);" onclick="CollapseLevel(8)">7级</a>
        <a href="javascript:void(0);" onclick="CollapseLevel(9)">8级</a>
    </span>
    <input type="button" onclick="Process()" value="格式化">
</div>
<div class="bottomBar">
    <div class="title">格式化JSON:</div>
    <div id="Canvas"></div>
</div>

</body>
</html>


分享到:
0 0

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
浅谈javascript的函数节流   阅读:4489mysql共享锁和排他锁详解   阅读:7117企业让你去面试,可能不是真的招人   阅读:5744栈和堆的区别   阅读:4824shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:8725最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:31419面试的时候回去等通知,等电话的真实意思   阅读:23640TCP的三次握手(建立连接)和四次挥手(关闭连接)   阅读:3313网站性能优化-页面静态缓存   阅读:5323nginx安装redis模块   阅读:5188centos 7 安装 samba 服务   阅读:6569最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:10701什么是天使轮?什么是A轮融资?B轮融资?   阅读:4798linux时间戳有趣的情人节秒1234567890   阅读:5265最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:31419mongodb设置shell开机启动脚本   阅读:9782centos 7 设置 nginx-1.11.10 开机启动   阅读:7811linux rarcrack破解rar、zip和7z压缩包简单密码的工具   阅读:16901mysql数据库性能的基本优化   阅读:4398php打印三角形   阅读:9475PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:14263php冒泡排序法   阅读:13987centos 7 安装 php-7.1.3   阅读:19697给网站添加一键qq登录的功能   阅读:7205给 centos 7 安装桌面环境   阅读:16648php 使用 smtp.php 类在线发送邮件功能   阅读:5584php压缩页面的html代码一行显示   阅读:7174phpexcel 超简单从数据库一键导出数据到excel教程   阅读:7081centos7开启交换内存   阅读:10641centos 7 安装 php-7.1.3   阅读:19697web性能测试工具ab的测试方法   阅读:4448最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:12973浅谈javascript的函数节流   阅读:4489php冒泡排序法   阅读:13987php压缩页面的html代码一行显示   阅读:7174crontab+shell脚本实现定时备份mysql数据库   阅读:7469人性漫画:打工与创业的残酷区别   阅读:4676移动端js触摸touch详解(附带案例源码)   阅读:16359一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:128080php连接redis   阅读:5508比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:5256linux php7安装yaf扩展   阅读:8188phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:12022shell发送邮件脚本   阅读:7494centos 7 安装 php-7.1.3   阅读:19697shell发送邮件脚本   阅读:7494浅谈javascript的函数节流   阅读:4489一步步带你,如何网站架构   阅读:3963nginx安装mysql和json模块   阅读:4724PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:14263