const 文字輔助 = () => {

對 HTML 特殊字元做轉義或還原。
零網路請求，原始資料不離開瀏覽器。

文字輔助 · DevBox 本地工具箱

點擊或拖入圖片（本地處理，不上傳）

點擊或拖入圖片

品質最長邊格式

就緒體積: 0 B 耗時: 0 ms

UTF-8 縮排: 4空格 JSON

選工具

在下方工具庫點分類，再點卡片。工作區標題會立刻切換到對應能力。

貼上內容

把 JSON、程式碼或密文黏到左側。多數工具會在輸入後自動出結果，無需點「執行」。

看結果

右側是處理結果。 JSON 格式化可視化「樹狀 / 視覺化」。對比類工具會高亮增刪改。

複製或分享

複製結果、下載文件，或點選「分享」產生 Hash 連結。資料只寫在瀏覽器網址欄，不上報伺服器。

工具庫選單

依分類選擇模組，下方卡片和範例場景會一起切換

範例與場景

當前 ·JSON 核心

點「填入」會切工具並寫入範例，可直接看結果。

JSON 格式化

介面回應美化

壓縮 JSON 展開縮排，可切樹狀視圖

{
  "status": "success",
  "code": 200,
  "data": { "user": { "id": 1001, "name": "Ada" }, "list": [1, 2, 3] }
}

JSON 文法校驗

找出多餘逗號

會標出錯行，而不是籠統的 Unexpected token

{
  "ok": true,
  "msg": "多余逗号会报错",
}

JSON5 解析

JSON5 → 標準 JSON

註、單引號、尾逗號會轉成可 parse 的 JSON

{
  // 配置注释
  env: 'dev',
  retries: 3,
  hosts: ['a.local', 'b.local',],
}

JSONPath 查詢

抽出 price > 20 的書名

表達式$.store.book[?(@.price>20)].title→ 三體、演算法

{
  "store": {
    "book": [
      { "title": "三体", "price": 48 },
      { "title": "JSON 手册", "price": 12 },
      { "title": "算法", "price": 88 }
    ]
  }
}

JSON 對比 Diff

兩份部署配置

replicas 變更，debug 刪除，region 新增

A 舊

{"env":"prod","replicas":2,"debug":false}

B 新

{"env":"prod","replicas":4,"region":"cn-east"}

JSON Key 排序

按字母排 key

嵌套物件也會重排，方便再 diff

{
  "z": 1,
  "m": 2,
  "a": { "c": 3, "b": 2 }
}

JSON ↔ YAML

JSON → YAML

方向已選 JSON → YAML，給 K8s 草稿用

{
  "service": "api",
  "replicas": 2,
  "ports": [80, 443]
}

產生實體程式碼

JSON → TypeScript

語言已選取 TypeScript，巢狀會拆成多層 type

{
  "id": 1,
  "name": "Ada",
  "tags": ["dev"],
  "profile": { "city": "Shanghai", "vip": true }
}

JSON ↔ XML

JSON → XML

方向已選取 JSON → XML，根節點會包覆一層 root

{
  "user": { "name": "Ada", "age": 18, "tags": ["dev", "ops"] }
}

JSON ↔ CSV

JSON → CSV

方向已選 JSON → CSV，首行作錶頭

[
  { "id": 1, "name": "Ada" },
  { "id": 2, "name": "Bob" }
]

JSON → SQL INSERT

JSON → INSERT

表名已選 users

[
  { "id": 1, "name": "Ada" },
  { "id": 2, "name": "Bob" }
]

駝峰 / 底線

snake_case → camelCase

目標已選 camelCase，嵌套 key 一起改

{
  "user_id": 1,
  "nick_name": "Ada",
  "profile_info": { "city_name": "SH" }
}

程式碼美化 / 壓縮

JS 美化

類型已選 JS 美化

function hello(name){if(!name)return;console.log('hi '+name)}

程式碼美化 / 壓縮

SQL 美化

類型已選 SQL 美化

select u.id, u.name
from users u
join orders o on u.id = o.user_id
where o.amount > 100
order by o.created_at desc;

程式碼美化 / 壓縮

CSS 美化

類型已選 CSS 美化

.box{display:flex;align-items:center;background:#2563eb;padding:8px 16px}

Base64 編碼

中文 → Base64

解碼請改用「Base64 解碼」

DevBox 本地工具箱

URL 編碼

查詢參數編碼

中文和空格會變成 %XX

https://api.example.com/search?keyword=格式化 JSON

哈希

SHA-256

演算法已選 SHA-256，同一輸入摘要不變

hello-devbox

時間戳

Unix → 本機時間

10 位元按秒，13 位元按毫秒

1710000000

Unicode 中文互轉

漢字 → \u

方向已選漢字 → \u

你好，DevBox

JWT

解析 Token

貼 Token 後點解析。不要用生產密鑰

header.payload.signature

HTML 轉義 / 反轉義

HTML 轉義

方向已選轉義，避免標籤被當成 DOM

<div class="box">A & B</div>

字串處理

按行去重

操作已選按行去重，保留首次出現

Ada
Bob
Ada
Cara

正規測試

抽出數字

表達式\d+，flags 已選 g

order-1001 paid 88
order-1002 paid 12

字串處理

字數統計

操作已選取字元 / 行統計

Hello JSONNote
JSON 工具箱

簡易 JS 運行

跑一小段 JS

沙箱 iframe，不要貼上不可信代碼

const sum = (a, b) => a + b;
sum(1, 2);

QR 圖碼

文字 → 二維碼

填入後點「產生二維碼」

https://jsonnote.com

CSS 漸層生成

調 CSS 漸變

改起點 / 終點 / 角度，複製 background

linear-gradient(135deg, #2563eb, #a855f7)

圖片壓縮

本地壓圖

拖入即可，不上傳。可調品質和最長邊

JPG / PNG / WebP

使用說明

按模組了解何時用哪把工具。點「檢視工具」會跳到對應分類，再用上面的範例一鍵填入工作區。

JSON 核心

介面調試、日誌排查、設定對比時最常用。建議先格式化看結構，語法有問題時用校驗定位行號。

貼上壓縮成一行的響應體，選“JSON 格式化”，右側即展開；樹狀視圖可直接改鍵值。需要從位址載入時，確認後點「拉取」（會發起網路請求）。
報Unexpected token時改用「文法校驗」，會標出多餘逗號、缺括號的行。
附註解或尾逗號的配置用「JSON5 解析”，會輸出標準 JSON。
要比兩份配置：開「JSON 對比 Diff」；要合成一份用「JSON 合併」。
只取部分欄位：開「JSONPath」。推斷或校驗契約用「JSON Schema」。

縮排空格在右上角「設定」裡改，格式化和 Key 排序都會跟著變。

檢視工具

多格式互轉與實體

和維運配置、後端模型對接時，不必來回找線上轉換站。

JSON ↔ YAML / TOML / XML / CSV：先選方向，再貼上來源文字。
XML 需是可解析的文檔；根節點在 JSON→XML 時會包一層root。
「產生實體程式碼」可切割 Java、Go、Python、TypeScript、C#、PHP、Kotlin、Swift、Rust、GraphQL 等。
JSON → SQL INSERT、curl / Postman 互轉、駝峰底線改 key 都在互轉分類。

轉換失敗時看右側報錯；先格式化確認 JSON 合法再互轉，成功率更高。

檢視工具

程式碼美化與文字 Diff

貼一段擠在一行的 JS / SQL，或對比兩份日誌、設定草稿。

「程式設計美化 / 壓縮」先選型別（JS 美化、SQL 美化等），結果出現在右側。
壓縮選項會去除註解和多餘空白，適合體積對比，不適合當生產建構器用。
「文本 Diff」左右兩欄任意文本，依行高亮差異，不要求是 JSON。

美化類型在工作區右上角切換。

檢視工具

編碼、哈希、JWT、RSA

全部在瀏覽器內計算。金鑰、Token、明文不要用於生產，也不要貼真實隱私。

Base64 / URL：編碼和解碼是兩個工具，注意不要貼反。
哈希：文字或本機檔案；HMAC 需在右側填寫密鑰。完整性優先 SHA-256 / SHA-512。
JWT：解析會給出 unix / ISO / 本地時間；產生與校驗可選 HS256 或 RS256。
AES-GCM：口令派生金鑰，密文為 JSON。 RSA 仍先「產生金鑰」再加解密。
時間戳記：純數字按秒或毫秒自動判斷；也可用「目前時間」一鍵打出本地與 ISO。

金鑰只在本機處理，不要貼上生產環境資料。

檢視工具

文字輔助

轉義、去重、正規和字數統計，適合處理名單、日誌片段和要插進頁面的文字。

HTML 轉義：把<div>變成可安全插入頁面的實體字符，或反向還原。
字串處理：去空格、換行、大小寫、去重、去空白行、字元統計。
正規測試：表達式欄位填正則，flags 在選項裡選，匹配會高亮。

同一工具換選項就能做去空格、大小寫、拆數組。

檢視工具

其它小工具

圖片、二維碼、漸層和短 JS 都在本機處理，不經過伺服器。

簡易 JS 運行：在沙箱 iframe 執行短腳本，不要貼上不可信代碼。
圖片壓縮 / 格式轉換 / Exif：本機 Canvas 或解析，不上傳。
二維碼：輸入文字生成，或拖入圖片辨識。
CSS 漸層：調起點、終點、角度，複製生成的background聲明。

圖片和二維碼都在瀏覽器完成，檔案不會上傳。

檢視工具

產品說明文檔

01.資料安全與本地運算

JSON 處理、編解碼、哈希、JWT、RSA 等均在瀏覽器內完成。原始文字不會提交到後端。金鑰與隱私資料仍不建議貼到任何線上頁面。

02.即時回饋與分享

輸入防手震後即時出結果。分享連結使用#tool=&data=Hash 傳參，適配腳本喚起，避免服務端存你的內容。

03.工作區按鈕說明

全螢幕：隱藏頂欄和工具庫，只留編輯器。
分享：把目前工具和輸入編碼進地址 Hash，把完整 URL 發給同事即可復現。
下載：把右側結果存成文件。
清空 / 複製結果：清空輸入或寫入剪貼簿。

04.常見問題

為什麼貼後沒有輸出？

RSA、JWT、圖片、漸層、JS 運行器需要點面板上的按鈕。其餘工具在輸入停頓約 120ms 後自動處理。
JSON 明明能看懂，卻提示非法？

標準 JSON 不允許註解、單引號、尾逗號。這類文字請用 JSON5 解析，或先刪掉註解再格式化。
分享連結特別長？

資料寫在 Hash 裡，體積受瀏覽器 URL 長度限制。大檔案請本機貼上，不要依賴分享連結。
深色主題下次打開沒了？

主題、縮排、字號存在本機 localStorage，換瀏覽器或清除網站資料後需重新設定。

0 ms

無網路傳輸延遲

100%

純客戶端運行

40+

本地工具模組

選工具

貼上內容

看結果

複製或分享

工具庫選單

範例與場景

使用說明

JSON 核心

多格式互轉與實體

程式碼美化與文字 Diff

編碼、哈希、JWT、RSA

文字輔助

其它小工具

產品說明文檔

01.資料安全與本地運算

02.即時回饋與分享

03.工作區按鈕說明

04.常見問題

編輯器設定