Jquery 文字列＞画像に変換したい

手話の超入門編とでも言いましょうか、サイト上で指文字（一文字）の手話勉強を行いたいと思っています。

例えば　文字「お（文字）・も（文字）・て（文字）・な（文字）・し（文字）」と入力すると
下の段に「お（画像）・も（画像）・て（画像）・な（画像）・し（画像）」と表示されます。
手話というと「こんにちは」という固まりを表す言葉が主流ですが、名前や会社名など固有名詞を表すのはこの指文字（単文字）になります。
まあ、こういうところから手話を始めようという入門サイトとしての位置づけです。

さて肝心の変換作業なのですが、なかなかうまく運べません。
例えば「大木」さんが「お・お・き」と指文字を調べたいときに
「お（画像）・お（文字）・き（画像）」となります。
同じ文字は変換しないようです。
　※ただし、それを気にせずに次の変換を行うと、さっき変換をした「大木」さんが完成します。
　　つまり「お（画像）・お（画像）・き（画像）」になるのです。

正確に言えば、変換ボタン（submit）を押すと、同じ文字は除外されて変換されます。
そしてもう一度押すと、同じ文字が次々変換されます。
ちょっと変かも知りませんがこんな感じです。（３回、同じ言葉を変換すると…）
　　※わかりやすいように画像の場合は　オ（カタカナ）　で分けます。

おおおた　を変換　　おおおた　を変換　　おおおた　を変換
----------------------------------------------------
オおおタ　　　　　　　　オおおタ　　　　　　　　オおおタ
　　　　　　　　　　　　　オオおタ（前回）　　　　オオおタ（前回）
　　　　　　　　　　　　　　　　　　　　　　　　　　　オオオタ（前々回）


出来ればこの現象を改善して、毎回一発で変換（訳す）したいのです。
　
facebookで顔文字を絵文字に変える機能がありますが、その機能をアレンジして作ろうと思っています。
http://www.9lessons.info/2012/04/facebook-style- …

文字数制限も特になく、同じ文字の時だけ二文字目以降がひらがなのままです。

　あいうえおあいうえおさたあ
　○○○○○×××××○○×　→この現象を改善したい。

現状は
　１）一文字ずつなら変換できます。
　２）画像はimagesフォルダに全て用意してあります。
　３）二文字目以降が絶対に変換できないのではなく、一回で変換できません。
　　submitボタンを次々押せば古いやつもドンドン変換されます。
　　ただその都度一発で変換できればと思います。

正規表現とか色々な関数自体、これから学ぶ立場でして勉強自体は今後も続けます。
ただこの冬休みに手話初心者、ビギナーを集めて勉強会をするのですが
このサイトを是非完成して一緒に使っていきたいのです。

よく分かる人には簡単すぎるのかも知りません。
でも私はこれを機会に学ぶ時間をしっかり持って行きますのでどうかよろしくお願いいたします。

No.1 回答者： fujillin 回答日時： 2013/12/11 14:28

回答がないみたいなので・・・

どのような方法をとっているのかわかりませんが、文字列全体を変換するのでしょうから正規表現などを用いなくても、頭から1文字ずつ変換してゆけばいいのでは？
string.substr(n, 1) でn文字目の一文字が抽出できます。（最初のindexは0）


画像がどの範囲まで用意されているのか不明ですが、入力値に漢字が入っていたら変換「×」とするなどを考慮して、変換表を作っておいてそれをもとに変換してあげるとか…
文字と画像名（url）に規則性があれば、そのような表も不要になりますが…

方法はいろいろあると思いますが、簡単な一例を…
（”あいうえお”のみ対象で、変換表を用いるサンプルです）


var test = 'あいうえおabc';


var table = {
'あ' : 'A.jpg',
'い' : 'I.jpg',
'う' : 'U.jpg',
'え' : 'E.jpg',
'お' : 'O.jpg',
'other' : 'None.jpg'
};

document.getElementById('hoge').innerHTML = test.split("").map(function(letter){
return '<img src="' + (table[letter]?table[letter]:table['other']) + '" alt="">';
}).join('');