跳至正文

字串轉義/反轉義

用於各種格式字串特殊字元轉義和反轉義的工具。資料處理、API開發和前端工作必備!

Examples:

支援的格式​

📝 JSON​

轉義JSON格式的特殊字元。

轉義:

  • 換行 → \n
  • 定位字元 → \t
  • 引號 → \"
  • 反斜線 → \\

使用場景:

  • API請求/回應
  • 設定檔
  • 資料儲存

🌐 HTML​

轉義HTML特殊字元以防止XSS攻擊。

轉義:

  • < → &lt;
  • > → &gt;
  • & → &amp;
  • " → &quot;
  • ' → &#39;

使用場景:

  • 使用者輸入顯示
  • XSS防護
  • HTML生成

🔗 URL​

編碼特殊字元以確保URL安全傳輸。

轉義:

  • 空格 → %20
  • 中文/特殊字元 → 百分號編碼
  • 保留字元 → 編碼

使用場景:

  • 查詢參數
  • URL生成
  • API端點呼叫

💻 JavaScript​

轉義JavaScript字串的特殊字元。

轉義:

  • 換行 → \n
  • 引號 → \' 或 \"
  • 反斜線 → \\
  • Unicode → \uXXXX

使用場景:

  • 動態指令碼生成
  • 範本字面值處理
  • 程式碼生成

📄 XML​

轉義XML/HTML格式的特殊字元。

轉義:

  • < → &lt;
  • > → &gt;
  • & → &amp;
  • " → &quot;
  • ' → &apos;

使用場景:

  • XML文件生成
  • SOAP API
  • RSS/Atom訂閱源

實際範例​

顯示使用者輸入​

// 防止XSS
const userInput = '<script>alert("XSS")</script>';
const escaped = escapeHTML(userInput);
// 結果: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;
document.getElementById('output').textContent = escaped;

API請求​

// JSON轉義
const data = {
  message: '你好\n世界\t!'
};
const jsonString = JSON.stringify(data);
// 結果: {"message":"你好\\n世界\\t!"}

URL查詢參數​

// URL編碼
const searchQuery = '搜尋測試';
const encodedQuery = encodeURIComponent(searchQuery);
// 結果: %E6%90%9C%E5%B0%8B%E6%B8%AC%E8%A9%A6
const url = `https://api.example.com/search?q=${encodedQuery}`;

動態程式碼生成​

// JavaScript轉義
const userMessage = "It's a \"great\" day!";
const code = `console.log('${userMessage.replace(/'/g, "\\'")}');`;
// 結果: console.log('It\'s a \"great\" day!');

使用提示​

1. 格式選擇​

  • JSON: 用於API通訊或資料儲存
  • HTML: 用於在網頁上顯示內容
  • URL: 用於查詢參數或路徑段
  • JavaScript: 用於動態生成程式碼
  • XML: 用於XML文件或RSS訂閱源

2. 何時需要轉義​

  • ✅ 使用者輸入顯示
  • ✅ API資料傳輸
  • ✅ 資料庫查詢生成
  • ✅ URL參數傳遞
  • ✅ 動態程式碼生成

3. 何時需要反轉義​

  • ✅ 處理接收的API資料
  • ✅ 解析查詢參數
  • ✅ 恢復儲存的資料
  • ✅ 處理URL編碼的資料

安全注意事項​

防止XSS​

顯示使用者輸入時始終轉義:

// ❌ 危險
element.innerHTML = userInput;

// ✅ 安全
element.textContent = userInput;
// 或
element.innerHTML = escapeHTML(userInput);

防止SQL注入​

使用參數化查詢而不是轉義:

// ❌ 危險
const query = `SELECT * FROM users WHERE name = '${userInput}'`;

// ✅ 安全
const query = 'SELECT * FROM users WHERE name = ?';
db.execute(query, [userInput]);

注意事項​

  • 不同格式需要不同的轉義方法
  • 轉義 ≠ 編碼（不同的概念）
  • 伺服器端驗證也是必需的
  • 小心雙重轉義/反轉義
  • 使用各語言的內建函式

相關工具​