mozilla
Your Search Results

    String.prototype.replace()

    This translation is incomplete. Please help translate this article from English.

    replace() メソッドは、pattern にマッチした部分文字列の一部または全てを replacement で置き換えた新しい文字列を返します。pattern は文字列または RegExpreplacement は文字列または各マッチで呼び出される関数です。

    構文

    str.replace(regexp|substr, newSubStr|function[, flags])

    引数

    regexp (pattern)
    RegExp オブジェクトです。そのマッチは第二引数の戻り値によって置き換えられます。
    substr (pattern)
    newSubStr によって置き換えられる 文字列 (String) です。
    newSubStr (replacement)
    第一引数で受け取った部分文字列を置き換える文字列です。いくつかの特殊な置換パターンをサポートしています。下記の "引数としての文字列の指定" 節をご覧ください。
    function (replacement)
    (第一引数で受け取った部分文字列と置き換えるための)新しい部分文字列を生成するために実行される関数です。この関数に与えられる引数は下記の "引数としての関数の指定" 節で解説しています。
    flags

    注記: flags 引数は v8 Core (Chrome や Node.js) では機能しません。正規表現のフラグの組み合わせを指定する文字列。String.prototype.replace() における flags 引数の使用は非標準であり非推奨です。この引数の代わりに、対応するフラグを伴った RegExp オブジェクトを使ってください。この引数を使用する場合、その値は以下で述べる各作用を及ぼす文字のうち1文字以上からなる文字列である必要があります。

    g
    グローバルマッチ
    i
    大文字と小文字の違いを無視する
    m
    複数行を越えたマッチ
    y
    sticky

    返り値

    パターンにマッチした部分文字列の一部または全てを置換文字列で置き換えた新しい文字列。

    詳細

    このメソッドは、それを呼び出した String オブジェクトを変化させません。単純に新しい文字列を返します。

    グローバルな検索と置換を動作させるためには、正規表現に g フラグを含めるか、第一引数が文字列である場合には flags 引数に g を含める必要があります。

    引数としての文字列の指定

    置換文字列には以下の特殊な置換パターンを含めることができます。

    パターン 挿入
    $$ "$" を挿入します。
    $& マッチした部分文字列を挿入します。
    $` マッチした部分文字列の直前の文字列の部分を挿入します。
    $' マッチした部分文字列の直後の文字列の部分を挿入します。
    $n or $nn nnn には 10 進表現の数が入ります。第一引数が RegExp オブジェクトだった場合、n 番目の括弧でキャプチャされたサブマッチの文字列を挿入します。

    引数としての関数の指定

    第二引数として関数を指定することができます。このとき、関数はマッチが完了された後に実行されます。関数呼び出しの結果(返り値)は、置換文字列として使われます(注記: 上記の特殊な置換パターンはこの場合には適用されません)。第一引数の正規表現がグローバルだと、置換されるべきマッチごとに関数が複数回実行されうることに注意してください。

    関数に与えられる引数は次の通りです。

    名前 与えられる値
    match マッチした部分文字列(上記の $& に対応)。
    p1, p2, ... 第一引数が RegExp オブジェクトだった場合、n 番目の括弧でキャプチャされたサブマッチの文字列(上記の $1, $2, などに対応)。例えば /(\a+)(\b+)/ が与えられた場合、p1\a+ に対するマッチ、p2\b+ に対するマッチとなります。
    offset マッチした部分文字列の、分析中の文字列全体の中でのオフセット(例えば、文字列全体が 'abcd' で、マッチした部分文字列が 'bc' ならば、この引数は 1 となります)。
    string 分析中の文字列全体。

    (引数の正確な個数は、第一引数が RegExp オブジェクトかどうか、そうならばさらに括弧でキャプチャされるサブマッチがいくつ指定されているかに依ります。)

    以下の例は newString'abc - 12345 - #$*%' をセットします。

    function replacer(match, p1, p2, p3, offset, string) {
      // p1 is nondigits, p2 digits, and p3 non-alphanumerics
      return [p1, p2, p3].join(' - ');
    }
    var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
    

    replace メソッドでの global フラグと ignore フラグの使用

    以下の例において、その正規表現は、グローバルマッチのフラグ (g)と大文字と小文字の違いを無視するフラグ (i) を含んでおり、よって replace メソッドは、文字列内に出現する全ての 'apples' をそれぞれ 'oranges' に置き換えます。

    var re = /apples/gi;
    var str = "Apples are round, and apples are juicy.";
    var newstr = str.replace(re, "oranges");
    
    alert(newstr);

    以下のバージョンでは、文字列が第一引数として使用され、グローバルマッチのフラグと大文字と小文字の違いを無視するフラグは flags 引数において指定されています。

    var str = "Apples are round, and apples are juicy.";
    var newstr = str.replace("apples", "oranges", "gi");
    
    print(newstr);

    これらの例は、両方とも、"oranges are round, and oranges are juicy." を出力します。

    例: replace メソッドにおける正規表現の定義

    以下の例において、その正規表現は、replace メソッドにおいて定義され、大文字と小文字を無視するフラグを含んでいます。

    var str = "Twas the night before Xmas...";
    var newstr = str.replace(/xmas/i, "Christmas");
    
    alert(newstr); // "Twas the night before Christmas..." と出力されます。

    例: 文字列内の単語の交換

    以下のスクリプトは、文字列内の単語の位置を交換します。$1$2 を置き換えるパターンを使用しています。

    var re = /(\w+)\s(\w+)/;
    var str = "John Smith";
    var newstr = str.replace(re, "$2, $1");
    
    alert(newstr); // "Smith, John" と出力されます。

    マッチした文字を修正するインライン関数の使用

    次の例では、文字列内に出現する大文字の全ては小文字に変換され、ハイフンがマッチした位置の直前に挿入されます。ここで重要なことは、追加の操作は、マッチしたアイテムが置換されて戻される前に必要とされるということです。

    置換する関数はマッチした断片をその関数の引数として適用します。そして、その引数を大文字小文字変形し、戻り値の直前にハイフンを連結します。

    function styleHyphenFormat(propertyName) {
      function upperToHyphenLower(match) {
        return '-' + match.toLowerCase();
      }
      return propertyName.replace(/[A-Z]/, upperToHyphenLower);
    }
    
    alert( styleHyphenFormat('borderTop') ); // "border-top" と出力されます。
    
    

    最終的な置換が作成される前にサブマッチの結果 をさらに変形したい場合、関数を使わなくてはなりません。これは、toLowerCase() メソッドの前にマッチを評価することを強制します。関数無しにこれをマッチに使用した場合、その toLowerCase() メソッドは効果がないでしょう。

    var newString = propertyName.replace(/[A-Z]/, '-' + '$&'.toLowerCase());  // 動作しないでしょう

    これは、'$&'.toLowerCase() は、まずその文字がパターンとして使用される前に ('$&' という結果である ) 文字列リテラルとして評価されるだろうからです。

    華氏温度を同等の摂氏温度と置き換える

    以下の例は、ある華氏温度をそれと同等の摂氏温度と置き換えます。その華氏温度は F で終わる数でなければなりません。その関数は C で終わる摂氏を返します。例えば、入力される数が 212F である場合、その関数は 100C を返します。入力される数が 0F であった場合、その関数は -17.77777777777778C を返します。

    その正規表現 test は、任意の数が F で終わっているかチェックします。華氏温度の数は、関数の 第二引数 p1 を通して、その関数にアクセスできます。その関数は文字列内で渡された華氏温度をベースとした摂氏の数を f2c にセットします。それから、f2c は、摂氏の数を返します。この関数は Perl の s///e フラグ 【訳注: s は substitute (置換する)の略。e は evaluate(評価する)の略です。詳細は perlop の Regexp Quote-Like Operators の項※perldoc.jp による日本語訳)を参照してください。】 と似ています。

    function f2c(x) {
      function convert(str, p1, offset, s) {
        return ((p1-32) * 5/9) + "C";
      }
    
      var s = String(x);
      var test = /(\d+(?:\.\d*)?)F\b/g;
    
      return s.replace(test, convert);
    }

    仕様

    仕様書 策定状況 コメント
    ECMAScript 3rd Edition. 標準 初期定義。JavaScript 1.2 で実装される。
    ECMAScript 5.1 (ECMA-262)
    The definition of 'String.prototype.replace' in that specification.
    Standard  
    ECMAScript 6 (ECMA-262)
    The definition of 'String.prototype.replace' in that specification.
    勧告候補  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート (有) (有) (有) (有) (有)
    機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート (有) (有) (有) (有) (有) (有)

    Firefox 固有の注記

    • Gecko 27 (Firefox 27 / Thunderbird 27 / SeaMonkey 2.24) 以降、このメソッドは ECMAScript 標準に準拠するために補正されました。replace() がグローバルの正規表現とともに呼び出された場合、RegExp.lastIndex プロパティが(もし指定されていたなら)0 にリセットされます (バグ 501739)。
    • Gecko 39 (Firefox 39 / Thunderbird 39 / SeaMonkey 2.36) 以降、flags 引数は非推奨となり、コンソールに警告を投げます (バグ 1142351)。

    参照

    ドキュメントのタグと貢献者

    Contributors to this page: Potappo, teoli, ethertank, Mgjbot, mitsuba-clover
    最終更新者: mitsuba-clover,
    サイドバーを隠す