JS实现json格式美化【工具包系列】

最新推荐文章于 2024-04-16 14:03:25 发布
最新推荐文章于 2024-04-16 14:03:25 发布
阅读量7.2k 收藏 5
点赞数 2
分类专栏： 工具包系列 文章标签： json html 
 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>json格式美化</title>
    </head>
    <body>

        <form id="form1" name="form1">
            <textarea name="sourcejson" id="sourcejson" cols="80" rows="30"></textarea>     
            <input type="button" onclick="formatJson();" value="美化"/>
            <textarea name="targetjson" id="targetjson" cols="80" rows="30">  </textarea>
        </form>
    </body>

      <script type="text/javascript">
    function repeat(s, count) {
        return new Array(count + 1).join(s);
    }

    function formatJson() {

        var json=  document.form1.sourcejson.value;

        var i           = 0,
            len          = 0,
            tab         = "    ",
            targetJson     = "",
            indentLevel = 0,
            inString    = false,
            currentChar = null;


        for (i = 0, len = json.length; i < len; i += 1) { 
            currentChar = json.charAt(i);

            switch (currentChar) {
            case '{': 
            case '[': 
                if (!inString) { 
                    targetJson += currentChar + "\n" + repeat(tab, indentLevel + 1);
                    indentLevel += 1; 
                } else { 
                    targetJson += currentChar; 
                }
                break; 
            case '}': 
            case ']': 
                if (!inString) { 
                    indentLevel -= 1; 
                    targetJson += "\n" + repeat(tab, indentLevel) + currentChar; 
                } else { 
                    targetJson += currentChar; 
                } 
                break; 
            case ',': 
                if (!inString) { 
                    targetJson += ",\n" + repeat(tab, indentLevel); 
                } else { 
                    targetJson += currentChar; 
                } 
                break; 
            case ':': 
                if (!inString) { 
                    targetJson += ": "; 
                } else { 
                    targetJson += currentChar; 
                } 
                break; 
            case ' ':
            case "\n":
            case "\t":
                if (inString) {
                    targetJson += currentChar;
                }
                break;
            case '"': 
                if (i > 0 && json.charAt(i - 1) !== '\\') {
                    inString = !inString; 
                }
                targetJson += currentChar; 
                break;
            default: 
                targetJson += currentChar; 
                break;                    
            } 
        } 
        document.form1.targetjson.value=targetJson;
        return;
    }
  </script>

</html>

注意：不要使用div作为输出容器，因为标签不会被执行。
运行结果
这里写图片描述

