Hex (十六進位) 字串與 Byte 陣列轉換 - daniel-qa/Vue GitHub Wiki

  • 將 HEX 16 進制字串，轉成文字

中間要先轉為 Byte，因為 Hex 字串無法直接轉文字

// 工具函式：Hex 編碼 HTML → 純文字
const hexToPlainText = (hex) => {
	if (!hex) return ''
	// Hex → UTF-8 bytes → 字串
	const bytes = new Uint8Array(hex.match(/.{1,2}/g).map(b => parseInt(b, 16)))
	const html = new TextDecoder('utf-8').decode(bytes)
	// 去除 HTML tag
	const doc = new DOMParser().parseFromString(html, 'text/html')
	return (doc.body.textContent || '').trim()
}

// 題幹（Hex → 純文字）
const question = hexToPlainText(this.questionInfo.question)
  • 1. Hex 轉字串：Uint8Array + TextDecoder

這一段是處理資料流（Stream）或二進位轉換的現代 JS 標準作法：

hex.match(/.{1,2}/g)：先把長長的 Hex 字串每 2 個字元切成一組（例如 "3c"、"70"），代表一個十六進位的 Byte。

Uint8Array：建立一個無正負號的 8 位元整數陣列（這是 JS 處理二進位資料的專用結構）。

new TextDecoder('utf-8').decode(bytes)：這是最關鍵、最不會出亂碼的方法。 它告訴瀏覽器：「請用 UTF-8 編碼把這串二進位資料解碼成人類看得懂的繁體中文字串。」

  • 2. 解析 HTML：DOMParser

當 Hex 成功轉回帶有 < p>、  的 HTML 字串後，這行程式碼使用了瀏覽器自帶的重量級解析工具：

new DOMParser().parseFromString(html, 'text/html')：它會在記憶體中虛擬出一個完整的 HTML 網頁文件（Document）。

這樣做的最大好處是，瀏覽器會自動把所有奇怪的 HTML 實體字元（像是   轉成空格、& 轉成 &）完美還原，比單純用 Regex 正則表達式去取代還要精準、安全。

  • 3. 取出純文字：doc.body.textContent

虛擬 DOM 建立好後，直接存取 doc.body.textContent。

這個屬性會自動忽略所有的 HTML 標籤（如

、），只把裡面真正包裹的文字撈出來。

最後配合 .trim() 把前後多餘的空白、換行字元乾淨地刪除。

  • Vibe Coding 心得總結

這個解法在前端專案（特別是 SPA 客戶端環境）中是最高級且最安全的寫法。它不依賴任何第三方套件（如 lodash 或 he），完全使用瀏覽器原生 API，效能好、擴充性佳，也不用擔心正則表達式漏抓某些特殊 HTML 標籤。

⚠️ **GitHub.com Fallback** ⚠️