基于jquery+html开发的json格式校验工具

news2024/12/26 11:46:51

json简介

JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。

json在线解析及格式化工具介绍

JSON格式化和JSON验证器工具帮助自动格式化JSON和验证您的JSON文本。它还提供了一个树视图,帮助导航格式化的JSON数据。

json格式化工具截图

体验地址是:工具入口

源码分享

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>JSON在线解析 | JSON在线格式化校验工具</title>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
    <meta name="applicable-device" content="pc,mobile" />
    <meta name="keywords" content="json格式化, json在线解析, json校验" />
    <meta name="description"
        content="一个功能强大的在线 JSON 解析和格式化工具,提供JSON在线,json解析,json在线解析,JSON Formatter,json数组,JSON校验,格式化JSON,xml转json工具,在线json格式化工具,json格式化,json格式化工具,json字符串格式化,json在线,json在线验证,json在线校验" />

    <!-- Google -->
    <meta itemprop="name" content="json在线解析工具" />
    <meta itemprop="description" content="一个功能强大的在线 JSON 解析和格式化工具..." />
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="json在线解析工具" />
    <meta name="twitter:description" content="一个功能强大的在线 JSON 解析和格式化工具..." />

    <meta name="renderer" content="webkit" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="icon" type="image/png" href="/images/favicon_48x48.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/images/favicon_114x114.png">
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
        type="text/css" />
    <link href="./static/style/tool.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <header class="hd-nav">
        <a class="navbar-icon" href="/">
            <img src="/images/icon_36x36.svg" width="32" height="32" alt="fktool在线工具网" />
            <span class="navbar-label">FKTool.com</span>
        </a>
    </header>

    <div class="main">
        <div class="left">
            <div class="row">
                <h1 style="font-size: 24px;margin: 16px 16px;color:#7952b3;">JSON在线格式化工具</h1>
            </div>
            <div class="row">
                <div class="banner">输入要解析的json文本并点击格式化按钮</div>
            </div>
            <div class="row">
                <div class="col-md-12 col10main">
                    <div class="accordion" id="accordion2">
                        <div class="accordion-group">
                            <div class="panel panel-defaul">
                                <form id="form1" class="form-horizontal" method="post">
                                    <div class="input-group mb5"><input class="form-control" type="text" id="txt_url"
                                            placeholder="输入远程Json网址" /><span class="input-group-btn"><button
                                                class="btn btn-default" type="button"
                                                id="get_remote">远程获取Json</button></span></div>
                                    <div class="form-group">
                                        <div class="col-sm-12"><textarea id="content" name="content"
                                                class="form-control" rows="14"
                                                placeholder="请输入Json,Json格式化的时候要去除所有转义,转义存在可能导致Json校验不通过"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12 text-center">

                                            <input type="button" class="btn btn-success" name="validate" id="validate"
                                                value="Json格式化" />
                                            <input type="button" class="btn btn-info" onclick="jsonzip(1);"
                                                value="Json压缩">
                                            <span id="copyallcode" class="btn btn-default"
                                                data-clipboard-target="#content">复制</span>
                                            <input type="button" class="btn btn-default" onclick="content.value=''"
                                                value="清空">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <div class="alert alert-warning alert-dismissible text-left" role="alert"
                                                id="results"><span>请输入需要格式化的Json字符串</span></div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="alert alert-info main-desc">
                            <h2 class="f20">json在线解析及格式化工具介绍</h2>
                            <p>
                                JSON格式化和JSON验证器工具帮助自动格式化JSON和验证您的JSON文本。它还提供了一个树视图,帮助导航格式化的JSON数据。它具有如下优点:
                            </p>

                            <ul>
                                <li>
                                    它有助于通过错误消息在线验证JSON。
                                </li>
                                <li>
                                    它是唯一的JSON工具,显示图像悬停在树视图中的图像URL。
                                </li>
                                <li>
                                    它也是一个JSON美化器,支持缩进级别:2个空格,3个空格和4个空格。
                                </li>
                                <li>
                                    支持打印JSON数据。
                                </li>
                                <li>
                                    JSON文件格式化器提供了上传JSON文件和下载格式化JSON文件的功能。这个功能有助于格式化json文件。
                                </li>
                                <li>
                                    95%的API使用JSON在客户端和服务器之间传输数据。这个工具可以作为API格式化器使用。
                                </li>
                                <li>
                                    支持JSON字符串的JSON图形视图,作为JSON调试器或纠错器,可以格式化数组和对象。
                                </li>
                                <li>
                                    在浏览器的本地存储中存储最后一个JSON格式的数据。这可以用作notepad++ / Sublime / VSCode JSON美化的替代方案。
                                </li>
                                <li>
                                    这个JSON在线格式化器也可以作为JSON Lint工作。
                                </li>
                                <li>
                                    使用自动开关打开或关闭自动更新进行美化。
                                </li>
                                <li>
                                    它使用$。parseJSON和JSON。stringify美化JSON,以便于人类阅读和分析。
                                </li>
                                <li>
                                    下载JSON,一旦它被创建或修改,它可以在notepad++, Sublime,或VSCode替代打开。
                                </li>
                                <li>
                                    JSON格式检查器有助于修复缺失的引号,点击设置图标,看起来像一个螺丝刀在编辑器的左边来修复格式。
                                </li>
                            </ul>

                            <h2>JSON简介</h2>
                            <p>
                                JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard
                                ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C,
                                C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。
                            </p>

                            <h2>与其他格式的比较</h2>
                            <h3>XML</h3>
                            <p>
                                JSON与XML最大的不同在于XML是一个完整的标记语言,而JSON不是。这使得XML在程序判读上需要比较多的功夫。主要的原因在于XML的设计理念与JSON不同。XML利用标记语言的特性提供了绝佳的延展性(如XPath),在数据存储,扩展及高级检索方面具备对JSON的优势,而JSON则由于比XML更加小巧,以及浏览器的内置快速解析支持,使得其更适用于网络数据传输领域。
                            </p>
                            <h3>YAML</h3>
                            <p>
                                在功能和语法上,JSON 都是 YAML 语言的一个子集。特别是,YAML
                                1.2规范指定“任何JSON格式的文件都是YAML格式的有效文件"。最常见的YAML解析器也能够处理JSON。版本 1.2 之前的 YAML 规范没有完全涵盖
                                JSON,主要是由于 YAML 中缺乏本机 UTF-32 支持,以及对逗号分隔空格的要求;此外,JSON 规范还包括 /* */ 样式的注释。YAML
                                最重要的区别是语法扩展集,它们在 JSON 中没有类似物:关系数据支持:在 YAML
                                文档中,可以引用以前在文件/流中找到的锚点;通过这种方式,您可以表达递归结构。支持除基元之外的可扩展数据类型,如字符串、数字、布尔值等。支持带缩进的块语法;它允许您在不使用不必要的符号的情况下描述结构化数据:各种括号、引号等。
                            </p>
                            <h3>MessagePack</h3>
                            <p>
                                MessagePack比JSON更短小,快速。
                            </p>
                            <h3>格式化工具</h3>
                            <p>
                                JSON格式取代了XML给网络传输带来了很大的便利,但是却没有了XML的一目了然,尤其是JSON数据很长的时候,会让人陷入繁琐复杂的数据节点查找中。开发者可以通过在线JSON格式化工具,来更方便的对JSON数据进行节点查找和解析。
                            </p>

                            <h2>参考资料:</h2>
                            <ul>
                                <li>
                                    <a href="https://zh.wikipedia.org/wiki/JSON">https://zh.wikipedia.org/wiki/JSON</a>
                                </li>
                                <li>
                                    <a
                                        href="https://zhuanlan.zhihu.com/p/33792109">https://zhuanlan.zhihu.com/p/33792109</a>
                                </li>
                                <li>
                                    <a href="https://www.json.org/json-zh.html">https://www.json.org/json-zh.html</a>
                                </li>
                                <li>
                                    <a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON">https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON</a>
                                </li>
                            </ul>

                        </div>
                        <div class="accordion-group"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="search">
                <input id="keyword" />
                <div class="search-btn">搜索</div>
            </div>
            <div class="recommend">
                <div class="recommend-head">相关推荐</div>
                <div class="recommend-list">
                    <a class="recommend-list-item" href="https://ps.gitapp.cn">在线ps</a>
                    <a class="recommend-list-item" href="https://fangdai.gitapp.cn">房贷计算器</a>
                    <a class="recommend-list-item" href="https://ps.fktool.com">Online PS</a>
                    <a class="recommend-list-item" href="https://base64.fktool.com">base64解码</a>
                </div>
            </div>
        </div>
    </div>

    <script src="./static/script/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="./static/script/bootstrap.min.js" type="text/javascript"></script>
    <script src="./static/script/tool.js" type="text/javascript"></script>
    <script src="./static/script/json/jsonformat.js" type="text/javascript"></script>
    <script type="text/javascript">setJS(["./static/script/json/jsonzip.js"]);</script>
    </div>


    <div class="copyright" id="footer">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <span>
                        Copyright ©2023
                        <a href="/">
                            fktool在线工具网
                        </a>
                    </span>
                    |
                    <span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <script>
    </script>

