How to beautify and display json format data in html-HTML Tutorial-php.cn

How to beautify and display json format data in html

醉折花枝作酒筹

Release： 2021-04-26 11:36:53

forward

4140 people have browsed it

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

How to beautify and display json format data in html

直接上代码：

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">

Copy after login

js代码：

function showGeoJsonTxt(){
	$(&#39;#geoJsonTxt&#39;).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 != &#39;string&#39;) {
		json = JSON.stringify(json, undefined, 2);
	}
		json = json.replace(/&/g, &#39;&&#39;).replace(/</g, &#39;<&#39;).replace(/>/g, &#39;>&#39;);
		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 = &#39;number&#39;;
			 	if (/^"/.test(match)) {
			 			if (/:$/.test(match)) {
			 				cls = &#39;key&#39;;
			 			} else {
			 				cls = &#39;string&#39;;
			 			}
			 	} else if (/true|false/.test(match)) {
			 		cls = &#39;boolean&#39;;
			 	} else if (/null/.test(match)) {
			 		cls = &#39;null&#39;;
			 	}
			 	return &#39;<span class="&#39; + cls + &#39;">&#39; + match + &#39;</span>&#39;;
		 });
}

Copy after login

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>

Copy after login

效果如下：

推荐学习：html视频教程

The above is the detailed content of How to beautify and display json format data in html. For more information, please follow other related articles on the PHP Chinese website!