如何使用javascript转换文本区域以显示其他内容(例如base64解密)

Question

我正在尝试用HTML创建一个解密页面。我可以获得输入，并将其显示为输出，但我对如何更改在中间的文本感到困惑。这是我迄今为止的代码：http://jsfiddle.net/RZwmX/1.

HTML:

<textarea name="CipherText" id="CipherText" placeholder="Enter ciphertext here:"></textarea>
<div id="prevCom"></div>

Javascript：

wpcomment.onkeyup = wpcomment.onkeypress = function(){
wpcomment=btoa(wpcomment);
document.getElementById('prevCom').innerHTML = this.value;
}
//////////////////////////////////////
//from: https://scotch.io/tutorials/how-to-encode-and-decode-strings-with-base64-in-javascript
// Define the string
var string = 'Hello World!';
// Encode the String
var encodedString = btoa(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"
// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

我正在从中获取代码https://scotch.io/tutorials/how-to-encode-and-decode-strings-with-base64-in-javascript.Base64只是一个例子。我想知道的是如何进行过渡。在我的JSFiddle中，javascript的第3行是我想实现转换的方式，但这并不奏效。

Answer 1

我会这样做：

const input = document.querySelector('#encoded-input')
const output = document.querySelector('#decoded-output')
input.oninput = e => {
try {
output.innerText = atob(e.target.value)
} catch (error) {
output.innerText = e.target.value
? 'Please enter a valid Base64 encoded value.'
: ''
}
}

<textarea id="encoded-input"></textarea>
<div id="decoded-output"></div>