如何在html中显示JSON数据


本文摘自PHP中文网,作者不言,侵删。

在项目中我们需要将json数据直接显示在页面上,但是如果直接显示字符串很不方便查看,下面小编给大家带来了html中显示JSON数据的方法,需要的的朋友参考下吧

背景:

有时候我们需要将json数据直接显示在页面上(比如在做一个接口测试的项目,需要将接口返回的结果直接展示),但是如果直接显示字符串,不方便查看。需要格式化一下。

解决方案:

其实JSON.stringify本身就可以将JSON格式化,具体的用法是:

1

JSON.stringify(res, null, 2); //res是要JSON化的对象,2是spacing

如果想要效果更好看,还要加上格式化的代码和样式:

js代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function syntaxHighlight(json) {

    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>';

    });

}

样式代码:

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代码:

1

2

<pre id="result">

</pre>

调用代码:

1

$('#result').html(syntaxHighlight(res));

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

JavaScript实现获取远程的html到当前页面中

浅谈html转义及防止javascript注入攻击的方法

以上就是如何在html中显示JSON数据的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html怎么隐藏控件

html空格代码怎么写?html空格代码的表现方式总结

怎么给html添加js

html怎么给按钮换颜色?html button标签的使用介绍

html hr标签的属性有哪些?html hr标签的样式详解

在html中有哪些引用css的方式

html属于什么语言

如何给html中的pre标签中的文字换行?html pre标签的使用实例

html如何插入图片

html中url什么意思?怎么用?

更多相关阅读请进入《html显示json数据》频道 >>




打赏

取消

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

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

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

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

评论

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