编译器：pycharm

原始数据：json

快速格式化方法：

①建立json文件

在pycharm上创建一个.json的文件，如hello.json

②将json数据粘贴到.json文件中

以下是一段json格式数据，可以直接粘贴到.json文件中

{"code":0,"data":{"album":{"count":2,"itemlist":[{"docid":"24100646","id":"24100646","mid":"002mPgSG01LLtu","name":"无名的人","pic":"http://y.gtimg.cn/music/photo_new/T002R180x180M000002mPgSG01LLtu_1.jpg","singer":"毛不易"},{"docid":"3834888","id":"3834888","mid":"0026ttFc17IeE3","name":"无问","pic":"http://y.gtimg.cn/music/photo_new/T002R180x180M0000026ttFc17IeE3_1.jpg","singer":"毛不易"}],"name":"专辑","order":2,"type":3},"mv":{"count":2,"itemlist":[{"docid":"1449642","id":"1449642","mid":"001UwAbv4H9QVZ","name":"牧马城市","singer":"毛不易","vid":"k002671le5d"},{"docid":"1352908","id":"1352908","mid":"003bjsSu20ltwY","name":"像我这样的人","singer":"毛不易","vid":"y0026hr4b5e"}],"name":"MV","order":3,"type":4},"singer":{"count":2,"itemlist":[{"docid":"1507534","id":"1507534","mid":"001BHDR33FZVZ0","name":"毛不易","pic":"http://y.gtimg.cn/music/photo_new/T001R150x150M000001BHDR33FZVZ0_3.jpg","singer":"毛不易"},{"docid":"4417724","id":"4417724","mid":"000pEm1i1BkmuD","name":"毛不易的留声机","pic":"http://y.gtimg.cn/music/photo_new/T001R150x150M000000pEm1i1BkmuD_1.jpg","singer":"毛不易的留声机"}],"name":"歌手","order":1,"type":2},"song":{"count":4,"itemlist":[{"docid":"203514624","id":"203514624","mid":"00375L600p9sxv","name":"像我这样的人","singer":"毛不易"},{"docid":"203451421","id":"203451421","mid":"003kLvu04bLGzi","name":"消愁","singer":"毛不易"},{"docid":"213224236","id":"213224236","mid":"000uhMwj387EBp","name":"牧马城市","singer":"毛不易"},{"docid":"336582682","id":"336582682","mid":"002QhULf16tWw1","name":"无名的人","singer":"毛不易"}],"name":"单曲","order":0,"type":1}},"subcode":0}

③ 快捷键Ctrl+Alt+L

使用快捷键“Ctrl+Alt+L”即可快速格式化，格式化后的数据如下：

{
  "code": 0,
  "data": {
    "album": {
      "count": 2,
      "itemlist": [
        {
          "docid": "24100646",
          "id": "24100646",
          "mid": "002mPgSG01LLtu",
          "name": "无名的人",
          "pic": "http://y.gtimg.cn/music/photo_new/T002R180x180M000002mPgSG01LLtu_1.jpg",
          "singer": "毛不易"
        },
        {
          "docid": "3834888",
          "id": "3834888",
          "mid": "0026ttFc17IeE3",
          "name": "无问",
          "pic": "http://y.gtimg.cn/music/photo_new/T002R180x180M0000026ttFc17IeE3_1.jpg",
          "singer": "毛不易"
        }
      ],
      "name": "专辑",
      "order": 2,
      "type": 3
    },
    "mv": {
      "count": 2,
      "itemlist": [
        {
          "docid": "1449642",
          "id": "1449642",
          "mid": "001UwAbv4H9QVZ",
          "name": "牧马城市",
          "singer": "毛不易",
          "vid": "k002671le5d"
        },
        {
          "docid": "1352908",
          "id": "1352908",
          "mid": "003bjsSu20ltwY",
          "name": "像我这样的人",
          "singer": "毛不易",
          "vid": "y0026hr4b5e"
        }
      ],
      "name": "MV",
      "order": 3,
      "type": 4
    },
    "singer": {
      "count": 2,
      "itemlist": [
        {
          "docid": "1507534",
          "id": "1507534",
          "mid": "001BHDR33FZVZ0",
          "name": "毛不易",
          "pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M000001BHDR33FZVZ0_3.jpg",
          "singer": "毛不易"
        },
        {
          "docid": "4417724",
          "id": "4417724",
          "mid": "000pEm1i1BkmuD",
          "name": "毛不易的留声机",
          "pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M000000pEm1i1BkmuD_1.jpg",
          "singer": "毛不易的留声机"
        }
      ],
      "name": "歌手",
      "order": 1,
      "type": 2
    },
    "song": {
      "count": 4,
      "itemlist": [
        {
          "docid": "203514624",
          "id": "203514624",
          "mid": "00375L600p9sxv",
          "name": "像我这样的人",
          "singer": "毛不易"
        },
        {
          "docid": "203451421",
          "id": "203451421",
          "mid": "003kLvu04bLGzi",
          "name": "消愁",
          "singer": "毛不易"
        },
        {
          "docid": "213224236",
          "id": "213224236",
          "mid": "000uhMwj387EBp",
          "name": "牧马城市",
          "singer": "毛不易"
        },
        {
          "docid": "336582682",
          "id": "336582682",
          "mid": "002QhULf16tWw1",
          "name": "无名的人",
          "singer": "毛不易"
        }
      ],
      "name": "单曲",
      "order": 0,
      "type": 1
    }
  },
  "subcode": 0
} 

