javascript - 使用 Javascript 创建 Base64 转换器

Question

我正在尝试创建一个自定义页面，将用户的输入编码为 Base64，反之亦然。我可以让编码部分工作，但是解码部分不起作用。为了“清除”文本区域，我使用一个函数来删除这些值，但是如果不刷新页面，这些值将不会拉入脚本中。

谁能指出问题所在吗？

<div class="main"><h3>Use this form to encode or decode base64</h3><br>
<form id="form" onsubmit="return false;">
    <textarea type="text" id="userInput" autocomplete="off"></textarea><br><br>
    <button type="submit" value="Encode" onclick="encode();">Encode</button>
    <button type="submit" value="Decode" onclick="decode();">Decode</button><br><br>
    <textarea id="base64_results"></textarea><br>
    <button type="button" value="clear" onclick="eraseText()">Start Over</button><br><br>
    <div class="b64_explained"></div>
</form>
</div>
<script>
function encode() {
    var input = document.getElementById("userInput").value;
    var encodedString = Base64.encode(input);
    document.getElementById("base64_results").innerHTML = encodedString;
}

function eraseText() {
    document.getElementById("userInput").value = "";
    document.getElementById("base64_results").value = "";
}

function decode() {
    var input = document.getElementById("userInput").value;
    var decodedString = Base64.decode(input);
    document.getElementById("base64_results").innerHTML = decodedString;
}
</script>   

</body>

--FROM BASE64.JS--
/**  Base64 Encoder && Decoder **/
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/++[++^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

Answer 1

对于 textarea，您可以使用 value 而不是 innerHTML另外，我使用了 native javascript 中的基本 atob 和 btoa 函数，而不使用库!

<div class="main"><h3>Use this form to encode or decode base64</h3><br>
<form id="form" onsubmit="return false;">
    <textarea type="text" id="userInput" autocomplete="off"></textarea><br><br>
    <button type="submit" value="Encode" onclick="encode();">Encode</button>
    <button type="submit" value="Decode" onclick="decode();">Decode</button><br><br>
    <textarea id="base64_results"></textarea><br>
    <button type="button" value="clear" onclick="eraseText()">Start Over</button><br><br>
    <div class="b64_explained"></div>
</form>
</div>
<script>
function encode() {
    var input = document.getElementById("userInput").value;
    var encodedString = btoa(input);
    document.getElementById("base64_results").value = encodedString;
}

function eraseText() {
    document.getElementById("userInput").value = "";
    document.getElementById("base64_results").value = "";
}

function decode() {
    var input = document.getElementById("userInput").value;
    var decodedString = atob(input);
    document.getElementById("base64_results").value = decodedString;
}
</script>   

</body>