JavaScript weird replacing
<p>I am working on a simple project that generates Facebook BBCode (or something like that) in images that you can use while chatting.</p>

<p>Here's my full code:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
function gear()
{
var textArea = document.getElementById("id");
var insertedText = theForm.theText.value;
var charChanger = insertedText.replace(/a/ig, "[[f9.cha]] ").replace(/b/gi, "[[f9.chb]] ").replace(/c/gi, "[[f9.chc]] ").replace(/d/gi, "[[f9.chd]] ").replace(/e/gi, "[[f9.che]] ").replace(/f/gi, "[[f9.chf]] ").replace(/g/gi, "[[f9.chg]] ").replace(/h/gi, "[[f9.chh]] ").replace(/i/gi, "[[f9.chi]] ").replace(/j/gi, "[[f9.chj]] ").replace(/k/gi, "[[f9.chk]] ").replace(/l/gi, "[[f9.chl]] ").replace(/m/gi, "[[f9.chm]] ").replace(/n/gi, "[[f9.chn]] ").replace(/o/gi, "[[f9.cho]] ").replace(/p/gi, "[[f9.chp]] ").replace(/q/gi, "[[f9.chq]] ").replace(/r/gi, "[[f9.chr]] ").replace(/s/gi, "[[f9.chs]] ").replace(/t/gi, "[[f9.cht]] ").replace(/u/gi, "[[f9.chu]] ").replace(/v/gi, "[[f9.chv]] ").replace(/w/gi, "[[f9.chw]] ").replace(/x/gi, "[[f9.chx]] ").replace(/y/gi, "[[f9.chy]] ").replace(/z/gi, "[[f9.chz]] ");

textArea.innerHTML = charChanger;
}
&lt;/script&gt;
&lt;div align="center"&gt;&lt;form name="theForm"&gt;
&lt;textarea rows="5" name="theText" cols="120" onkeyup="gear();"&gt;&lt;/textarea&gt;
&lt;br&gt;
&lt;textarea readonly id="id" rows="20" cols="120"&gt;&lt;/textarea&gt;
&lt;/form&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>There are two <code>&lt;textarea&gt;</code>s. The first one is filled with strings, and the second replaces the strings by their replacement values.</p>

<p>And the function starts working after keyup event. It should work perfectly, but it returns some weird replacements starting from a character to g (the rest is working).
So is there a fix? Or another way, like replacing using arrays?</p>
