可定制的字母替换器

我一直在开发一个几乎可以替代字母的应用程序。你会有一个字母和一个输入框。该字母表示将被替换的字母，您可以在输入框中写下要替换的字母。为此，我使用了正则表达式和对象。

如果你像@anonymous一样徘徊，到底是什么错了:

@julianavar什么不行?你遇到的具体问题是什么?——匿名

答案如下:

@Anonymous #extra- customization不起作用。假设您决定在#extra- customization中替换以下内容:a替换为b, b替换为c, c替换为d。不要更改任何其他内容。现在输入"abcd"，点击翻译，你会看到#extra- customization并没有覆盖# customization - julian avar

问题是，如果您想用用户选择的替换用户选择的任何内容该怎么办?

下面的代码包含注释以简化，并且也进行了整体简化。我添加CSS是为了创建某种顺序。

为了让你了解我在说什么，这里是链接http://codepen.io/julian-a-avar/debug/BywZYL。

你也可以在这里查看:

// My globals
var output = $("#output");
var extra_customizing = $("#extra-customizing");
String.prototype.cap = function() { // needed or demonstration
  return this.charAt(0).toUpperCase() + this.slice(1);
}
function translate() {
  var input = $("#input");
  var value = input.val();
  // Retriving #customizing
  /*
    I retrieve the values of the input boxes, in order to replace them later
  */
  // needed or demonstration
  var IDa = $("#a").val();
  var IDb = $("#b").val();
  var IDc = $("#c").val();
  var IDd = $("#d").val();
  // Retriving #extra-customizing
  /*
    Using the same logic as the other ones
  */
  var ID_ax = $("#Ax").val(); // input
  var ID_ay = $("#Ay").val(); // output
  var ID_bx = $("#Bx").val(); // input
  var ID_by = $("#By").val(); // output
  var ID_cx = $("#Cx").val(); // input
  var ID_cy = $("#Cy").val(); // output
  /*
    If the user inputs something to replace, they MUST have something to to replace it with(may change later)
  */
  if(ID_ax != "" && ID_ax == "") {
    alert("You have not insterted a value in #1");
  }
  if(ID_bx != "" && ID_bx == "") {
    alert("You have not insterted a value in #2");
  }
  if(ID_cx != "" && ID_cx == "") {
    alert("You have not insterted a value in #3");
  }
  // Setting
  var mapObj = {
    // Setting #customizing
    /*
      I first select what the user would write, and the what it should be replaced with
    */
    a: IDa,
    b: IDb,
    c: IDc,
    d: IDd,
    A: IDa.cap(),
    B: IDb.cap(),
    C: IDc.cap(),
    D: IDd.cap(),
    // Setting #extra-customizing
    /*
      I'm trying to use the same logic, but it is unsuccesful
    */
    ID_ay: ID_ax,
    ID_by: ID_bx,
    ID_cy: ID_cx
  }; 
  // Translating
  /*
    Below is the code used to replace letters
  */
  var re = new
  RegExp(Object.keys(mapObj).join("|"),"g");
  value = value.replace(re, function(matched) {
    return mapObj[matched];
  });
  
  output.val(value);
}

body {
  background-color: #cccccc;
  color: #444444;
}
hr {
  width: 60%;
  background-color: #999999;
  border: none;
  padding: 0;
  margin: 0 auto 0 auto;
}
#customizing {
  font-family: "courier";
  width: calc(50em + 195px);
  width: -moz-calc(50em + 195px);
  margin: auto;
  font-size: .8em;
}
#extra-customizing {
  font-family: "courier";
  width: calc(55em + 282px);
  width: -moz-calc(55em + 282px);
  margin: auto;
  font-size: .8em;
  margin-top: .5em;
  padding-top: .5em;
  padding-left: .5em;
  padding-right: .5em;
  border-radius: 2px;
}
#customizing input, #extra-customizing input {
  font-family: "courier";
  width: 3em;
  margin-left: 5px;
  margin-right: 10px;
  font-family: "courier";
  text-align: center;
  font-size: .8em;
  padding-bottom: .3em;
  padding-top: .2em;
  background-color: #111111;
  color: #aaaaaa;
  border: none;
  border-radius: 2px;
  margin-bottom: 1em;
}
#extra-customizing input {
  margin-right: 15px;
}
#translator {
  width: 100%;
}
#extra-customize {
  width: 320px;
  margin: .2em auto 1em auto;
}
#extra-customize input {
  border: none;
  padding: 0;
  margin: 0;
  width: 1em;
  height: .9em;
}
#input {
  width: 40%;
  height: 40vh;
  float: left;
  padding: .43%;
  margin: 0;
  margin-left: 5%;
  border: none;
  background-color: #111111;
  color: #aaaaaa;
  border-radius: 2px;
  font-size: 1em;
  outline: none;
  resize: none;
  overflow: auto;
}
#inputB {
  font-family: "courier";
  width: 8.28%;
  padding: 0;
  margin: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  border: none;
  background-color: #1f1f1f;
  color: #aaaaaa;
  border-radius: 2px;
  font-size: .8em;
  resize: none;
  cursor: pointer;
  outline: none;
}
#inputB:hover {
  background-color: #aaaaaa;
  color: #1f1f1f;
}
#output {
  width: 40%;
  height: 40vh;
  float: right;
  padding: .43%;
  margin: 0;
  margin-right: 5%;
  border: none;
  background-color: #111111;
  color: #aaaaaa;
  border-radius: 2px;
  font-size: 1em;
  outline: none;
  resize: none;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="customizing">
  a<input type="text" id="a" value="a" maxlenght="3">
  b<input type="text" id="b" value="b" maxlenght="3">
  c<input type="text" id="c" value="c" maxlenght="3">
  d<input type="text" id="d" value="d" maxlenght="3">
</div>
<hr>
<div id="extra-customizing">
  1<input type="text" id="Ax" value="" maxlength="5">:<input type="text" id="Ay" value="" maxlength="7">
  2<input type="text" id="Bx" value="" maxlength="5">:<input type="text" id="By" value="" maxlength="7">
  3<input type="text" id="Cx" value="" maxlength="5">:<input type="text" id="Cy" value="" maxlength="7">
</div>
<div id="translator">
  <textarea id="input"></textarea>
  <input type="button" value="Translate" id="inputB" onclick="translate()">
  <textarea id="output" readonly></textarea>
</div>