本篇文章给大家介绍 html中美化展示json格式数据的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
直接上代码：
html中主要加一个pre 的标签
GeoJsonTxt示例如下：
注意：示例中features,geometry,coordinates,properties,name,description字段是必须有的， 字段名称不能改变，需要扩展的字段可以在properties里面自行添加
js代码：
立即学习“前端免费学习笔记（深入）”；
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, '/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 + ''; });}
CSS代码，显示的时候可以更加美化
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; }
效果如下：
推荐学习：html视频教程
以上就是html中如何美化展示json格式数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1549618.html
微信扫一扫 
支付宝扫一扫 