</body>

</html>

与其他格式比较

  • XML
    JSON与XML最大的不同在于XML是一个完整的标记语言,而JSON不是。这使得XML在程序判读上需要比较多的功夫。主要的原因在于XML的设计理念与JSON不同。XML利用标记语言的特性提供了绝佳的延展性(如XPath),在数据存储,扩展及高级检索方面具备对JSON的优势,而JSON则由于比XML更加小巧,以及浏览器的内置快速解析支持,使得其更适用于网络数据传输领域。

  • YAML
    在功能和语法上,JSON 都是 YAML 语言的一个子集。特别是,YAML 1.2规范指定“任何JSON格式的文件都是YAML格式的有效文件"。最常见的YAML解析器也能够处理JSON。版本 1.2 之前的 YAML 规范没有完全涵盖 JSON,主要是由于 YAML 中缺乏本机 UTF-32 支持,以及对逗号分隔空格的要求;此外,JSON 规范还包括 /* */ 样式的注释。YAML 最重要的区别是语法扩展集,它们在 JSON 中没有类似物:关系数据支持:在 YAML 文档中,可以引用以前在文件/流中找到的锚点;通过这种方式,您可以表达递归结构。支持除基元之外的可扩展数据类型,如字符串、数字、布尔值等。支持带缩进的块语法;它允许您在不使用不必要的符号的情况下描述结构化数据:各种括号、引号等。

  • MessagePack
    MessagePack比JSON更短小,快速。

