Nodejs解决中文字符浏览器不兼容（乱码）的终极办法（punycode）

Nodejs解决中文字符浏览器不兼容（乱码）的终极办法（punycode）

最近，为做一个浏览器插件，被字符不兼容的问题快搞死了。具体问题是从浏览器插件发起ajax跨域请求服务端内容，response的内容编辑是utf-8，在Firefox和Chrome下返回的结果都没有问题，但IE下中文是乱码. 这个问题实在太诡异。想尽一切办法最后最终找到以下解决途径： 首先用punycode.ucs2.decode方法将unicode string转为decimal code points，结果是一个数字数组。

var punycode = require('punycode');
app.get('/translate/:text/:from/:to', function(req, res){
	var translate = require('./translate.js');
	var text = req.params.text;
	var from = req.params.from;
	var to = req.params.to;
	res.charset = 'utf-8';
	translate.translate(text,from,to,function(err, data){
		res.send(punycode.ucs2.decode(data));
	});
});

这是最核心的一句：punycode.ucs2.decode(data)

然后在客户端将这个数组遍历，每个数字前加&#,后面加;，将其转为html字符实体：

function ParseChar(char){
	var result = '';
	for (i = 0; i < char.length; i++) {
		result += '&#' + char[i].toString() + ';';
	}
	return result;
}

这样得到的结果，就在任何浏览器下中文都不会有乱码了。


5 回复

Node.js 解决中文字符浏览器不兼容（乱码）的终极办法（punycode）

最近，我在开发一个浏览器插件时遇到了一个棘手的问题：从浏览器插件发起的 AJAX 跨域请求中，服务端响应的内容在 Firefox 和 Chrome 下显示正常，但在 IE 中中文却出现了乱码。这让我非常头疼。

经过一番尝试后，我最终找到了一个解决方案。以下是详细的解决步骤：

1. 使用 punycode 将 Unicode 字符串转换为十进制代码点

首先，我们需要安装 punycode 模块。可以通过 npm 安装：

npm install punycode

然后在服务端使用 punycode.ucs2.decode 方法将 Unicode 字符串转换为十进制代码点数组。这一步可以确保中文字符不会因为编码问题而出现乱码。

// 引入 punycode 模块
var punycode = require('punycode');

// 在路由处理函数中进行字符转换
app.get('/translate/:text/:from/:to', function(req, res) {
    var translate = require('./translate.js');
    var text = req.params.text;
    var from = req.params.from;
    var to = req.params.to;

    // 设置响应字符集为 utf-8
    res.charset = 'utf-8';

    // 翻译文本
    translate.translate(text, from, to, function(err, data) {
        if (err) {
            res.status(500).send('Error translating text');
        } else {
            // 使用 punycode.ucs2.decode 方法将字符串转换为十进制代码点数组
            res.send(punycode.ucs2.decode(data));
        }
    });
});

2. 在客户端将十进制代码点数组转换为 HTML 实体

在客户端，我们需要遍历这些十进制代码点数组，并将每个数字转换为 HTML 实体字符。

function ParseChar(charArray) {
    var result = '';
    for (var i = 0; i < charArray.length; i++) {
        // 将每个数字转换为 HTML 实体字符
        result += '&#' + charArray[i] + ';';
    }
    return result;
}

// 假设我们从服务器接收到的响应是十进制代码点数组
fetch('/translate/你好/en/zh')
    .then(response => response.json())
    .then(data => {
        // 解析字符
        var parsedText = ParseChar(data);
        console.log(parsedText); // 输出: &#20320;&#22909;
        document.getElementById('output').innerHTML = parsedText;
    })
    .catch(error => console.error('Error:', error));

通过以上两步，我们可以确保中文字符在所有浏览器中都能正确显示，避免了乱码问题。希望这个方法能帮助遇到类似问题的朋友！


你的主页面是gbk的？

不是，是utf-8

检查下你的请求和响应的编码吧。

你的描述中提到的方法并不是解决中文乱码的最佳途径。通常情况下，解决中文乱码问题可以通过设置正确的字符编码来实现。以下是一种更简便且常见的方法：

  1. 确保服务端响应的编码正确：在 Node.js 中，可以通过设置 res.charset 或者 res.set('Content-Type', 'text/html; charset=utf-8') 来确保发送给客户端的数据使用的是 UTF-8 编码。

  2. 客户端同样需要确保使用正确的编码：确保HTML页面的 <meta> 标签设置了正确的字符集，例如 <meta charset="UTF-8">。

以下是具体的代码示例：

// 服务端代码
app.get('/translate/:text/:from/:to', function(req, res){
    var translate = require('./translate.js');
    var text = req.params.text;
    var from = req.params.from;
    var to = req.params.to;
    
    res.charset = 'utf-8'; // 或者 res.set('Content-Type', 'text/html; charset=utf-8')
    translate.translate(text, from, to, function(err, data) {
        if (err) return res.status(500).send('Error');
        res.send(data);
    });
});

确保 HTML 页面中设置了正确的字符集：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>翻译页面</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

这样，通过确保服务端和客户端都使用正确的 UTF-8 编码，可以有效避免中文乱码问题。这种方法比使用 Punycode 更简单、更直接，并且更符合标准。

回到顶部