$.each()の配列処理機能とreplaceを使って、文字列を置換える

replaceメソッドの書式は、「replace(/パターン/修飾子, '置き換え後の文字列')」です。
パターンの部分に置き換え前の文字列を直接、もしくは正規表現で一定の条件に一致するものだけを対象にする記述をします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
var result = $('#a').text();
var ary = {
'か' : /あ/g,
'き' : /い/g,
'く' : /う/g,
'け' : /え/g,
'こ' : /お/g
};
$('#b').on('click', function(){
$.each(ary, function(key,val){
result=result.replace(val,key);
$('#a').text(result);
});
});
});
1
2
3
4
5
6
7
8
9
10
#a {
background-color: #aaa;
color: #fff;
margin-bottom: 15px;
padding:5px;
}
#b {
background-color: blue;
color: #fff;
}
HTML
1
2
<div id='a'>ああいうえお</div>
<input type='submit' id='b' value='変換ボタン'>

JSタブ

３行目は、idが「a」のdivボックス内のテキストを取得してresultという変数に代入し、varでその変数を定義しています。

４行目から１０行目のaryは連想配列。配列中の修飾子gは、replaceで使う修飾子をそのまま入れており、一致した全てを置換するという意味です。

５行目の場合、すべての「あ」は、すべて「か」に置き換えるという意味になります。これは１３行目でreplace(val, key)としているためで、keyとvalの順番をひっくり返していることが理由です。なぜこうしているのかというと、連想配列においてkeyの位置に修飾子gのついた文字をセットできないからです。

１２行目の$.each()はjQuery オブジェクトだけでなく、配列も処理できます。

１３行目のresult.replace(val,key)は、resultの内容をreplaceで置き換え、更にresultへ代入しています。

１４行目は、idが「a」のdivボックス内のテキストを、replaceによって置き換えた後にテキストとして表示するコードです。

実行結果

初期状態で「ああいうえお」と表示されている、idが「a」のdivボックス内のテキストを「変換ボタン」のクリックで「かかきくけこ」に変更します。また、クリックイベントを取り除くことでページ読み込み終了時点で変換処理されます。