总结

JSON格式取代了XML给网络传输带来了很大的便利,但是却没有了XML的一目了然,尤其是JSON数据很长的时候,会让人陷入繁琐复杂的数据节点查找中。开发者可以通过在线JSON格式化工具,来更方便的对JSON数据进行节点查找和解析。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1144397.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

打破信息孤岛,如何从API、数据中台突围

“烟囱”林立&#xff0c;零售企业“数据孤岛”现象突出 所谓数据孤岛&#xff0c;是指零售企业不同组织机构之间、不同部门之间或不同软件之间的数据无法连接互动&#xff0c;数据信息不能共享&#xff0c;设计、管理、生产的数据不能相互交流&#xff0c;数据出现脱节的现象…

tomcat必要的配置

tomcat要配置两个&#xff0c;不然访问不了localhost:8080 名&#xff1a;CATALINA_HOME 值&#xff1a;D:\software\computer_software\Tomcat\tomcat8.5.66

C/C++版数据结构和算法知识概要

数据结构和算法是计算机科学领域中的重要基础知识&#xff0c;无论您是初学者还是有经验的程序员&#xff0c;都必须深入了解这些概念。本篇博客将为您提供关于数据结构、抽象数据类型、算法、算法分析以及面向对象编程的综合概述&#xff0c;每个部分都将附有具体的代码示例。…

技术栈 业务架构 插件库

大前端 技术栈 业务架构 插件库

软考高项-计算题(3)

题10 问题一 EV50*0.525 问题二 EACBAC/CPI CPIEV/AC25/28 EAC50*28/2556 问题三 因为CPI<1&#xff0c;所以项目实际费用超支 题11 PV2000500010000750006500020000177000 AC2100450012000860006000015000179600 EV200050001000075000*0.965000*0.720000*0.351370…

vite的.env个人使用总结

以.env开头,后面是自定义环境,如gaga 配置文件内以VITE_开头 使用时,用--mode指定模式 在react中用import.meta.env为前缀获取对应值 在配置文件中使用方法:需要从vite中导入loadEnv包,再将defineConfig改成函数,返回对象. const env loadEnv(mode.mode, process.cwd());这一…

CCF CSP认证历年题目自练 Day40

题目 试题编号&#xff1a; 201412-3 试题名称&#xff1a; 集合竞价 时间限制&#xff1a; 1.0s 内存限制&#xff1a; 256.0MB 问题描述&#xff1a; 问题描述   某股票交易所请你编写一个程序&#xff0c;根据开盘前客户提交的订单来确定某特定股票的开盘价和开盘成交量…

Csdn文章编写参考案例

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

【javaweb】学习日记Day12 - tlias智能管理系统 - 登录校验 JWT令牌 过滤器 拦截器 全局异常处理

