专栏首页solate 杂货铺前端json格式化展示

前端json格式化展示

背景

需要在同一个textarea里讲写的json传变成格式化的。

我使用这个就完成了

JSON.stringify(JSON.parse(str), null, "\t")

下面是完整例子

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>json数据格式化</title>
    <style>
        /* 方法1:设置textarea合适的宽高 */
        #jsonTextarea {
            float: left;
            margin-right: 20px;
            width: 40%;
            height: 70vh;
            outline: none;
            padding: 5px;
        }
 
        /* 方法2:自定义高亮样式 */
        #jsonPre {
            float: left;
            width: 40%;
            height: 70vh;
            outline: 1px solid #ccc;
            padding: 5px;
            overflow: scroll;
        }
 
        .string {
            color: green;
        }
 
        .number {
            color: darkorange;
        }
 
        .boolean {
            color: blue;
        }
 
        .null {
            color: magenta;
        }
 
        .key {
            color: red;
        }
    </style>
</head>
 
<body>
    <textarea id="jsonTextarea" readonly></textarea>
    <pre id="jsonPre"></pre>
</body>
 
<script src="./jquery-3.4.1.min.js"></script>
<script>
    var data = '[{"name":"黑子","sex":"男","Age":25,"hobby":["篮球","跑步","看电影","王者荣耀"],"normal":true},{"name":"张三","sex":"男","Age":25,"hobby":["上天","入地"],"normal":false}]';
    // 方法1:textarea + JSON.stringify
    function parse1(str) {
        return JSON.stringify(JSON.parse(str), null, "\t");
    }
    $('#jsonTextarea').text(parse1(data));
 
    // 方法2:pre + JSON.stringify
    function parse2(str) {
        // 设置缩进为2个空格
        str = JSON.stringify(JSON.parse(str), null, 2);
        str = str
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
        return str.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }
    $('#jsonPre').html(parse2(data));
</script>
</html>

参考

https://blog.csdn.net/fifteen718/article/details/90489281

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue-json-viewer 展示JSON格式数据

    最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,于是用到了vue-json-viewe...

    越陌度阡
  • jQuery格式化显示json数据

    在gitlab上面,有一个jQuery JSONView插件,地址为:https://github.com/yesmeck/jquery-jsonview

    py3study
  • JSON格式化

    我个人主要是做一些后端的工作,比如php、python、c之类的,c比较少,最主要的是php,不过我非常喜欢js,所以经常会愿意去写一些小玩意自娱自乐。

    江湖安得便相忘
  • php JSON格式化

    php 的json_encode能把数组转换为json格式的字符串。字符串没有缩进,中文会转为unicode编码,例如\u975a\u4ed4。人阅读比较困...

    似水的流年
  • php JSON格式化

    php 的json_encode能把数组转换为json格式的字符串。字符串没有缩进,中文会转为unicode编码,例如\u975a\u4ed4。人阅读比较困难。...

    似水的流年
  • Chrome扩展JSON代码格式化高亮推荐-JSON-Handle

    沈唁
  • 7.JSON格式数据的格式化

    有一些五六年前的学生们都成长为了各个生物信息学相关公司的小领导,而且他们都有了自己的公众号,知乎号,也算是一番人物。最近他们跟我反馈面试找不到或者说很难直接考...

    生信技能树
  • chrome json 格式化插件 JSON-Handle

    Chrome 浏览器插件安装方法: 在地址栏输入 , 将下载的 .crx 插件包拖放到打开的页面中.

    WindWant
  • js前端日期格式化处理

    Dream城堡
  • 格式化JSON字符串

    public static string FormatJsonString(string jsonString)

    用户7886150
  • Python 格式化打印json数据方法(展开状态)

    Python下json手法的json在打印查看时,括号和数据都没有展开,查看起来比较困难。

    砸漏
  • [838]Notepad++格式化json字符串

    2. 找到JSON Viewer点击右上角"安装", 会有提示框安装重启notepad++, 点击ok

    周小董
  • 前端传过来的是json格式,springboot项目里面利用springmvc框架后端如何接收json格式的数据

    前端传的是一个简单的json,后端可以用map集合进行接收,因为json是键值对形式,后端也是可以用键值对形式进行接收的,map集合就是键值对的形式。但是这个参...

    一天不写程序难受
  • java json格式化的两种方式

    FHAdmin
  • JavaScript 技术篇-JSON字符串在线快速格式化查看实例演示,json.cn网址格式化json字符串

    直接登录 http://json.cn/ 地址,左边把 json 串粘上,可以看到右边已经格式化好了。

    小蓝枣
  • JavaScriptSerializer 序列化json 时间格式

     利用JavaScriptSerializer 序列化json 时间格式,得到的DateTime值值显示为“/Date(700000+0500)/”形式的JS...

    欢醉
  • 原生js格式化json工具

    Jack Chen
  • Python进行JSON格式化输出

    看上去还可以接受吧,但是万一这JSON有一长串串串串串的话……可能编辑器都要hold不住了。 这个时候我们就可以对其进行格式化输出,json.dumps里就...

    py3study
  • notepad++ 添加JSON格式化插件

    Notepad++ 是Windows下一款非常好用的免费多语言代码编辑器,可以通过添加JSON格式化插件,更方便的协助我们将JSON数据格式化为观看更直观友好的...

    大大大黑白格子

扫码关注云+社区

领取腾讯云代金券