html格式化输出JSON

本篇文章主要介绍了html格式化输出json示例(测试接口) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

将 json 数据以美观的缩进格式显示出来,借助最简单的 JSON.stringify 函数就可以了,因为此函数还有不常用的后面2个参数。

见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 的描述。

示例代码如下:

                     hello                     pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }            .string { color: green; }            .number { color: darkorange; }            .boolean { color: blue; }            .null { color: magenta; }            .key { color: red; }                        function syntaxHighlight(json) {            if (typeof json != 'string') {                json = JSON.stringify(json, undefined, 2);            }            json = json.replace(/&/g, '&').replace(/</g, '/g, '>');            return json.replace(/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(s*:)?|(true|false|null)|-?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 '' + match + '';            });        }                  
     

             

以上就是html格式化输出JSON的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544991.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:26:33
下一篇 2025年12月18日 21:17:28

相关推荐

  • 利用html的name属性获取dom元素

    以前获取dom元素基本都是通过js的document.getelementbyid()或者document.getelementbyname等方法或者通过jq的选择器来选择,但其实html的name属性也可以用来直接获取dom元素,代码如下所示: function check(){ listForm…

    好文分享 2025年12月21日
    000
  • Html当中文本与标签如何让其居中

    1、文本居中: text-align: center;line-height: 100px; (=height) 2、标签居中 margin: 0 auto; 其中0指的是margin-top:0 代码片: 搜索论坛 .item1{ height: 100px; width: 100px; back…

    2025年12月21日
    000
  • html5和html有什么区别

    浅谈:html5和html的区别 最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词。可能有人会问,这两者有什么关系呢?随着这移动互联网快速发展的时代,尤其是4G时代已经来临的时刻,加上微软对“XP系统”不提供更新补丁、维护的情况下“html5+css3”也逐渐的成为新一代web前端技术,…

    好文分享 2025年12月21日
    000
  • HTML在线配色工具

    编者前语: 很多刚开始编写网页的菜鸟,都不知道怎么搭配色彩,刚开始的时候,我也是这样的。 为了更好的搭配色彩。我们说说html css 的色彩搭配以外的事情。 1.网页选择几种颜色比较好? 网页我们一般颜色选择不要超过7种颜色,多了网页风格不好控制,最少不要低于3种,否则太单调。我们常见的网页,一般…

    2025年12月21日
    000
  • html中frame与iframe有哪些区别

    我们首先来看一下w3cschool教程上是如何解释的,因为本人也是从网上了解的 iframe定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 我们可以在页面布局的任何地方来使用这个iframe,它就相当于在页面的任何一个地方插入一个小窗口,用来显示其他页面 frames…

    好文分享 2025年12月21日
    000
  • HTML实现文本框只读取但是不能修改的方法

    本文通过实例代码给大家介绍了 html实现文本框只读不能修改其中的内容的方法,需要的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: 以上就是HTML实现文本框只读取但是不能修改的方法的详细内容,更多请关注创想鸟其它相关文章!

    好文分享 2025年12月21日
    000
  • 3种方法使HTML页面3秒后自动跳转

    在项目中,我们经常会遇到这样一个功能:如何实现页面N秒后自动跳转。其实方法很简单,下面小编通过本文给大家分享HTML页面3秒后自动跳转的三种常见方法,对html页面3秒后自动跳转的相关知识感兴趣的朋友一起学习吧 在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查…

    好文分享 2025年12月21日
    000
  • 巧妙地用HTML打开Windows文件管理

    (一)代码演示 Insert title here 注册 用户名: 密码: 性别: 男 女 擅长: Java Hadoop PHP 头像: (二)效果图 以上就是巧妙地用HTML打开Windows文件管理的详细内容,更多请关注创想鸟其它相关文章!

    2025年12月21日
    000
  • 韩顺平最新html基础视频教程的资料(源码、课件)推荐

    《韩顺平 2016年 最新html基础视频教程》是针对初学者的一个讲解html基础内容的视频。html(hypertext mark-up language)即超文本标签语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。html文本是由html命令组成的描述性文本,html标签可以说…

    2025年12月21日
    000
  • 韩顺平最新html高级视频教程源码课件推荐

    《韩顺平 2016年 最新html高级视频教程》是以《韩顺平html基础视频教程》为基础来对html知识点的加强和提高。内容相对基础知识要稍难一点,但是知识点更加实用html(hypertext mark-up language)即超文本标签语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主…

    2025年12月21日
    000
  • HTML页面加载速度加快的介绍

    1.页面减肥  a. 页面的肥瘦是影响加载速度最重要的因素。  b. 删除不必要的空格、注释。  c. 将inline的script和css移到外部文件。  d. 可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥。  立即学习“前端免费学习笔记(深入)”…

    好文分享 2025年12月21日
    000
  • HTML制作网页动态时钟教程

    本文通过实例代码给大家介绍了html写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today=new Date(); var hh=today.getHours(); var mm=today.…

    2025年12月21日
    000
  • html5+CSS3+JS七夕告白功能实现详解

    因为今天8月28日就是中国的情人节—七夕,作为我这个程序猿一枚也不甘落后,还有一颗脱单的心,下面小编给大家制作了基于html5+css3+js实现的七夕情人节特效,具体实例代码,大家参考下本文  因为今天8月28日就是中国的情人节—七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心;…

    2025年12月21日
    000
  • 总结如何在HTML网页中插入视频方法

    这篇文章主要介绍了html网页中插入视频的方法小结,需要的朋友可以参考下 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不…

    好文分享 2025年12月21日
    000
  • HTML中的文件包含

            在论坛中常常有网友问到,可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下,本人觉得第三种方式较好!         1.iframe引入,看看…

    好文分享 2025年12月21日
    000
  • 优化html代码加快网页加载速度

         web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易。无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要。      明显HTML,暗渡“公用脚本”      减少web…

    好文分享 2025年12月21日
    000
  • HTML中增强标记的用法总结

    近年来,超文本标识语言(HTML)得到了迅速拓展。为满足更多的需要,它增加了许多扩展功能。设计新颖、吸引人的网页已经越来越依赖java applet(小程序)、内嵌脚本、图文框、插件和其它扩展的HTML功能。这些扩展的HTML功能不仅可以对文本作进一步的格式化,而且可以嵌入程序、动画和其它交互式操作…

    好文分享 2025年12月21日
    000
  • html中不常用的标签总结

    介绍几个不常用的html标签 在HTML王国里,这里有很多子民,通常我们看到的是一些熟悉的面孔,而对于那些不熟悉的面孔你又了解多少呢,你知道它们的用法吗? 0、 标签 标签出现在HTML文档第一行上的信息,说明该文档的类型,是一个“标准概括化置标语言(SGML)”声明,不是元素。语法: 例子: 1、…

    好文分享 2025年12月21日
    000
  • 淘宝网店轮播图片html代码整理及局部调整

    本文由创想鸟提供,介绍淘宝网店轮播图片html代码整理及局部调整。  1.主代码 < > @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ 1.修改左箭头 < @@##@@  2.修改右箭头:…

    好文分享 2025年12月21日
    000
  • 布尔教育_燕十八_HTML视频资源课件

    《布尔教育_燕十八_html教程》从最基本的概念开始讲起,步步深入,带领大家学习html、css样式基础知识,了解各种常用标签的意义以及基本用法,后半部分讲解css样式代码添加,为后面的案例课程打下基础。 课程播放地址:http://www.php.cn/course/222.html 该老师讲课风…

    2025年12月21日 好文分享
    000

发表回复

登录后才能评论
关注微信