根本原因是字符串字节流在传输或构造过程中被错误解码，如服务端发utf-8字节却被浏览器按gbk解码为“Ĕ，转为js字符串后不可逆；正确做法是用response.arraybuffer()配合textdecoder指定编码解码。
前端用 innerHTML、DOMParser 或 fetch + response.text() 接收 HTML 字符串时出现中文乱码，根本原因不是“解析失败”，而是**字符串字节流在传输或构造过程中已被错误解码**。浏览器不会对纯字符串做二次编码识别——它只按当前 JS 执行环境的 Unicode 内存表示来渲染。所以问题出在「字符串从哪来」和「怎么来的」。
为什么 response.text() 返回的字符串是乱码？
这是最常见也最容易误判的场景：你以为 fetch 返回的是“原始 HTML 字节”，其实它返回的是已解码的 JavaScript 字符串。解码依据是：
- HTTP 响应头
Content-Type: text/html; charset=gbk→ 自动按 GBK 解码（即使内容实际是 UTF-8） - 响应头缺失
charset，且响应体前 1024 字节没找到<meta charset="UTF-8">→ 回退到系统默认（Windows 下常为 GBK） - 你用
XMLHttpRequest且手动设了responseType = 'text'，但没调xhr.overrideMimeType('text/html; charset=utf-8')
结果就是：服务端发的是 UTF-8 字节 0xE4 0xB8 0xAD（“中”），浏览器却用 GBK 解成两个乱码字符 ÄÂ，再转成 JS 字符串后就不可逆了。
用 DOMParser 解析前先确保字符串是正确 Unicode
DOMParser 不会修复已损坏的字符串——它只把传入的字符串当作文本内容解析。如果字符串里已经是 ÄÂ，解析出来的 DOM 节点文本节点内容也是 ÄÂ。
- ✅ 正确做法：用
response.arrayBuffer()获取原始字节，再手动用TextDecoder指定编码解码 - ❌ 错误做法：直接
new DOMParser().parseFromString(await res.text(), 'text/html')
示例：
const res = await fetch('/page.html');
const arrayBuffer = await res.arrayBuffer();
// 明确告诉浏览器：这是 UTF-8 字节流
const decoder = new TextDecoder('utf-8');
const htmlString = decoder.decode(arrayBuffer);
const doc = new DOMParser().parseFromString(htmlString, 'text/html');
若服务端实际发的是 GBK，就把 'utf-8' 换成 'gbk'（需引入 encoding-indexes 或使用 iconv-lite 的 WebAssembly 版本）。
innerHTML 插入乱码字符串时怎么补救？
如果后端返回的 HTML 字符串已经乱码（比如接口返回 JSON 中的 html: "ÄÂ"），说明乱码发生在服务端或传输链路，前端无法 100% 还原。但可尝试有限恢复：
- 先判断乱码类型：若看到
ÄÂ这类组合，大概率是 UTF-8 字节被当 GBK 解了；若看到涓，可能是 GBK 字节被当 UTF-8 解 - 对字符串做反向重编码（仅限未被替换为 的情况）：
unescape(encodeURIComponent(str))可能还原部分 UTF-8 误读，但不稳定，慎用 - 更可靠的做法：让后端改接口，返回
Content-Type: application/json; charset=utf-8，且 JSON 内容本身用 UTF-8 编码（即不二次编码 HTML 字符串）
不要试图用正则替换 Ä → 中：不同汉字产生的乱码组合不同，且可能误伤正常英文或符号。
服务端返回 HTML 字符串时的关键约束
如果你控制后端，必须保证三点同时成立，前端才能安全接收：
- HTTP 响应头必须带
Content-Type: text/html; charset=utf-8（或对应真实编码） - HTML 字符串内容本身必须与声明的编码一致（比如声明 UTF-8，就不能混入 GBK 字节）
- 若通过 JSON 包裹 HTML（如
{html: "..."}），JSON 响应头必须是application/json; charset=utf-8，且 HTML 字符串在 JSON 中不额外 URL 编码或 Base64
任何一环断裂，都会导致前端拿到的字符串在内存中就是错的——后续所有 DOM 操作都无力回天。真正难的不是解析，是守住字节流从服务端到 JS 字符串这一关的编码一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
