1<?php
2class=class="string">"keyword">header(class="string">'Content-Type: text/html; charset=utf-class="number">8');
3?>
4<!DOCTYPE html>
5<class="tag">html lang="zh-CN">
6<class="tag">head>
7<class="tag">meta charset="UTF-class="number">8">
8<class="tag">meta name="viewport" content="width=device-width, initial-scale=class="number">1.0">
9<class="tag">meta name="description" content="极客工具箱：JSON格式化、Base64编解码、正则测试，纯浏览器本地处理。">
10<class="tag">meta name="keywords" content="JSON格式化,Base64,正则测试,在线工具,开发者工具">
11<class="tag">meta property="og:title" content="极客工具箱 - η空间">
12<class="tag">meta property="og:description" content="JSON格式化 / Base64编解码 / 正则测试，开发者必备">
13<class="tag">title>极客工具箱 - η空间</class="tag">title>
14<class="tag">link rel="stylesheet" href="/tools/share.css">
15 <class="tag">link rel="stylesheet" href="/assets/pet-cat.css">
16<class="tag">style>
17* { margin: class="number">0; padding: class="number">0; box-sizing: border-box; }
18body {
19 font-family: class="string">'JetBrains Mono', class="string">'Consolas', monospace;
20 background: class=class="string">"keyword">class=class="string">"comment">#0f172a;
21 color: class=class="string">"keyword">class=class="string">"comment">#e2e8f0;
22 min-height: 100vh;
23}
24class=class="string">"keyword">header {
25 background: linear-gradient(135deg, class=class="string">"keyword">class=class="string">"comment">#1a1a2e, #16213e);
26 padding: 36px 20px;
27 text-align: center;
28 border-bottom: 1px solid class=class="string">"keyword">class=class="string">"comment">#1e293b;
29}
30class=class="string">"keyword">header h1 { font-family: sans-serif; font-size: 26px; }
31class=class="string">"keyword">header h1 span { color: class=class="string">"keyword">class=class="string">"comment">#22c55e; }
32class=class="string">"keyword">header p { font-family: sans-serif; color: class=class="string">"keyword">class=class="string">"comment">#94a3b8; font-size: 13px; margin-top: 4px; }
33.container { max-width: 860px; margin: class="number">0 auto; padding: 24px 16px; }
34
35/* Tabs */
36.tabs {
37 display: flex; gap: 4px; margin-bottom: 20px;
38 background: class=class="string">"keyword">class=class="string">"comment">#1e293b; border-radius: 12px; padding: 4px;
39}
40.tab {
41 flex: class="number">1; padding: 10px; text-align: center;
42 border-radius: 8px; cursor: pointer; font-size: 13px;
43 font-family: sans-serif; font-weight: class="number">500;
44 color: class=class="string">"keyword">class=class="string">"comment">#64748b; transition: all class="number">0.2s; border: none; background: none;
45}
46.tab.active { background: class=class="string">"keyword">class=class="string">"comment">#class="number">334155; color: #e2e8f0; }
47.tab:hover:not(.active) { color: class=class="string">"keyword">class=class="string">"comment">#94a3b8; }
48
49/* Panel */
50.panel { display: none; }
51.panel.active { display: block; }
52
53.tool-grid {
54 display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
55}
56.tool-full { grid-column: class="number">1 / -class="number">1; }
57
58label {
59 display: block; font-size: 12px; color: class=class="string">"keyword">class=class="string">"comment">#64748b;
60 font-family: sans-serif; margin-bottom: 6px;
61}
62textarea, input[type="text"] {
63 width: class="number">100%; padding: 12px 14px;
64 background: class=class="string">"keyword">class=class="string">"comment">#1e293b; border: 1px solid #class="number">334155;
65 border-radius: 10px; color: class=class="string">"keyword">class=class="string">"comment">#e2e8f0; font-size: 13px;
66 font-family: class="string">'JetBrains Mono', monospace;
67 resize: vertical; outline: none; transition: border class="number">0.2s;
68}
69textarea:focus, input[type="text"]:focus { border-color: class=class="string">"keyword">class=class="string">"comment">#22c55e; }
70textarea { min-height: 120px; }
71
72.btn {
73 padding: 8px 20px; border: none; border-radius: 8px;
74 font-size: 13px; font-weight: class="number">600; cursor: pointer;
75 font-family: sans-serif; transition: all class="number">0.2s;
76}
77.btn-primary { background: class=class="string">"keyword">class=class="string">"comment">#22c55e; color: #0f172a; }
78.btn-primary:hover { background: class=class="string">"keyword">class=class="string">"comment">#16a34a; }
79.btn-outline { background: transparent; color: class=class="string">"keyword">class=class="string">"comment">#94a3b8; border: 1px solid #class="number">334155; }
80.btn-outline:hover { border-color: class=class="string">"keyword">class=class="string">"comment">#22c55e; color: #e2e8f0; }
81.btn-group { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px class="number">0; }
82
83.output-area {
84 background: class=class="string">"keyword">class=class="string">"comment">#0f172a; border: 1px solid #1e293b;
85 border-radius: 10px; padding: 14px; margin-top: 8px;
86 min-height: 60px; font-size: 13px; line-height: class="number">1.6;
87 white-space: pre-wrap; word-class=class="string">"keyword">break: class=class="string">"keyword">break-all;
88 color: class=class="string">"keyword">class=class="string">"comment">#22c55e; max-height: 300px; overflow: auto;
89}
90.output-area.error { color: class=class="string">"keyword">class=class="string">"comment">#ef4444; }
91.hint { font-size: 11px; color: class=class="string">"keyword">class=class="string">"comment">#class="number">475569; font-family: sans-serif; margin-top: 4px; }
92
93.nav-back {
94 text-align: center; margin-top: 40px; padding-bottom: 40px;
95}
96.nav-back a { color: class=class="string">"keyword">class=class="string">"comment">#22c55e; text-decoration: none; font-size: 14px; font-family: sans-serif; }
97.nav-back a:hover { text-decoration: underline; }
98
99@media (max-width: 640px) {
100 .tool-grid { grid-template-columns: 1fr; }
101 .tabs { flex-wrap: wrap; }
102 .tab { flex: none; width: class="number">100%; }
103}
104</class="tag">style>
105</class="tag">head>
106<class="tag">body>
107
108<class=class="string">"keyword">header>
109 <class="tag">h1>🧰 <class="tag">span>极客工具箱</class="tag">span></class="tag">h1>
110 <class="tag">p>JSON · Base64 · 正则 · 纯本地处理</class="tag">p>
111</class=class="string">"keyword">header>
112
113<class="tag">div class=class="string">"keyword">class="container">
114
115 <class="tag">div class=class="string">"keyword">class="tabs">
116 <class="tag">button class=class="string">"keyword">class="tab active" onclick="switchTab(class="number">0)">📋 JSON 格式化</class="tag">button>
117 <class="tag">button class=class="string">"keyword">class="tab" onclick="switchTab(class="number">1)">🔐 Base64 编解码</class="tag">button>
118 <class="tag">button class=class="string">"keyword">class="tab" onclick="switchTab(class="number">2)">🔍 正则测试</class="tag">button>
119 </class="tag">div>
120
121 <!-- JSON -->
122 <class="tag">div class=class="string">"keyword">class="panel active" id="panel0">
123 <class="tag">div class=class="string">"keyword">class="tool-grid">
124 <class="tag">div class=class="string">"keyword">class="tool-full">
125 <class="tag">label>输入 JSON</class="tag">label>
126 <class="tag">textarea id="jsonInput" placeholder=class="string">'{"name":"η空间","tools":["JSON","Base64","Regex"]}' rows="class="number">6"></class="tag">textarea>
127 </class="tag">div>
128 <class="tag">div>
129 <class="tag">button class=class="string">"keyword">class="btn btn-primary" onclick="formatJSON()">✨ 格式化</class="tag">button>
130 <class="tag">button class=class="string">"keyword">class="btn btn-outline" onclick="compressJSON()">📦 压缩</class="tag">button>
131 <class="tag">button class=class="string">"keyword">class="btn btn-outline" onclick="validateJSON()">✅ 验证</class="tag">button>
132 </class="tag">div>
133 <class="tag">div style="text-align:right">
134 <class="tag">button class=class="string">"keyword">class="btn btn-outline" onclick="document.class="func">getElementById(class="string">'jsonOutput').textContent=class="string">'';document.class="func">getElementById(class="string">'jsonInput').value=class="string">''">🗑️ 清空</class="tag">button>
135 </class="tag">div>
136 <class="tag">div class=class="string">"keyword">class="tool-full">
137 <class="tag">label>输出</class="tag">label>
138 <class="tag">div class=class="string">"keyword">class="output-area" id="jsonOutput">等待操作...</class="tag">div>
139 </class="tag">div>
140 </class="tag">div>
141 </class="tag">div>
142
143 <!-- Base64 -->
144 <class="tag">div class=class="string">"keyword">class="panel" id="panel1">
145 <class="tag">div class=class="string">"keyword">class="tool-grid">
146 <class="tag">div class=class="string">"keyword">class="tool-full">
147 <class="tag">label>输入文本</class="tag">label>
148 <class="tag">textarea id="b64Input" placeholder="输入要编码或解码的文字..." rows="class="number">4"></class="tag">textarea>
149 </class="tag">div>
150 <class="tag">div>
151 <class="tag">button class=class="string">"keyword">class="btn btn-primary" onclick="b64Encode()">🔒 编码</class="tag">button>
152 <class="tag">button class=class="string">"keyword">class="btn btn-outline" onclick="b64Decode()">🔓 解码</class="tag">button>
153 </class="tag">div>
154 <class="tag">div style="text-align:right">
155 <class="tag">button class=class="string">"keyword">class="btn btn-outline" onclick="document.class="func">getElementById(class="string">'b64Output').textContent=class="string">'';document.class="func">getElementById(class="string">'b64Input').value=class="string">''">🗑️ 清空</class="tag">button>
156 </class="tag">div>
157 <class="tag">div class=class="string">"keyword">class="tool-full">
158 <class="tag">label>输出</class="tag">label>
159 <class="tag">div class=class="string">"keyword">class="output-area" id="b64Output">等待操作...</class="tag">div>
160 </class="tag">div>
161 </class="tag">div>
162 </class="tag">div>
163
164 <!-- Regex -->
165 <class="tag">div class=class="string">"keyword">class="panel" id="panel2">
166 <class="tag">div class=class="string">"keyword">class="tool-grid">
167 <class="tag">div class=class="string">"keyword">class="tool-full">
168 <class="tag">label>测试文本</class="tag">label>
169 <class="tag">textarea id="regexText" placeholder="输入要搜索的文本..." rows="class="number">4"></class="tag">textarea>
170 </class="tag">div>
171 <class="tag">div class=class="string">"keyword">class="tool-full">
172 <class="tag">label>正则表达式</class="tag">label>
173 <class="tag">input type="text" id="regexPattern" placeholder="例如: \d+\.\d+\.\d+\.\d+">
174 </class="tag">div>
175 <class="tag">div>
176 <class="tag">label style="display:inline-flex;align-items:center;gap:6px;cursor:pointer;">
177 <class="tag">input type="checkbox" id="regexGlobal" checked> 全局
178 </class="tag">label>
179 <class="tag">label style="display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin-left:12px;">
180 <class="tag">input type="checkbox" id="regexIgnore"> 忽略大小写
181 </class="tag">label>
182 </class="tag">div>
183 <class="tag">div style="text-align:right">
184 <class="tag">button class=class="string">"keyword">class="btn btn-primary" onclick="testRegex()">🔍 测试</class="tag">button>
185 <class="tag">button class=class="string">"keyword">class="btn btn-outline" onclick="document.class="func">getElementById(class="string">'regexOutput').textContent=class="string">'';document.class="func">getElementById(class="string">'regexText').value=class="string">'';document.class="func">getElementById(class="string">'regexPattern').value=class="string">''">🗑️ 清空</class="tag">button>
186 </class="tag">div>
187 <class="tag">div class=class="string">"keyword">class="tool-full">
188 <class="tag">label>匹配结果</class="tag">label>
189 <class="tag">div class=class="string">"keyword">class="output-area" id="regexOutput">等待操作...</class="tag">div>
190 </class="tag">div>
191 </class="tag">div>
192 </class="tag">div>
193
194 <class="tag">div class=class="string">"keyword">class="nav-back">
195 <class="tag">a href="/tools/">← 返回瞎捣鼓列表</class="tag">a>
196 <class="tag">span style="margin:class="number">0 8px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">334155;">|</class="tag">span>
197 <class="tag">a href="/">← 返回首页</class="tag">a>
198 </class="tag">div>
199</class="tag">div>
200
201<class="tag">script src="/tools/share.js"></class="tag">script>
202<class="tag">script>
203class=class="string">"keyword">function switchTab(i) {
204 document.querySelectorAll(class="string">'.tab').forEach((t, idx) => t.classList.toggle(class="string">'active', idx === i));
205 document.querySelectorAll(class="string">'.panel').forEach((p, idx) => p.classList.toggle(class="string">'active', idx === i));
206}
207
208class=class="string">"keyword">class=class="string">"comment">// JSON
209class=class="string">"keyword">function formatJSON() {
210 class=class="string">"keyword">const out = document.class="func">getElementById(class="string">'jsonOutput');
211 try {
212 class=class="string">"keyword">const obj = JSON.parse(document.class="func">getElementById(class="string">'jsonInput').value);
213 out.textContent = JSON.stringify(obj, null, class="number">2);
214 out.className = class="string">'output-area';
215 } class="func">catch(e) {
216 out.textContent = class="string">'❌ JSON 格式错误: ' + e.message;
217 out.className = class="string">'output-area error';
218 }
219}
220class=class="string">"keyword">function compressJSON() {
221 class=class="string">"keyword">const out = document.class="func">getElementById(class="string">'jsonOutput');
222 try {
223 class=class="string">"keyword">const obj = JSON.parse(document.class="func">getElementById(class="string">'jsonInput').value);
224 out.textContent = JSON.stringify(obj);
225 out.className = class="string">'output-area';
226 } class="func">catch(e) {
227 out.textContent = class="string">'❌ JSON 格式错误: ' + e.message;
228 out.className = class="string">'output-area error';
229 }
230}
231class=class="string">"keyword">function validateJSON() {
232 class=class="string">"keyword">const out = document.class="func">getElementById(class="string">'jsonOutput');
233 try {
234 JSON.parse(document.class="func">getElementById(class="string">'jsonInput').value);
235 out.textContent = class="string">'✅ 有效的 JSON！';
236 out.className = class="string">'output-area';
237 } class="func">catch(e) {
238 out.textContent = class="string">'❌ ' + e.message;
239 out.className = class="string">'output-area error';
240 }
241}
242
243class=class="string">"keyword">class=class="string">"comment">// Base64
244class=class="string">"keyword">function b64Encode() {
245 class=class="string">"keyword">const out = document.class="func">getElementById(class="string">'b64Output');
246 try {
247 out.textContent = btoa(unescape(encodeURIComponent(document.class="func">getElementById(class="string">'b64Input').value)));
248 out.className = class="string">'output-area';
249 } class="func">catch(e) {
250 out.textContent = class="string">'❌ 编码失败: ' + e.message;
251 out.className = class="string">'output-area error';
252 }
253}
254class=class="string">"keyword">function b64Decode() {
255 class=class="string">"keyword">const out = document.class="func">getElementById(class="string">'b64Output');
256 try {
257 out.textContent = decodeURIComponent(escape(atob(document.class="func">getElementById(class="string">'b64Input').value.trim())));
258 out.className = class="string">'output-area';
259 } class="func">catch(e) {
260 out.textContent = class="string">'❌ 解码失败：输入不是有效的 Base64';
261 out.className = class="string">'output-area error';
262 }
263}
264
265class=class="string">"keyword">class=class="string">"comment">// Regex
266class=class="string">"keyword">function testRegex() {
267 class=class="string">"keyword">const out = document.class="func">getElementById(class="string">'regexOutput');
268 class=class="string">"keyword">const text = document.class="func">getElementById(class="string">'regexText').value;
269 class=class="string">"keyword">const pattern = document.class="func">getElementById(class="string">'regexPattern').value;
270 class=class="string">"keyword">if (!pattern) { out.textContent = class="string">'请输入正则表达式'; out.className = class="string">'output-area'; class=class="string">"keyword">return; }
271 class=class="string">"keyword">if (!text) { out.textContent = class="string">'请输入测试文本'; out.className = class="string">'output-area'; class=class="string">"keyword">return; }
272 try {
273 class=class="string">"keyword">let flags = class="string">'g';
274 class=class="string">"keyword">if (document.class="func">getElementById(class="string">'regexIgnore').checked) flags += class="string">'i';
275 class=class="string">"keyword">const re = class=class="string">"keyword">new RegExp(pattern, flags);
276 class=class="string">"keyword">const matches = text.match(re);
277 class=class="string">"keyword">if (!matches || matches.length === class="number">0) {
278 out.textContent = class="string">'🔍 未找到匹配';
279 out.className = class="string">'output-area';
280 } class=class="string">"keyword">else {
281 out.textContent = class="string">'✅ 找到 ' + matches.length + class="string">' 个匹配：\n\n' + matches.join(class="string">'\n');
282 out.className = class="string">'output-area';
283 }
284 } class="func">catch(e) {
285 out.textContent = class="string">'❌ 正则错误: ' + e.message;
286 out.className = class="string">'output-area error';
287 }
288}
289</class="tag">script>
290<class="tag">script src="/assets/pet-cat.js"></class="tag">script>
291</class="tag">body>
292</class="tag">html>
293
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 72
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 73
极客工具箱 - η空间
🧰 极客工具箱
JSON · Base64 · 正则 · 纯本地处理
等待操作...
等待操作...
等待操作...