jQueryで文字列を置換したい!

jQueryで文字列を置換するには replace() を使用します。

raplace()の仕様は以下になります。

文字列オブジェクト.replace("置換対象文字", "置換後の文字")

以下にいくつか例を示します。

例1) 文字列を普通に置換
置換したい文字列を「”(ダブルクォテーション)」で囲んで指定します。

replace("Nishijima", "Kitajima");

“Nishijima” を “Kitajima”に置換

例2)正規表現で置換
正規表現を使って置換元を選択する場合は「”」ではなく、「/(スラッシュ)」
を使用します。この「/」に囲まれた部分に正規表現を記入します。
「/」に囲まれた部分をさらに「”」で囲んではいけません。(正規表現として扱われなくなります。)
この例では、正規表現に一致した最初の1つだけ置換が行われます。正規表現に一致したものでも二番目以降のものは置換されません。

replace(/[0-9]/, "9");

最初の数字を9に置換

例3) 一致したものすべて置換
こちらの例では、一致したものすべてに対して置換が行われます。
それは、最後の「/」のすぐ後ろに”g”を付けたためです。
“g”を付けることにより”一致したものすべてを置換”という動きになります。

replace(/[0-9]/g, "9");

例4) 大文字と小文字を区別しない
何も設定しないと、置換元選択する際は大文字と小文字を区別します、
しかし、前述の”g”と同じ場所に”i”を指定することで大文字と小文字を
区別せず置換の対象とすることができます。

replace(/k/gi, "J");

以下にサンプルを示します。






$(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);
});




before replace

Hidetoshi Nishijima

Age:36

012-3456-7890

Tokyo-to Shinjuku-Ku 1-2-3-4

after replace