HTML 轉 JSX
免費線上 HTML 轉 JSX 工具。貼上 HTML 即可得到規範的 React JSX：className、htmlFor、駝峰 style 物件、自閉合標籤與安全的註解轉義，全程在瀏覽器本地完成。
HTML 轉 JSX 工具是做什麼的？
它把一般 HTML 標記轉換成 React 能渲染的 JSX。把 HTML 貼到左側輸入區，右側會即時（300ms 防抖）顯示對應的 JSX 程式碼。
哪些屬性會被改名？
class 改為 className、for 改為 htmlFor、tabindex 改為 tabIndex，maxlength、colspan、stroke-width 等連字號屬性也會轉成駝峰式的 React 寫法；data-* 和 aria-* 屬性保持原樣。
style 屬性是怎麼轉換的？
形如 style="background-color: red; font-size: 12px" 的 CSS 字串會被轉換成 JavaScript 物件：style={{backgroundColor:'red', fontSize:'12px'}}，所有 CSS 屬性名轉成駝峰，值以字串引號包裹。
空元素（void 元素）如何處理？
img、br、input、hr、meta、link 等不能有子元素的標籤會規範化為自閉合寫法，<img> 變成 <img />，這正是 JSX 的要求；空的 div、span 同樣輸出為自閉合形式。
HTML 註解怎麼處理？
註解會被轉換成 JSX 註解：<!-- note --> 變成 {/* note */}。會提前終止註解的字元序列會被中性化處理，保證產生的程式碼始終可以編譯。
實體和特殊字元如何處理？
&、© 等實體會先解碼為真實字元，再把花括號、角括號等 JSX 保留符號重新轉義，因此包含 { } 或 < 的文字不會破壞元件結構，渲染結果正確。
函式元件包裹選項有什麼用？
開啟後，轉換結果會被包成可直接使用的模板：function Component() { return ( ...你的 JSX... ) }，而不是裸的 JSX，方便直接貼進 React 檔案。
我的 HTML 會被上傳嗎？
不會。解析完全在瀏覽器內用內建 DOMParser 完成，不向任何伺服器傳送資料，轉換私有或未發布的標記也安全，並且離線可用。
如何使用HTML 轉 JSX
在瀏覽器中直接把一般 HTML 轉換成可直接使用的 React JSX。解析完全透過瀏覽器內建 DOMParser 在本機完成，你的標記不會被上傳。
- 把 HTML 貼到左側編輯器，右側會顯示 JSX 結果，並隨輸入即時更新（300ms 防抖）。
- 在「縮排」中選擇縮排寬度——每層 2 或 4 個空格。
- 開啟「函式元件包裹」開關，把輸出包成 function Component() { return ( ... ) }，可直接貼進 React 檔案。
- 用「複製」取走結果，「範例」載入示範，「清空」重新開始。
class、for、tabindex 會變成 className、htmlFor、tabIndex，style 字串變成駝峰物件，img、br 等空元素輸出為自我閉合標籤——正是 JSX 所要求的寫法。
相關工具
- HTML格式化工具 即時格式化和美化HTML程式碼。將壓縮的HTML轉換為整潔、可讀、縮排良好的程式碼。免費線上工具，無需註冊。
- 程式碼轉圖片 將程式碼片段轉換為精美的可分享圖片，支援語法高亮、自訂主題和視窗裝飾。100%隱私保護，完全在瀏覽器本機執行。
- 檔案雜湊校驗 本地計算校驗MD5、SHA-1、SHA-256、SHA-512檔案雜湊值
- Chmod 計算器 免費線上chmod計算器，透過核取方塊視覺化Linux檔案權限並計算chmod值。即時轉換數字(755, 644)和符號(rwxr-xr-x)表示法，支援setuid、setgid、sticky bit等特殊權限。
- ASCII碼表 完整的ASCII字元編碼參考表，包含十進位、十六進位、八進位、二進位編碼、HTML實體和字元描述。支援即時搜尋和篩選。
- Hex檔案檢視器 以十六進制轉儲格式檢視檔案內容，支援搜尋、偏移導航和虛擬滾動
- MIME類型查詢 透過副檔名即時查詢MIME類型，或反向查找副檔名。免費線上工具，收錄1000+條目。
- 螢幕解析度檢測 即時偵測螢幕解析度、視窗大小、DPI、色深等顯示器資訊。