如何在浏览器中将UTF8编码转换为EUC-JP编码？

问题说明 #

我需要把UTF-8编码的字符串转换为EUC-JP编码，用于HTTP请求URL的关键字参数，例如将那賀崎ゆきね转换为%c6%e1%b2%ec%ba%ea%a4%e6%a4%ad%a4%cd。

TextDecoder仅能将EUC-JP字节解码为UTF-8字符串，无法实现反向编码：

const decoder = new TextDecoder('euc-jp');
const decodedString = decoder.decode(eucjpBytes); 

console.log(decodedString);

Node.js中的encoding.js、encoding-japanese或iconv-lite依赖本地环境，无法直接在浏览器中使用。以下是我的HTTP请求代码示例：

原生XMLHttpRequest实现 #

const url = 'https://xxx'
const encoded = 'xxx';
url = url + encoded;
const Http = new XMLHttpRequest();
Http.open("GET", url);
Http.send();
Http.onload = function(e) {
         let domNewx = new DOMParser().parseFromString(Http.responseText, 'text/html');
}

Greasemonkey/Tampermonkey的GM_xmlhttpRequest实现 #

const url = 'https://xxx'
const encoded = 'xxx';
url = url + encoded;
GM_xmlhttpRequest({
            method: 'GET',
            url: url,
            anonymous: true,
            onload: function (result) {
                xhrResult = result.status;
                let domNewx = new DOMParser().parseFromString(result.responseText, 'text/html');
            },
            onerror: function (result) {
                console.log(result);
            },
});

解决方案 #

可以使用encoding-japanese的浏览器兼容版本，无需Node环境，直接在前端实现UTF-8到EUC-JP的编码转换并生成URL参数格式。

1. 引入依赖 #

通过CDN直接引入encoding-japanese：

<script src="https://cdn.jsdelivr.net/npm/encoding-japanese@2.0.0/lib/encoding.min.js"></script>

2. 实现编码转换函数 #

function utf8ToEucJpUrlEncode(str) {
    // 将UTF-8字符串转为EUC-JP字节数组
    const eucJpBytes = Encoding.convert(str, {
        to: 'EUC-JP',
        from: 'UTF-8'
    });
    // 转换为URL编码格式
    let urlEncoded = '';
    eucJpBytes.forEach(byte => {
        urlEncoded += `%${byte.toString(16).padStart(2, '0').toUpperCase()}`;
    });
    return urlEncoded;
}

// 测试
const keyword = '那賀崎ゆきね';
const encoded = utf8ToEucJpUrlEncode(keyword);
console.log(encoded); // 输出: %C6%E1%B2%EC%BA%EA%A4%E6%A4%AD%A4%CD

3. 整合到HTTP请求 #

以GM_xmlhttpRequest为例：

const baseUrl = 'https://xxx';
const keyword = '那賀崎ゆきね';
const encodedKeyword = utf8ToEucJpUrlEncode(keyword);
const fullUrl = `${baseUrl}${encodedKeyword}`;

GM_xmlhttpRequest({
    method: 'GET',
    url: fullUrl,
    anonymous: true,
    onload: function (result) {
        xhrResult = result.status;
        let domNewx = new DOMParser().parseFromString(result.responseText, 'text/html');
        // 后续处理逻辑
    },
    onerror: function (result) {
        console.log(result);
    },
});

内容的提问来源于stack exchange，提问作者lyscop