JQuery在字符映射后用其他字母替换字母时“循环”[重复]

Question

我正在尝试使用 JQuery 将每个字母替换为另一个字母，.有密码模式和解密模式。不幸的是，似乎只有密码模式有效。解密似乎是用字符映射的两个首字母替换所有字母，就好像“循环”一样。这就是我卡住的地方（是的，我是新手。）

这是一个小提琴：http://jsfiddle.net/xpvt214o/692455/

到目前为止，这是我的代码：

$('#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);
}})

Answer 1

您的任何功能都无法正常工作；您正在更改textechiffre 字符串而 您正在循环加密（或解密）对象。例如，“a”可能会更改为“e”，但同样的“e”可能会更改为“i”等。请改用替换函数：

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

完整代码：

$('#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>