阅读模式:

json在线格式化代码

查看:182  回复: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

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

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
centos 7 添加 redis 3.2.9 开机启动脚本   阅读:8899用php从1加到100的值   阅读:7956centos 7搭建zabbix3.4   阅读:5970nginx安装mysql和json模块   阅读:4295mysql 为什么添加索引可以提高访问速度   阅读:5653简单的DOS攻击之死亡之ping详解   阅读:49951php swoole搭建简单的聊天室   阅读:3210php冒泡排序法   阅读:13453mysql5.7开启sql日志的配置   阅读:8405用php从1加到100的值   阅读:7956centos 7 设置 nginx-1.11.10 开机启动   阅读:7583php打印九九乘法表   阅读:9015php文件下载防盗链   阅读:9304php 生成图片,给图片加水印   阅读:5304mysql5.7主从同步中binlog同步模式详解   阅读:6134mysql中文分词全文搜索索引讯搜的安装   阅读:6328mysql5.7主从同步中binlog同步模式详解   阅读:6134面试的时候回去等通知,等电话的真实意思   阅读:22931web性能测试工具ab的测试方法   阅读:4325分享:淘宝技术这十年   阅读:4426linux php7安装yaf扩展   阅读:7846栈和堆的区别   阅读:4671centos 7搭建zabbix3.4   阅读:5970最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:12547mysql 为什么添加索引可以提高访问速度   阅读:5653面试的时候回去等通知,等电话的真实意思   阅读:22931linux php7安装yaf扩展   阅读:7846centos 7 忘记root密码   阅读:4468linux top命令详解   阅读:8777centos7.3安装mongodb3.6   阅读:6931web性能测试工具ab的测试方法   阅读:4325关于PHP程序员技术职业生涯规划   阅读:2476php连接redis   阅读:5338PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:13803centos 7搭建zabbix3.4   阅读:5970把php session 会话保存到redis   阅读:6772shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:8335mysql共享锁和排他锁详解   阅读:6863“米粉节”背后的故事——小米网抢购系统开发实践   阅读:3829linux top命令详解   阅读:8777mysql 为什么添加索引可以提高访问速度   阅读:5653用php从1加到100的值   阅读:7956centos 7搭建zabbix3.4   阅读:5970网站局部小图片优化-base64编码图片   阅读:11119HTTP 1.1 协议详解   阅读:9965用php从1乘到100的值   阅读:5901centos 7 安装 nginx-1.11.10   阅读:7969nginx编译安装后对nginx进行平滑升级   阅读:5933给php7安装redis扩展库   阅读:7834web性能测试工具ab的测试方法   阅读:4325