html中文汉字乱码原因（告诉你如何解决html乱码）

一、场景说明

假设需要劫持http响应并在html页面中注入一段js代码后再传回浏览器，实现在浏览器出现一个弹框消息提醒。

由于原始html页面编码格式存在UTF-8、GBK等多种编码格式，如果注入的js包含中文汉字消息的话，那么在UTF-8或GBK编码的页面就会有一个出现乱码。有没有办法做到不管是针对GBK、UTF-8编码的页面都能做到正常显示而不会出现乱码哪？

二、产生乱码的原因

首先来分析一下产生乱码的原因，我们在浏览器看到的信息都是通过图形学手段在显示器上呈现出来的，而实际保存在计算机硬件上的都是0和1（因为计算机实现是基于二进制），那么计算机要显示、传递信息就需要依靠一套规则把一串串的0和1识别为正确的字符，这就是编码。

例如01000001在ASCII编码规则下对应字母A。相同的0/1串，不同的编码解析出的字符一般是不同的，因此如果html页面按照UTF-8的编码解析正常，那么按照GBK的编码解析就会是乱码了。根据上面的示意图，假设注入的js代码为utf-8编码格式，而原始html编码格式也为UTF-8编码格式，那么最终注入这部分中的中文就能正常显示，但是如果原始html为GBK编码，那注入的这部分js代码的中文就会显示乱码。

三、解决办法

有一种unicode统一编码字符集，目标是把所有汉字、字符统一编码，也就是一串0/1组合在unicode字符集下对应的字符是唯一的，不会存在歧义。而js是支持解析unicode字符的，那么就可以在注入js中把要显示的消息统一转换为unicode编码，浏览器端去解析这个unicode编码，这样不管原始html是UTF-8还是GBK，都能正常显示中文。

原始注入js代码关于中文字符的部分

// utf-8编码格式
let message = "中文";

解决乱码的注入js代码关于中文字符的部分

// utf-8编码格式
let message = "\\u4e2d\\u6587";  
// 这个编码对应上面的message"中文"

注意：

1. 注入的js代码仍然是utf-8编码格式，只是消息内容转换为unicode编码的形式；

2. unicode中0x4e2d表示的0/1串对应汉字"中"，0x6587对应的0/1串对应汉字"文";

3. message其实也不是真正的unicode编码，它只是普通的字符串，只是使用了unicode对应的码点（也就是二进制对应的数值），因为可以利用这个码点在浏览器中恢复出正确的字符，事实上unicode字符集并没有规定具体的编码格式。