如何编码用户输入避免页面错误及Base64转码异常问题

现有方案的问题 #

• unescape是已废弃的JavaScript API，虽暂时能兼容多数浏览器，但处理非ASCII字符（如中文、特殊符号）时易出现编码异常，导致生成的Base64字符串不符合规范，触发服务端“输入不是有效的Base-64字符串”错误。
• 前端解码逻辑decodeURIComponent(atob(tbox2.value))未对应编码步骤中的unescape操作，逻辑不匹配，存在潜在解码失败风险。

更可靠的编码解码方案 #

前端（JavaScript） #

使用标准TextEncoder/TextDecoderAPI处理UTF-8编码，完全支持所有Unicode字符、控制字符，避免废弃API的隐患：

function myencode() {
    const tbox1 = document.getElementById("TextBox1");
    const tbox2 = document.getElementById("TextBox2");
    tbox2.value = encoder(tbox1.value);
}

function mydecode() {
    const tbox1 = document.getElementById("TextBox1");
    const tbox2 = document.getElementById("TextBox2");
    tbox1.value = decoder(tbox2.value);
}

function encoder(str) {
    const encoder = new TextEncoder();
    const utf8Bytes = encoder.encode(str);
    return btoa(String.fromCharCode(...utf8Bytes));
}

function decoder(base64Str) {
    const binaryStr = atob(base64Str);
    const utf8Bytes = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
        utf8Bytes[i] = binaryStr.charCodeAt(i);
    }
    const decoder = new TextDecoder();
    return decoder.decode(utf8Bytes);
}

服务端（VB.NET） #

对应前端UTF-8转Base64的逻辑，直接解码字节数组即可，无需额外URI转义：

Protected Sub Button3_Click(sender As Object, e As EventArgs)
    Try
        Dim base64Bytes As Byte() = Convert.FromBase64String(TextBox2.Text)
        Dim decodedStr As String = System.Text.Encoding.UTF8.GetString(base64Bytes)
        TextBox3.Text = decodedStr
    Catch ex As Exception
        TextBox3.Text = "解码失败：" & ex.Message
    End Try
End Sub

方案优势 #

• 全面支持所有输入字符（包括Word复制的特殊格式字符、控制字符），不会出现编码丢失或Base64无效问题。
• 使用现代标准API，兼容性稳定，无废弃API风险。
• 前后端编码解码逻辑严格对应，避免匹配错误导致的异常。

内容的提问来源于stack exchange，提问作者Albert D. Kallal