jQueryで文字列を置換するには replace() を使用します。
raplace()の仕様は以下になります。
|
1 |
文字列オブジェクト.replace("置換対象文字", "置換後の文字") |
以下にいくつか例を示します。
例1) 文字列を普通に置換
置換したい文字列を「”(ダブルクォテーション)」で囲んで指定します。
|
1 |
replace("Nishijima", "Kitajima"); |
“Nishijima” を “Kitajima”に置換
例2）正規表現で置換
正規表現を使って置換元を選択する場合は「”」ではなく、「/(スラッシュ)」
を使用します。この「/」に囲まれた部分に正規表現を記入します。
「/」に囲まれた部分をさらに「”」で囲んではいけません。(正規表現として扱われなくなります。)
この例では、正規表現に一致した最初の1つだけ置換が行われます。正規表現に一致したものでも二番目以降のものは置換されません。
|
1 |
replace(/[0-9]/, "9"); |
最初の数字を9に置換
例3) 一致したものすべて置換
こちらの例では、一致したものすべてに対して置換が行われます。
それは、最後の「/」のすぐ後ろに”g”を付けたためです。
“g”を付けることにより”一致したものすべてを置換”という動きになります。
|
1 |
replace(/[0-9]/g, "9"); |
例4) 大文字と小文字を区別しない
何も設定しないと、置換元選択する際は大文字と小文字を区別します、
しかし、前述の”g”と同じ場所に”i”を指定することで大文字と小文字を
区別せず置換の対象とすることができます。
|
1 |
replace(/k/gi, "J"); |
以下にサンプルを示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<title>jquery</title> $(function(){ // "Nishijima" を "Kitajima"に置換 var one = $('#before .one').text().replace("Nishijima", "Kitajima"); $('#after .one').text(one); // 最初の数字を9に置換 var two = $('#before .two').text().replace(/[0-9]/, "9"); $('#after .two').text(two); // 全部の数字を9に置換 var three = $('#before .three').text().replace(/[0-9]/g, "9"); $('#after .three').text(three); // 大文字小文字を区別せず"k"を"J"に置換 var four = $('#before .four').text().replace(/k/gi, "J"); $('#after .four').text(four); }); <h3>before replace</h3> <div id="before"> Hidetoshi Nishijima Age:36 012-3456-7890 Tokyo-to Shinjuku-Ku 1-2-3-4 </div> <h3>after replace</h3> <div id="after"> </div> |
/