html中如何美化展示json格式数据

本篇文章给大家介绍 html中美化展示json格式数据的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

直接上代码：

html中主要加一个pre 的标签

<h2>GeoJsonTxt示例如下：</h2><p><h4>注意：示例中<span style="color:red">features,geometry,coordinates,properties,name,description</span>字段是必须有的，字段名称不能改变，需要扩展的字段可以在<span style="color:red">properties</span>里面自行添加</h4></p><pre id="geoJsonTxt"></pre>

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, '<').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>';});
}

CSS代码，显示的时候可以更加美化

<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视频教程

html中如何美化展示json格式数据相关推荐

Vue-json-viewer 展示JSON格式数据
最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,于是用到了vue-json-viewer这个插件. 以下是实现的效果: 插件的 ...
python中json模块_Python使用内置json模块解析json格式数据的方法
本文实例讲述了Python使用内置json模块解析json格式数据的方法.分享给大家供大家参考,具体如下: Python中解析json字符串非常简单,直接用内置的json模块就可以,不需要安装额外的模 ...
在JSP页面中输出JSON格式数据
JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库. JSON-taglib主页: http://json-taglib.sourceforge.net/index.html J ...
数据库中存储Json格式数据
在数据库中存储Json格式数据 1.表字段类型 json 2.Java代码有两种方式: 方式一 :属性定义成String类型. 往数据库中存储的值必须为JSON格式的字符串,因为数据库中会做一次校验 ...
C#中Newtonsoft.Json(Json.NET)的使用和处理json格式数据
C#关于json的一些操作 C#中Newtonsoft.Json(Json.NET)的使用添加Newtonsoft.Json.dll引用: 下载Newtonsoft.Json.dll: 在项目中添加 ...
python的json格式输出_python中json格式数据输出实现方式
python中json格式数据输出实现方式主要使用json模块,直接导入import json即可. 小例子如下: #coding=UTF-8 import json info={} info[&q ...
JS中循环遍历JSON格式数据
//res为json格式数据 if (res != null) { //循环遍历resfor (var key in res) { //遍历中key为字段名的字符串,如{"a":& ...
oracle中多层嵌套命名,一种多层嵌套的json格式数据的命名解析方法
一种多层嵌套的json格式数据的命名解析方法 [专利摘要]一种n层嵌套的json格式数据的命名解析方法,包括以下步骤:首先,以n层嵌套的json格式数据为基础建立数据源:然后,以键值对为最小单元由外而 ...
【javascript】中国省市区号JSON格式数据--2017年为准，含省市名称和电话区号
在WEB开发过程中,往往需要用到城市列表.鉴于网上都是通过访问某个数据库得到,在实际应用中往往大材小用,耗费宽带资源,增加等待时间. 最终实现如下图所示:因为数据比较大,页面展示效果不佳, 这里只放了 ...

html中如何美化展示json格式数据

html中如何美化展示json格式数据相关推荐

最新文章

热门文章