UTF8编码脚本无法正确编码带变音符号的大写字母问题求助

你的核心问题在于混淆了Unicode字符串和UTF-8字节序列的处理逻辑，当前的编码函数存在两个关键缺陷：

1. 对于Ö（U+00D6）这类大写变音字符，函数将其编码为UTF-8字节（0xC3 0x96）后，直接把这些字节当作Unicode码点转成字符串（对应字符Ã和不可显示的控制字符–），浏览器无法渲染控制字符，因此显示为??；而小写ö（U+00F6）编码后的第二个字节是可显示的段落符号¶，但你说显示正常，这说明你实际需要的是解码而非编码操作——也就是把数据源B中被错误解析的UTF-8字节字符串转成正确的Unicode字符串。
2. 原函数未处理Unicode代理对（U+10000及以上的字符），虽然不是当前问题的核心，但会导致特殊字符处理失败。

方案一：手动实现UTF-8解码函数 #

如果你的数据源B内容是UTF-8编码，但被错误地以ISO-8859-1/Latin-1编码解析成了乱码字符串，可以用以下函数将其解码为正确的Unicode字符串：

function utf8Decode(str) {
    let result = '';
    let i = 0;
    const strLength = str.length;
    
    while (i < strLength) {
        const charCode = str.charCodeAt(i);
        
        // 单字节ASCII字符
        if (charCode < 128) {
            result += String.fromCharCode(charCode);
            i++;
        }
        // 双字节UTF-8字符（U+0080 到 U+07FF）
        else if (charCode >= 192 && charCode < 224) {
            if (i + 1 >= strLength) break; // 忽略截断的字节序列
            const charCode2 = str.charCodeAt(i + 1);
            const codePoint = ((charCode & 0x1F) << 6) | (charCode2 & 0x3F);
            result += String.fromCharCode(codePoint);
            i += 2;
        }
        // 三字节UTF-8字符（U+0800 到 U+FFFF）
        else if (charCode >= 224 && charCode < 240) {
            if (i + 2 >= strLength) break;
            const charCode2 = str.charCodeAt(i + 1);
            const charCode3 = str.charCodeAt(i + 2);
            const codePoint = ((charCode & 0x0F) << 12) | ((charCode2 & 0x3F) << 6) | (charCode3 & 0x3F);
            result += String.fromCharCode(codePoint);
            i += 3;
        }
        // 四字节UTF-8字符（U+10000 到 U+10FFFF）
        else if (charCode >= 240 && charCode < 248) {
            if (i + 3 >= strLength) break;
            const charCode2 = str.charCodeAt(i + 1);
            const charCode3 = str.charCodeAt(i + 2);
            const charCode4 = str.charCodeAt(i + 3);
            const codePoint = ((charCode & 0x07) << 18) | ((charCode2 & 0x3F) << 12) | ((charCode3 & 0x3F) << 6) | (charCode4 & 0x3F);
            result += String.fromCodePoint(codePoint);
            i += 4;
        }
        // 无效UTF-8字节，替换为标准替换字符�
        else {
            result += String.fromCharCode(0xFFFD);
            i++;
        }
    }
    return result;
}

使用示例：

// 假设数据源B返回的乱码是 "Ö"
const garbledText = "Ö";
const decodedText = utf8Decode(garbledText);
console.log(decodedText); // 输出 "Ö"
// 直接将decodedText插入DOM即可正常显示

方案二：使用原生API（推荐） #

如果你不需要兼容旧浏览器，直接使用浏览器原生的TextDecoder API更可靠，无需手动实现编码逻辑：

场景1：直接从数据源获取字节流

fetch('your-source-b-url')
    .then(response => response.arrayBuffer())
    .then(buffer => {
        const decoder = new TextDecoder('utf-8');
        const text = decoder.decode(buffer);
        // text是正确的Unicode字符串，直接用于页面显示
    });

场景2：已拿到乱码字符串

const garbledText = "Ö";
// 将乱码字符串（ISO-8859-1解析的字节）转回字节数组
const bytes = new Uint8Array([...garbledText].map(c => c.charCodeAt(0)));
const decoder = new TextDecoder('utf-8');
const decodedText = decoder.decode(bytes);
console.log(decodedText); // 输出 "Ö"

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