我正在创建一个用 JavaScript 模拟 Vigenere 密码算法的程序。我还创建了一个 HTML 页面,允许用户输入纯文本短语并对消息进行加密/解密。当我键入明文消息并输入键值时,收到错误消息“加密未定义”。我不相信我的 .js 文件正确导入了我的函数,或者如果该文件正在导入函数,那么我没有看到我的错误。我能否深入了解为什么我没有达到预期的输出?
function encrypt(plaintext, key) {
if (!plaintext || !key || typeof plaintext !== 'string' || typeof key !== 'string' || key.match(/[^a-zA-Z]/)) {
throw new Error('Invalid input: plaintext and key must be non-empty strings containing only alphabetic characters.');
}
var ciphertext = "";
var keyIndex = 0;
for (var i = 0; i < plaintext.length; i++) {
var char = plaintext[i];
if(/[a-zA-Z]/.test(char)) {
var isUpperCase = char === char.toUpperCase();
var plainCharCode = char.toUpperCase().charCodeAt(0) - 65;
var keyCharCode = key[keyIndex % key.length].toUpperCase().charCodeAt(0) - 65;
var encryptedCharCode = (plainCharCode + keyCharCode) % 26 + 65;
ciphertext += isUpperCase ? String.fromCharCode(encryptedCharCode) : String.fromCharCode(encryptedCharCode).toLowerCase();
keyIndex++;
} else {
ciphertext += char;
}
}
return ciphertext;
}
function decrypt(ciphertext, key) {
if (!ciphertext || !key || typeof ciphertext !== 'string' || typeof key !== 'string' || key.match(/[^a-zA-Z]/)) {
throw new Error('Invalid input: ciphertext and key must be non-empty strings containing only alphabetic characters.');
}
var plaintext = "";
var keyIndex = 0;
for (var i = 0; i < ciphertext.length; i++) {
var char = ciphertext[i];
if (/[a-zA-Z]/.test(char)) {
var isUpperCase = char === char.toUpperCase();
var cipherCharCode = char.toUpperCase().charCodeAt(0) - 65;
var keyCharCode = key[keyIndex % key.length].toUpperCase().charCodeAt(0) - 65;
var decryptedCharCode = (cipherCharCode - keyCharCode + 26) % 26 + 65;
plaintext += isUpperCase ? String.fromCharCode(decryptedCharCode) : String.fromCharCode(decryptedCharCode).toLowerCase();
keyIndex++;
} else {
plaintext += char;
}
}
return plaintext;
}
export { encrypt, decrypt };
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Assignment 4 - JavaScript</title>
<script src="vigenere.js"></script>
<style>
.container {
width: 50%;
margin: auto;
}
.result {
margin-top: 20px;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h2>Vigenere Cipher</h2>
<form id="cipherForm">
<div>
<label for="plaintext">Plaintext:</label><br>
<textarea id="plaintext" name="plaintext" rows="4" cols="50"></textarea>
</div>
<div>
<label for="key">Key:</label><br>
<input type="text" id="key" name="key">
</div>
<div>
<button type="button" onclick="encryptText()">Encrypt</button>
<button type="button" onclick="decryptText()">Decrypt</button>
</div>
<div class="result">
<label for="ciphertext">Ciphertext:</label><br>
<textarea id="ciphertext" name="ciphertext" rows="4" cols="50" readonly></textarea>
</div>
<div class="error" id="errorMessage"></div>
</form>
</div>
<script>
function encryptText() {
var plaintext = document.getElementById("plaintext").value;
var key = document.getElementById("key").value;
try {
var ciphertext = encrypt(plaintext, key);
document.getElementById("ciphertext").value = ciphertext;
document.getElementById("errorMessage").textContent = ""; // Clear any previous error messages
} catch (error) {
document.getElementById("errorMessage").textContent = error.message;
}
}
function decryptText() {
var ciphertext = document.getElementById("ciphertext").value;
var key = document.getElementById("key").value;
try {
var plaintext = decrypt(ciphertext, key);
document.getElementById("plaintext").value = plaintext;
document.getElementById("errorMessage").textContent = ""; // Clear any previous error messages
} catch (error) {
document.getElementById("errorMessage").textContent = error.message;
}
}
</script>
</body>
</html>
我认为您正在导出函数
encrypt
和 decrypt
但没有将它们导入到 .html 文件的脚本标记中。
尝试-
<script src="sample.js" type="module">
import {encrypt} from "sample.js";
import {decrypt} from "sample.js";
..rest of your code
</script>