Making Caser Cipher Case sensitive in JavaScript?-CodePudding

    <body>

  <div >
   <div >
     <h1 >Secured Data Cypher</h1>
   </div>
   <div >
     <h5 ><br><br>Enter Your Desired Message which you want Encrypted <br><br> For example: ****_***123 </h5>
   </div>
      <div >
        <div >
          <div >
            <h4>Plain Text</h4>
            <textarea  id="plain-text" rows="7"></textarea>
          </div>
          <div >
            <input type="number" min="0" max="25"  id="my-key" placeholder="Key (Digits Only)">
            <div >
              <button  type="button" onclick="encrypt()">Encrypt</button>
            </div>
          </div>
        </div>
        <div >
          <div >
            <h4>Cipher Text</h4>
            <textarea readonly  id="cipher-text" rows="7"></textarea>
          </div>
          <button type="button"  onclick="decrypt()">Decrypt</button>
        </div>
        <div >
          <div >
            <h4>Original Text</h4>
            <textarea readonly  id="original-text" rows="7"></textarea>
          </div>
        </div>
      </div>
  </div>

</body>


<!- JS for Cypher Starts here ->
<script>
function encrypt() {

  // Empty Original Text
  document.getElementById("original-text").value = "";

  var k = document.getElementById("my-key").value;
  var p = document.getElementById("plain-text").value;

  if (!(k >= 0 && k < 26)) {
    alert("Key should be between 0 and 25");
    return;
  }

  if (p.length === 0) {
    alert("Plain Text is empty");
  }

  p = p.toLowerCase();
  var cipher = "";
  var alphabet = "abcdefghijklmnopqrstuvwxyz";

  for (var i = 0; i < p.length; i  ) {
    var current = p.charAt(i);

    if (!isLetter(current)) {
      cipher  = current;
      continue;
    }

    var index = 0;
    index = alphabet.indexOf(current);
    var shifted = (parseInt(index)   parseInt(k)) % 26;
    cipher  = alphabet.charAt(shifted);
  }

  document.getElementById("cipher-text").value = cipher;
}

function decrypt() {
  var k = document.getElementById("my-key").value;
  var cipher = document.getElementById("cipher-text").value;

  if (!(k >= 0 && k < 26)) {
    alert("Key should be between 0 and 25");
    return;
  }

  var original = "";
  var alphabet = "abcdefghijklmnopqrstuvwxyz";

  for (var i = 0; i < cipher.length; i  ) {
    var current = cipher.charAt(i);

    if (!isLetter(current)) {
      original  = current;
      continue;
    }

    var index = 0;
    index = alphabet.indexOf(current);
    var num = parseInt(index) - parseInt(k);
    var shifted = (num   26) % 26;
    original  = alphabet.charAt(shifted);
  }

  document.getElementById("original-text").value = original;
}

function isLetter(str) {
  return str.length === 1 && str.match(/[a-z]/i);
}

</script>
<!- JS for Cypher Ends here ->

This code above only encrypts texts in lowercase

For example: Result: Leo_123 -(with shift number of 2)-> ngq_123 -(after decryption)-> leo_123

but my expected result is: Leo_123 -(with shift number of 2)-> Ngq_123 -(after decryption)-> Leo_123

the first part of the code is from my body tag and I am using bootstrap to make this happen The javascript code follows the main principal but I want to modify it to get the expected results.

CodePudding user response：

Make these changes:

Make alphabet a global variable that is initialised only once, and includes also the capital letters
Define a SIZE variable that is the length of this alphabet, and use that variable instead of the hard-coded 26, where ever you had used it.
Remove the statement that makes p lowercased.

Here is the adapted code:

// Make this global and add CAPITALS
var alphabet = "abcdefghijklmnopqrstuvwxyz";
alphabet  = alphabet.toUpperCase();
var SIZE = alphabet.length; // Use this instead of 26

function encrypt() {

  // Empty Original Text
  document.getElementById("original-text").value = "";

  var k =  document.getElementById("my-key").value;
  var p = document.getElementById("plain-text").value;

  if (!(k >= 0 && k < SIZE)) {
    alert("Key should be between 0 and "   (SIZE-1));
    return;
  }

  if (p.length === 0) {
    alert("Plain Text is empty");
  }

  // Don't lowercase!
  // p = p.toLowerCase();
  var cipher = "";

  for (var i = 0; i < p.length; i  ) {
    var current = p.charAt(i);

    if (!isLetter(current)) {
      cipher  = current;
      continue;
    }

    var index = alphabet.indexOf(current);
    var shifted = (index   k) % SIZE;
    cipher  = alphabet.charAt(shifted);
  }

  document.getElementById("cipher-text").value = cipher;
}

function decrypt() {
  var k =  document.getElementById("my-key").value;
  var cipher = document.getElementById("cipher-text").value;

  if (!(k >= 0 && k < SIZE)) {
    alert("Key should be between 0 and "   (SIZE-1));
    return;
  }

  var original = "";

  for (var i = 0; i < cipher.length; i  ) {
    var current = cipher.charAt(i);

    if (!isLetter(current)) {
      original  = current;
      continue;
    }

    var index = alphabet.indexOf(current);
    var num = index - k;
    var shifted = (num   SIZE) % SIZE;
    original  = alphabet.charAt(shifted);
  }

  document.getElementById("original-text").value = original;
}

function isLetter(str) {
  return str.length === 1 && str.match(/[a-z]/i);
}

  <div >
   <div >
     <h1 >Secured Data Cypher</h1>
   </div>
   <div >
     <h5 ><br><br>Enter Your Desired Message which you want Encrypted <br><br> For example: ****_***123 </h5>
   </div>
      <div >
        <div >
          <div >
            <h4>Plain Text</h4>
            <textarea  id="plain-text" rows="7"></textarea>
          </div>
          <div >
            <input type="number" min="0" max="51"  id="my-key" placeholder="Key (Digits Only)">
            <div >
              <button  type="button" onclick="encrypt()">Encrypt</button>
            </div>
          </div>
        </div>
        <div >
          <div >
            <h4>Cipher Text</h4>
            <textarea readonly  id="cipher-text" rows="7"></textarea>
          </div>
          <button type="button"  onclick="decrypt()">Decrypt</button>
        </div>
        <div >
          <div >
            <h4>Original Text</h4>
            <textarea readonly  id="original-text" rows="7"></textarea>
          </div>
        </div>
      </div>
  </div>