清墨无痕
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EditPlus JSON、JS、CSS格式化
03-26
EditPlus JSON、JS、CSS格式美化；EditPlus JSON、JS、CSS格式美化
js格式化json工具
12-22
js格式化json工具。把json字符串格式化成更好辨认的格式。
JSON数据美化
jsjrong的博客
03-22 329
为了减小JSON数据的文件大小，便于JSON数据在网络中传输，减少网络带宽的占用，有些项目中的JSON数据做了压缩处理，去掉了空格和换行等字符，导致JSON数据阅读困难，并且难以维护。JSON数据的美观直接影响了数据的可读性和可维护性。长期累积的数据需要有一致的风格，才能保持项目的可读性和可扩展性。
如何使用JavaScript漂亮地打印JSON？
asdfgh0077的博客
01-03 1186
如何以易于阅读的格式（对人类读者而言）显示JSON？ 我主要是在寻找缩进和空格，甚至可能是颜色/字体样式/等。
使用 js 美化 json
NiceGays的博客
09-26 715
//json 美化 var formatJson = function (json, options) { var reg = null, formatted = '', pad = 0, PADDING = ' '; // one can also use '\t' or a different number of spaces // opt
[js]javascript实现多个json对象及列表的美化，容错非法json
疑落尘污的专栏
08-03 680
js实现美化json 本文介绍的使用javascript格式化json，核心的函数是eval和JSON.stringify。 支持多个json混在一起的情况，通过统计{}[]来实现。不匹配的{}[]会原样返回。 测试用例1: {} 测试用例2: [1,2,3] 测试用例3: {a:1},[1,2,3] 测试用例4: {a},[b] 测试用例5: [1,2,3 测试用例6: {a:1,[1,2,3] 用例4-6是异常的json串，直接返回原有的数据。 下面是测试用例的输出结果（是直接将测试用例的整行输进去
js对json、xml字符串格式化（美化增强可读性）
~~
09-25 3428
XML格式化工具是一款XML在线解析工具，提供XML格式化、XML压缩功能，格式化后的XML代码有着很高的可读性，颜色高亮显示代码，是程序员必备工具之一。在node中 将格式化后的字符串写入test.xml中。XML格式化 XML在线解析工具。
JSON.stringify格式化数据美化显示效果(不呆板地一行显示)
qq_42750608的博客
09-26 1765
JSON.stringify格式化数据美化显示效果
原生js获取form表单数据以及高亮美化JSON输出展示
jason_renyu的博客
12-15 2777
现在基本项目都以框架为主react和vue之类，这也就导致很多人对原生js的操作变得生疏，甚至有些工作几年的前端基础还是一知半解，问起框架来还能侃侃而谈，面对原生js就吞吞吐吐了。 优秀的框架总能吸引一大堆爱好者的追随，但是原生的魅力也需要我们来了解，框架固然好用但是基础知识也要跟上才行，同样是话不多说直接上代码： serialize.js // 获取制定form中的所有表单元素 const getFormElements = (formId) => { const form = document
如何进行json格式化与美化校验
m0_48342140的博客
03-03 529
有的时候开发与产品拿到一个json文本后需要对该json进行美化, 有些可能只需要使用JSON格式化美化工具进行校验 例子如下 那么对于程序员来讲如何使用程序来进行美化么？下面给出各个语言的例子 Python版本 import json def pp_json(json_thing, sort=True, indents=4): if type(json_thing) is str: print(json.dumps(json.loads(json_thing)...
web-beautify, js美化格式 HTML，CSS和 javascript/json.zip
09-18
web-beautify, js美化格式 HTML，CSS和 javascript/json 网络美化 网页美化是 HTML 。CSS和 javascript/json的格式化包。 在 http://jsbeautifier.org/ 中使用命令行/node.js javascript格式化程序来格式化整个 htm
JSON美化「JSON Beautifier」「JSON Beautifier & Editor」-crx插件
03-21
通过将JSON对象转换为Syntax可编辑突出显示的HTML来显示JSON对象 这个扩展监视JSON页面并将它们转换成一个人类可读的对象。您可以查看，编辑，通过值和键搜索。你甚至可以改变一个键的格式或者把它拖到一个新的地方。安装后不需要做任何事情。只要打开一个JSON页面，扩展就会自动将页面转换为编辑器模式。 有关常见问题，请访问： http://add0n.com/json-beautifier.html 错误报告请访问： https://github.com/belaviyo/json-beautifier 支持的MIME类型： 1. application / json 2. application / x-javascript 3. application / hal + json 4. application / vnd.error + json 5. text / javascript 6. text / x-javascript 7. text / x-json 8.文本/平原 更改日志： 0.1.3： 1.现在可以美化本地（file：//）JSON文件。 2.扩展现在使用“persistent = false”的背景页面（事件页面），在不使用时没有性能影响。 支持语言:English
json数据展示插件，jsonview.js
09-01
jsonview是chrome浏览器的一个插件，用来在浏览器中查看json数据。比如你在浏览器中可以查看从服务器端传回来的json数据，这些数据可能没有经过格式化的，也或者是经过了unicode编码，没有缩进，没有换行等等，造成阅读有一定困难。那么使用jsonview，可以自动对json数据转码，缩进，格式化，使得开发人员可以更好的阅读信息。 官网：http://jsonview.com/
json比对js插件
03-23
JSON 对比工具,优秀的JSON对比工具,自动格式化，对比JSON不同处，高亮显示，代码经过优化
json-fmt:缩小和美化您的 JSON
06-22
json-fmt - JSON 格式化程序缩小和美化您的 JSON这是什么包json-fmt定义了用于处理 JSON 字符串的JSONFormatter类，以便为它们提供比的弱第三个参数更好的表示，或者缩小它们。 没有依赖性。 它还具有 CLI 风格，...
electron-json-tool-master.rar
12-23
一个基于 electron-vue 开发的 美化 JSON 小工具 这是一个美化JSON小程序（暂时仅支持Mac），基于 [Electron-Vue](https://simulatedgreg.gitbooks.io/electron-vue/content/cn/) 开发，同时使用了 [Vue]...
2023最新全功能版在线WEB工具箱PHP源码
03-05
简介： 2023最新全功能版在线WEB工具箱PHP源码 一个多功能的 Web 工具 PHP 脚本，包含 45 种工具，适用于日常任务和... ... 功能简介 DNS 查找工具。...JS 压缩工具。...JSON 验证器和美化工具。...SQL 格式化程序/美化工具。
Nextjs学习入门 - 创建第一个项目
最新发布
liu289747235的专栏
04-16 319
创建一个文件夹来存储静态资产，例如图像、字体等。然后，代码可以从基 URL （） 开始引用目录中的文件。public public/如果您更喜欢使用 Pages Router 而不是 App Router，则可以在项目的根目录下创建一个pages目录。自定义文档pages/_document.tsx（在里面添加一个文件来控制服务器的初始响应）app/page.tsx:（这是页面）
用python实现json格式化
04-04
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输和存储。 要实现JSON格式化，可以按照以下步骤进行操作： 1. 导入json模块： ```python import json ``` 2. 创建一个Python...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值