目录 一、登录功能 &#xff08;1&#xff09;Controller层 &#xff08;2&#xff09;Service层 &#xff08;3&#xff09;Mapper层 二、登录校验 1、会话技术概述 2、会话跟踪方案 &#xff08;1&#xff09;Cookie &#xff08;2&#xff09;Session —— 基于Co…

kaggle新赛:AI Village夺旗赛挑战

赛题名称&#xff1a;AI Village Capture the Flag DEFCON31 赛题链接&#xff1a;https://www.kaggle.com/competitions/ai-village-capture-the-flag-defcon31 赛题背景 夺旗赛这款广受欢迎的竞技游戏&#xff0c;不仅可以在户外进行。数字夺旗赛指的是一系列需要参赛者利…

python操作MySQL,SQL注入问题,视图,触发器,事务,存储过程,内置函数,流程控制,索引

一、python操作MySQL 导入第三方模块&#xff1a;pymysql 操作步骤&#xff08;文字描述&#xff09;&#xff1a; 1. 先链接MySQL host&#xff0c;port&#xff0c;username&#xff0c;password&#xff0c;charset&#xff0c;库&#xff0c;autocommit等 2. 在python中书…

06条件判断

if语句的基本语法 if关键字后面跟一个判断条件 如果条件成立那么就运行判断条件里面的代码 else处理条件不满足时候的代码块 m 9 if m > 10:print("买一瓶醋") else:print("钱不够&#xff0c;请带够钱再来吧&#xff01;")#条件判断流程图 进入网…

stream流—关于Collectors.toMap使用详解

目录 使用规则&#xff1a;1.将list转成以id为key的map&#xff0c;value是id对应的某对象2.假如id存在重复值&#xff0c;则会报错Duplicate key xxx3.想获得一个id和name对应的Map<String, String>3.1 name为空时null3.2 id重复时 4.分组 使用groupingby 使用规则&…

系列二十五、@Configuration的作用及解析原理

一、作用 Configuration是用来代替传统的xml的配置方式配置bean的。 二、不加Configuration注解不能配置bean吗 能。 三、加与不加的区别 3.1、区别 加了Configuration注解&#xff0c;会为配置类创建cglib动态代理&#xff0c;Bean方法的调用就会通过容器getBean进行获取…

面试准备中........

一、Linux 计算机网络相关&#xff1a; 1.OSI七层模型 应用层 &#xff1a;给用户提供操作界面 表示层&#xff1a;数据的表示&#xff1a;将字符转化为2进制或将2进制转化为字符。加密&#xff1a;对称加密和非对称加密&#xff0c;ssh协议。压缩&#xff1a;将文件压缩。…

C# 图解教程 第5版 —— 第12章 枚举

文章目录 12.1 枚举12.1.1 设置底层类型和显式值12.1.2 隐式成员编号 12.2 位标志12.2.1 Flags 特性12.2.2 使用位标志的示例&#xff08;*&#xff09; 12.3 关于枚举的更多内容 12.1 枚举 枚举是值类型。只有一种类型的成员&#xff1a;命名的整数值常量。 每个枚举成员都被…

VS工程的“多dll与exe文件合并”

运行环境 ILMerge插件 1、打开 VS的“工具 - NuGet包管理器 - 管理解决方案的NuGet程序包” 2、在浏览中搜索“ILMerge”&#xff0c;在官方源中&#xff0c;3.0.41版本的插件已不支持使用了 3、下拉列表其他版本可以安装&#xff0c;使用3.0.40 4、下载封装好的“ILMerge”任…

Kotlin基础——变量、函数、字符串模板、类

变量 Kotlin和Java一样是静态语言&#xff0c;所有表达式类型在编译期已经确定&#xff0c;public为默认可见性 变量由 var/val变量名[: 数据类型][?][ 值] 组成&#xff0c;如 var a 1var b: Int b 3var s: String? nullval language arrayListOf("java")…

Kmeans算法的K值选择技巧【Elbow Method + Silhouette Score Method】

文章目录 一、方法简述二、使用到的数据集三、代码实现四、结论 一、方法简述 在Kmeans算法中最终聚类数量K的选择主要通过两个方法综合判断&#xff1a; Elbow Method 这是一种绘制k值范围的平方和的方法。如果此图看起来像一只手臂&#xff0c;则k是选择的类似肘部的值。从这…

走进人工智能的大门:打造职业梦想的契机

在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;不再是科幻小说的情节&#xff0c;而是我们现实生活和职业生涯中的现实部分。从自动驾驶汽车到智能助手&#xff0c;AI 的影响已经渗透到各个领域。而中国&#xff0c;作为全球人工智能市场的重要一员&#xff…