HTML中JSON数据的显示问题怎么解决
Admin 2022-07-14 群英技术资讯 554 次浏览
背景:
有时候我们需要将json数据直接显示在页面上(比如在做一个接口测试的项目,需要将接口返回的结果直接展示),但是如果直接显示字符串,不方便查看。需要格式化一下。
解决方案:
其实JSON.stringify本身就可以将JSON格式化,具体的用法是:
JSON.stringify(res, null, 2); //res是要JSON化的对象,2是spacing
如果想要效果更好看,还要加上格式化的代码和样式:
js代码:
代码如下 | 复制代码 |
function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.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 ' ' + match + '' }); } |
样式代码:
代码如下 | 复制代码 |
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了html+css+js实现导航栏滚动渐变效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
css清除浮动的原因:1、清除浮动是为了清除使用浮动元素的影响。高度塌陷的父元素。2、使用浮动后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以打开其高度,所以父级元素的height会被忽略。
这篇我们来了解CSS属性的内容,这里主要介绍字体属性、文本属性和列表属性的相关内容,下文对于这些属性都有很详细的介绍,对新手学习CSS有一定的帮助,需要的朋友可以参考了解。
网格区域(grid-area)是一个逻辑空间,主要用来放置一个或多个网格单元格。定义网格区域有两种方式,一种是通过网格线来定义,另一种是通过grid-template-areas来定义。
align-content可以看成是和justify-content是相似且对立的属性,是指垂直方向每一行flex子项的对齐和分布方式。只适用于多行的flex容器,并且当交叉轴上有多余空间使flex容器内的flex线对齐。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008