Caesar cipher decoder

Caesar cipher decoder developed using JavaScript.

Try entering a text in the plain text input box and also choose a numeric key, then click on the digit button to get the encrypted text.

Plain text Key Encrypted text

For example, try to enter CODINGCREATIVO with key 5, you will get the encrypted text HTINSLHWJFYNAT.

Then, in the plain text box, enter HTINSLHWJFYNAT with key -5, you will get the decrypted text CODINGCREATIVO.

We have already explained the Caesar cipher in the following tutorials:

Tutorial on Caesar's cipher in C

Example on Caesar's cipher from file

Caesar cipher decoder online

Let's create an alphabet variable with the letters of our alphabet:

alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

The letters are 26, so the key can take 26 possible values. This as we have already said in the previous tutorials makes the cipher very weak.

We also remember that Caesar cipher is made in a circular way, so when you get to Z you start from A.

For convenience, we consider only the words written in uppercase, therefore we transform into uppercase any text written in the plain text input box. For this purpose we use the toUpperCase() function which converts a string to uppercase characters.

testo.value = testo.value.toUpperCase();
// capitalize the entered text

We reset any values ​​present in testoCifrato, then we write: testoCifrato.value = "". That is, we set the encrypted text as an empty string.

We obtain the value of the inserted key (by default I entered the value 5) which is used to determine how far to move.

So let's use the parseInt function for this purpose which parses an argument and returns an integer. If the key is less than zero then we add 26. This is to decrypt the text again as seen in the example above.

c = parseInt(key.value);
if (c < 0) c += 26;

Now let's calculate the length of the entered text:

len = text.value.length;

So with a for loop we read all the characters and move them following this formula:

pos = (pos + c) % 26;

In this way to pos (ie to the position of the letter in the alphabet) we add c and then we calculate the remainder of the division by 26. So if the sum touches the maximum limit we start again from the beginning.

We use the charAt function which in this case returns the character of the string specified by the index i.

Then we also use the indexOf function which returns the index inside the String object.

The reset function clears the values ​​contained in the plaintext and ciphertext fields.

Caesar cipher decoder - JavaScript and HTML code

Here is the complete JavaScript code that for simplicity we insert on the same page, remember that a separate file should be created:

function encrypt(text, textEncrypt, key){
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    text.value = text.value.toUpperCase();
    textEncrypt.value = "";

    let c = parseInt(key.value);
    if (c < 0) c += 26;

    const len = text.value.length;

    for (let i = 0; i < len; i++){
        let ch = text.value.charAt(i);
        if (ch >= 'A' & ch <= 'Z') {
            let pos = alphabet.indexOf(ch);
            pos = (pos + c) % 26;
            textEncrypt.value += alphabet.charAt(pos);
        }
    }
}

function reset_all(text, textEncrypt, key){
	text.value = "";
	textEncrypt.value = "";
	key.value = 5;
}


Finally the HTML code to create the text fields and buttons:

This was just one example of the possible development of the online Caesar cipher, please propose your solution.

Alcuni link utili

Indice argomenti tutorial JavaScript