④代码快捷缩进和展开

快捷缩进：Ctrl+Shift+"-"(减号)

快捷展开：Ctrl+Shift+"+ "(加号)

前言

在WEB项目开发中，通常都是前后端分离，由后端提供接口前端进行访问，返回的数据一般是JSON格式，在配置项目时候会对返回JSON进行格式化。
下面是我在多个项目开发过程中总结出来的一个通用的JSON数据格式化的通用配置，希望能够帮助到大家。

对返回前端的JSON数据进行格式化代码

代码如下（示例）：

	/**
     * 对返回前端的JSON数据进行格式化
     *
     * @return 进行格式化ObjectMapper
     */
    @Bean
    public ObjectMapper objectMapper() {
        ObjectMapper mapper = new ObjectMapper();
        // 进行缩进输出
        mapper.configure(SerializationFeature.INDENT_OUTPUT, true);
        // 解决延迟加载的对象
        mapper.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false);
        // 进行Date日期格式化
        DateFormat dateFormat = new SimpleDateFormat(DatePattern.NORM_DATETIME_PATTERN);
        mapper.setDateFormat(dateFormat);

        JavaTimeModule javaTimeModule = new JavaTimeModule();
        // 序列换成json时,将所有的long变成string ，处理Long类型转Json后精度丢失问题
        javaTimeModule.addSerializer(Long.class, ToStringSerializer.instance);
        javaTimeModule.addSerializer(Long.TYPE, ToStringSerializer.instance);

        // 进行LocalDateTime时间格式化
        javaTimeModule.addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
        javaTimeModule.addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern("yyyy-MM-dd")));
        javaTimeModule.addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern("HH:mm:ss")));

        mapper.registerModule(javaTimeModule);
        mapper.setTimeZone(TimeZone.getTimeZone("GMT+8"));

        mapper.registerModule(new ParameterNamesModule()).registerModule(new Jdk8Module()).registerModule(new JavaTimeModule());

        mapper.enable(DeserializationFeature.ACCEPT_EMPTY_STRING_AS_NULL_OBJECT);

        // 支持接收List
        mapper.configure(DeserializationFeature.ACCEPT_SINGLE_VALUE_AS_ARRAY, true);
        mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
        // 根据属性名称排序
        mapper.configure(SerializationFeature.ORDER_MAP_ENTRIES_BY_KEYS, true);
        mapper.configure(MapperFeature.ALLOW_COERCION_OF_SCALARS, true);
        mapper.configure(MapperFeature.SORT_PROPERTIES_ALPHABETICALLY, true);
        return mapper;
    }

1. 故事前景：

后端返回给前端一串json字符串，前端需要做格式化处理并将其美观地展示给用户。

2. 效果演示：

3. 实现代码：

<!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>

注：以上代码为方便dom操作，引入了jquery，请自行引入jquery即可直接演示。

4. 参考资料：

JSON.stringify() - JavaScript | MDN

在html页面中展示JSON