html中如何美化展示json格式数据


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

function showGeoJsonTxt(){

    $('#geoJsonTxt').html(JsonFormat());

}

 

function JsonFormat() {

    var json={

              "type": "FeatureCollection",

              "features": [

                {

                  "type": "Feature",

                  "geometry": {

                    "type": "Point",

                    "coordinates": [

                      123,

                      22,

                      0

                    ]

                  },

                  "properties": {

                    "name": "必须有的字段",

                    "description": "必须有的字段",

                    "age":"扩展字段,可以自行添加,扩展",

                    "type":"扩展字段,可以自行添加,扩展"

                  }

                },

                {

                  "type": "Feature",

                  "geometry": {

                    "type": "Point",

                    "coordinates": [

                      123,

                      32,

                      0

                    ]

                  },

                  "properties": {

                    "name": "必须有的字段",

                    "description": "必须有的字段",

                  }

                }

              ]

            };

    if (typeof json != 'string') {

        json = JSON.stringify(json, undefined, 2);

    }

        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');

        return json.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>';

         });

}

CSS代码,显示的时候可以更加美化

1

2

3

4

5

6

7

8

<style>

 pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }

 .string { color: green; }

 .number { color: darkorange; }

 .boolean { color: blue; }

 .null { color: magenta; }

 .key { color: red; }

</style>

效果如下:

推荐学习:html视频教程

以上就是html中如何美化展示json格式数据的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

使用Html+css制作一些动画提示工具

Html meta标签怎么用

Html简单介绍

canvas 学习 3---画坐标系

Html如何制作细线表格

Html的图片怎么居中

Html成对标记有哪些

Html span标签是什么意思?span标签的作用详解

Html怎么设置文本域的大小

Html支持的列表标签:无序列表、有序列表和定义列表(介绍)

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...