JQuery "looping" when replacing letters by others following character map

Question

I'm trying to get each letter to be replaced by another one using JQuery, . There is cyphering mode and a decyphering mode. Unfortunately, only the cyphering mode seems to work. The decyphering seems to be replacing all letters by the two first letters of the character map, as if "looping". That's where I'm stuck (and yes, I'm a newbie.)

Here is a fiddle : http://jsfiddle.net/xpvt214o/692455/

Here is my code so far :

$('#chiffrer').keyup(function (chiffrement) {
var chiffrer = {
u:'a',z:'b',b:'c',c:'d',a:'e',
d:'f',f:'g',g:'h',e:'i',h:'j',
j:'k',k:'l',l:'m',m:'n',i:'o',
n:'p',p:'q',q:'r',r:'s',s:'t',
o:'u',t:'v',v:'w',w:'x',x:'y',y:'z'
};
textechiffre = chiffrement.target.value;
for (var txt in chiffrer) {
    var temp = new RegExp(txt, 'gim');
    textechiffre = textechiffre.replace(temp, chiffrer[txt]);
    $('#resultat2').text(textechiffre);
}})

$('#dechiffrer').keyup(function (dechiffrement) {
var dechiffrer = {
a:'u',b:'z',c:'b',d:'c',e:'a',
f:'d',g:'f',h:'g',i:'e',j:'h',
k:'j',l:'k',m:'l',n:'m',o:'i',
p:'n',q:'p',r:'q',s:'r',t:'s',
u:'o',v:'t',w:'v',x:'w',y:'x',z:'y'
};
textedechiffre = dechiffrement.target.value;
for (var txt in dechiffrer) {
    var temp = new RegExp(txt, 'gim');
    textedechiffre = textedechiffre.replace(temp, dechiffrer[txt]);
    $('#resultat').text(textedechiffre);
}})

score 0 · Accepted Answer · answered Aug 28 '18 at 10:16

Neither of your functions work properly; you're changing the textechiffre string while you're looping over the encryption (or decryption) object. For example, "a" might get changed to "e", but then that same "e" may get changed to "i", etc. Use a replacer function instead:

$('#resultat2').text(textechiffre.replace(/[a-z]/gi, char => chiffrer[char]));

Full code:

$('#chiffrer').keyup(function(chiffrement) {
  var chiffrer = {
    u: 'a',
    z: 'b',
    b: 'c',
    c: 'd',
    a: 'e',
    d: 'f',
    f: 'g',
    g: 'h',
    e: 'i',
    h: 'j',
    j: 'k',
    k: 'l',
    l: 'm',
    m: 'n',
    i: 'o',
    n: 'p',
    p: 'q',
    q: 'r',
    r: 's',
    s: 't',
    o: 'u',
    t: 'v',
    v: 'w',
    w: 'x',
    x: 'y',
    y: 'z'
  };
  const textechiffre = chiffrement.target.value;
  $('#resultat2').text(textechiffre.replace(/[a-z]/gi, char => chiffrer[char]));

})

$('#dechiffrer').keyup(function(dechiffrement) {
  var dechiffrer = {
    a: 'u',
    b: 'z',
    c: 'b',
    d: 'c',
    e: 'a',
    f: 'd',
    g: 'f',
    h: 'g',
    i: 'e',
    j: 'h',
    k: 'j',
    l: 'k',
    m: 'l',
    n: 'm',
    o: 'i',
    p: 'n',
    q: 'p',
    r: 'q',
    s: 'r',
    t: 's',
    u: 'o',
    v: 't',
    w: 'v',
    x: 'w',
    y: 'x',
    z: 'y'
  };
  const textedechiffre = dechiffrement.target.value;
  $('#resultat').text(textedechiffre.replace(/[a-z]/gi, char => dechiffrer[char]));
})

body {
  font-family: monospace;
  font-size: 1.5rem;
}

textarea {
  width: 200px;
  height: 150px;
  margin: auto;
}

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

textarea#dechiffrer {
  outline: none;
  background: rgba(78, 182, 185, 0.2);
}

textarea#dechiffrer,
textarea#dechiffrer::placeholder {
  color: rgba(95, 158, 160, 1);
}

textarea#chiffrer {
  outline: none;
  background: rgba(205, 92, 92, 0.2);
}

textarea#chiffrer,
textarea#chiffrer::placeholder {
  color: rgba(205, 92, 92, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <textarea type="text" placeholder="decypher" name="dechiffrer" id="dechiffrer"></textarea>
  <textarea type="text" placeholder="cypher" name="chiffrer" id="chiffrer"></textarea>
</div>
<span id="resultat"></span><br>
<span id="resultat2"></span>

JQuery "looping" when replacing letters by others following character map

1 Answers1