title: customizable letter replacer
body: <p>I've been working on an app that pretty much replaces letters.
  So you'll have a letter and an input box. The letter reprecents what letter will be replaced, and you write what you want it to be replaced with in the input box. For this I used regex and objects.</p>
  
  <p>If you wander like <em>@anonymous</em>, what exactly is wrong:</p>
  
  <blockquote>
    <p>@julianavar What doesn't work about it? What is the specific problem that you are having? –  Anonymous</p>
  </blockquote>
  
  <p>Here is the answer:</p>
  
  <blockquote>
    <p>@Anonymous #extra-customizing doesn't work. Let's just say that you decide to replace in #extra-customizing the following: a with b, b with c, c with d. Don't change anything else. Now type "abcd" click translate, and you'll see that #extra-customizing doesn't overwrite #customizing –  julian avar  </p>
  </blockquote>
  
  <p>The problem is, <strong>What if you want to replace whatever the user chooses with whatever the user chooses</strong>?</p>
  
  <p>The code below includes coment to simplify, and is also overall simplified. I added the CSS in order to create some sort of order.</p>
  
  <p>To give you an idea of what I'm talking about, here is the link <a href="http://codepen.io/julian-a-avar/debug/BywZYL" rel="nofollow">http://codepen.io/julian-a-avar/debug/BywZYL</a>.</p>
  
  <p>Or you can always view it here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 != "" &amp;&amp; ID_ax == "") {
      alert("You have not insterted a value in #1");
    }
    if(ID_bx != "" &amp;&amp; ID_bx == "") {
      alert("You have not insterted a value in #2");
    }
    if(ID_cx != "" &amp;&amp; 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);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="customizing"&gt;
    a&lt;input type="text" id="a" value="a" maxlenght="3"&gt;
    b&lt;input type="text" id="b" value="b" maxlenght="3"&gt;
    c&lt;input type="text" id="c" value="c" maxlenght="3"&gt;
    d&lt;input type="text" id="d" value="d" maxlenght="3"&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  &lt;div id="extra-customizing"&gt;
    1&lt;input type="text" id="Ax" value="" maxlength="5"&gt;:&lt;input type="text" id="Ay" value="" maxlength="7"&gt;
    2&lt;input type="text" id="Bx" value="" maxlength="5"&gt;:&lt;input type="text" id="By" value="" maxlength="7"&gt;
    3&lt;input type="text" id="Cx" value="" maxlength="5"&gt;:&lt;input type="text" id="Cy" value="" maxlength="7"&gt;
  &lt;/div&gt;
  
  &lt;div id="translator"&gt;
    &lt;textarea id="input"&gt;&lt;/textarea&gt;
    &lt;input type="button" value="Translate" id="inputB" onclick="translate()"&gt;
    &lt;textarea id="output" readonly&gt;&lt;/textarea&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>