html怎样格式化输出JSON数据

这次给大家带来html怎样格式化输出json数据,html格式化输出json数据的注意事项有哪些,下面就是实战案例,一起来看一下。

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

                    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/1545496.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:00:46
下一篇 2025年12月21日 17:01:01

相关推荐

  • 怎样做出HTML文本框只读效果

    这次给大家带来怎样做出html文本框只读效果,做出html文本框只读效果的注意事项有哪些,下面就是实战案例,一起来看一下。 相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章! 相关阅读: H5里图片中有缝隙应该如何解决 HTML5单页面手势滑屏切换如何实现 立即学习“前端免费学习笔…

    好文分享 2025年12月21日
    000
  • HTML实现海康摄像头实时监控功能_HTML/Xhtml_网页制作

    最近公司安排我做一个ccfa的小东东,其中有一项需求就是做一个网页播放摄像头的实时监控功能,对于我这个小菜鸟来说真是难到了,下面小编给大家带来了html实现海康摄像头实时监控功能,对html感兴趣的朋友一起看看吧 最近公司安排做CCFA的一些东西,有一项就是做一个网页播放摄像头的实时监控。网上百度了…

    2025年12月21日 好文分享
    000
  • HTML页面自动清理js、css文件的缓存(自动添加版本号)_HTML/Xhtml_网页制作

    这篇文章主要介绍了html页面自动清理js、css文件的缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家html源码,也给大家做个参考。对html感兴趣的小伙伴们一起跟随小编过来看看吧  在web项目开发过程中,我们经常会引用css、js文件,更新文件后常出现缓存问题(明明更改了代码,在浏览…

    好文分享 2025年12月21日
    000
  • 关于HTML基本语法和语义写法规则与实例分析

    本文主要和大家分享对html基本语法和语义进行了整理与实例,需要的朋友可以参考下,希望能帮助到大家。 DOCTYPE DOCTYPE(Document Type) 该声明位于文档中最前面的位置,处于html标签之前,此标签告知浏览器文档使用哪种HTML或者 XHTML规范。 DTD(Document…

    好文分享 2025年12月21日
    000
  • HTML标签中行内元素和块级元素详解

    本文主要和大家详细介绍了html常用的标签中行内元素和块级元素,需要的朋友参考下吧,希望能帮助到大家。 块元素(block element) HTML标签分类明细      * address – 地址     * blockquote – 块引用     * center …

    好文分享 2025年12月21日
    000
  • HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解

    winform结合html5能实现什么功能?突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下html阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧,希望能帮助到大家。 就想弄一个winform结合html5的一个小东西,突有兴致,想在里面嵌套一个微…

    2025年12月21日 好文分享
    000
  • html中form与表单提交操作的方法总结

    本文主要介绍了html中form元素与表单提交方面的知识,需要的朋友可以参考一下,希望能帮助到大家。 form元素 form元素的DOM接口是HTMLFormElement,继承自HTMLElement,因而它与其他的HTML元素拥有相同的默认属性,不过它自身还有几个独有的属性和方法: 属性值 说明…

    2025年12月21日
    000
  • 如何实现HTML中鼠标经停时整行(tr)变色

    本文主要介绍了html中实现鼠标经停时整行(tr)变色的相关资料,需要的朋友可以参考下,希望能帮助到大家。 使用纯CSS实现在鼠标经过一个表格的某一行的时候,要整行的背景颜色发生变化,以表明该行正中焦点: change tr.change:hover { background-color:#00FF…

    好文分享 2025年12月21日
    000
  • html实现在消息按钮上增加数量角标的实现代码

    我们知道微信或者qq在有未读消息的时候,就会有红色的数量提示,本文主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下,希望能帮助到大家。 html代码: 消息4 css代码: /*角标 */ .ii{ display: none; background: #f00; bord…

    2025年12月21日
    000
  • 关于html页面跳转传递参数问题解答

    本文主要介绍了html页面跳转传递参数问题的相关资料,需要的朋友可以参考下,希望能帮助到大家。 效果如下: a页面 点击跳转按钮后 在b页面可以获取到对应的值。 代码如下: 立即学习“前端免费学习笔记(深入)”; a页面:  a页面 $(function(){ name = $(“#name”).t…

    2025年12月21日
    000
  • 结合css用Html 实现动态显示颜色块的报表效果

    本文将结合css来通过实例代码讲解,如何使用html的颜色块动态展示数据功能,非常不错,代码简单易懂,需要的朋友参考下,希望能帮助到大家。 利用html的颜色块动态展示数据 *{ padding: 0; margin: 0; } .tubiao,.jihua,.shiji,.riqi{ width:…

    好文分享 2025年12月21日
    000
  • HTML中 table鼠标拖拽排序功能的实现

     table是html里不可缺少的一项属性,很多地方我们都要用到,本文主要介绍了html table鼠标拖拽排序功能的相关资料,需要的朋友可以参考下,希望可以帮助到大家。 效果图: 1.引入文件 2.给元素附上sortable类 立即学习“前端免费学习笔记(深入)”; 3.开启并配置 $(funct…

    2025年12月21日
    000
  • 关于HTML用正则表达式检验表格方法

    本文主要介绍了html用正则表达式检验表格的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下,希望对大家有帮助。 正则表达式在JavaScript脚本中是很好用的检验语法规则的方法。但是与Java中的正则表达式有所不同。它需要在regex规则上以“^”开始,以”$”结束。以下让我…

    好文分享 2025年12月21日
    000
  • HTML多图上传预览功能的实现

    最近平凡用到网页多图上传预览的功能,感觉挺不错的,今天小编抽空给大家分享下基于html实现多图上传预览功能,希望能帮助到大家。 自己最近写了一个网页多图上传的脚本,感觉挺实用的,细节就不要说了,直接贴代码了~ .pro_img{ margin-left:10px;margin-top:10px;wi…

    好文分享 2025年12月21日
    000
  • 浅谈HTML空链接的作用

    空链接: 就是没有目标端点的链接。本文就为大家带来一篇浅谈HTML空链接的作用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 格式显示内容 空连接的作用 1.设为首页 立即学习“前端免费学习笔记(深入)”; onclick=”this.…

    好文分享 2025年12月21日
    000
  • 总结类html标题,段落,换行,水平线,特殊字符

    本文是关于html比较基础的知识,我们就和大家分享html标题,段落,换行,水平线,特殊字符相关知识。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。希望能帮助到大家。 标题 XML/HTML Code复制内容到剪贴板 一级标题 二级标题 立即学习“前端免费学习笔记(深入)”; 对齐方式有le…

    2025年12月21日
    000
  • 实例介绍HTML文本格式化的知识

    本文就为大家带来一篇html文本格式化的简单实例(详解)。希望大家学完能掌握html 文本格式化的知识,更好的去运用。 一,文本格式化:此例演示如何在一个 HTML 文件中对文本进行格式化。 This text is boldThis text is strongThis text is bigTh…

    2025年12月21日
    000
  • HTML中标签栏的几种实现方法

    html中标签的用法很多,本文为大家推荐一篇标签栏的几种实现方法,对学习标签知识很有用,希望能帮助到大家。 标签页:分类    +    描述 标签栏:分类 =>让用户明白自己在哪里,将要去哪里 一、css命名方式:   立即学习“前端免费学习笔记(深入)”; XML/HTML Code复制内…

    2025年12月21日 好文分享
    000
  • 关于script在html中的摆放位置解析

    以前一直觉得script在html中的任何位置都可以,今天做一个需求的时候才更正了自己的错误思想啊–script的位置也不是随便放的。本文主要谈论关于script在html中的摆放位置。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。希望能帮助到大家。 首先是想实现一个select…

    好文分享 2025年12月21日
    000
  • HTML里的事件怎么使用

    事件是经常由客户的操作或者是通过浏览器的功能来触发的,使用js在任意时刻也可以触发特定的事件。这次就来给大家说一下html里常用的事件思路 DOM中的事件模拟 在document对象上使用creatEvent()方法创建event对象。参数是要创建的事件类型的字符串。 DOM2:字符串都使用英文复数…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信