发布时间：2026-07-21阅读(2)
json(Javascript Object Notation) 是一种轻量级的数据交换格式。在如今的软件编程中越来越重要，不管你是开发web还是app，其数据格式是一定会使用的。
今天我们就手写一款JSON格式化工具。
主要是用html，js和css，简单几行代码就写出一个自己的json格式化工具，显示样式可以自己控制，简洁、方便、好用。而且拿出来还能装逼。
先看一下完成时的效果：
嗯，对比结束，我写的比他的好，嗯，是这样，没毛病。
废话少说，上代码：
总共三部分：html、css和js，组合在一起就能用，不过百行代码。如果你嫌麻烦，在文章底部我有一个做好了的打成压缩包分享在github了，链接已有，自己下。
结构如下
html代码：
<!DOCTYPE html>
<html >
<head>
<title>原生json格式化及高亮</title>
<meta name="description" content="json,格式化,高亮">
<meta name="keywords" content="json,格式化,高亮">
<script src="http://img.studyofnet.comc.js" type="text/javascript"></script>
<link href="s.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<div >
<div id="HeaderTitle">
<h3 id="HeaderSubTitle">JSON格式化及高亮:</h3>
<textarea id="RawJson">
</textarea>
</div>
<div id="ControlsRow">
<input type="Button" value="格式化" onclick="Process()"/>
<span id="TabSizeHolder">
缩进量
<select id="TabSize" onchange="TabSizeChanged()">
<option value="1">1</option>
<option value="2" selected="true">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</span>
<label for="QuoteKeys">
<input type="checkbox" id="QuoteKeys" onclick="QuoteKeysClicked()" checked="true" />
引号
</label>
<a href="javascript:void(0);" onclick="SelectAllClicked()">全选</a>
<span id="CollapsibleViewHolder" >
<label for="CollapsibleView">
<input type="checkbox" id="CollapsibleView" onclick="CollapsibleViewClicked()" checked="true" />
显示控制
</label>
</span>
<span id="CollapsibleViewDetail">
<a href="javascript:void(0);" onclick="ExpandAllClicked()">展开</a>
<a href="javascript:void(0);" onclick="CollapseAllClicked()">叠起</a>
<a href="javascript:void(0);" onclick="CollapseLevel(3)">2级</a>
<a href="javascript:void(0);" onclick="CollapseLevel(4)">3级</a>
<a href="javascript:void(0);" onclick="CollapseLevel(5)">4级</a>
<a href="javascript:void(0);" onclick="CollapseLevel(6)">5级</a>
<a href="javascript:void(0);" onclick="CollapseLevel(7)">6级</a>
<a href="javascript:void(0);" onclick="CollapseLevel(8)">7级</a>
<a href="javascript:void(0);" onclick="CollapseLevel(9)">8级</a>
</span>
</div>
<div id="Canvas" ></div>
<script src="http://img.studyofnet.comhttp://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript" src="http://img.studyofnet.comm.js"></script>
</body>
</html>
css代码：
css代码是控制样式的，无操作逻辑，你可以换成你自己喜欢的风格，这里不大费篇章的介绍，简单截图带过。看源码的可以下我的分享的压缩包。
js代码：
直接上github链接，我已经上传压缩包，解压可用，源码也可以查看，自己下载看吧。
https://git.oschina.net/lovepeng/share-for-you.git
Copyright © 2024 有趣生活 All Rights Reserve吉ICP备19000289号-5 TXT地图HTML地图XML地图
