String.replace

Read content offline

Did you know that you can read content offline by using one of these tools? If you would like to read offline MDN content in another format, let us know by commenting on Bug 665750.

Dash App

Table of Contents

  1. 概要
  2. 構文
  3. 引数
  4. 詳細
    1. 引数としての文字列の指定
    2. 引数としての関数の指定
  5. 例
    1. 例: replace メソッドでの global フラグと ignore フラグの使用
    2. 例: replace メソッドにおける正規表現の定義
    3. 例: 文字列内の単語の交換
    4. 例: マッチした文字を修正するインライン関数の使用
    5. 例: 華氏温度を同等の摂氏温度と置き換える

概要

正規表現と文字列との間のマッチを見つけ、マッチした部分文字列を新しい部分文字列に置き換えます。

String のメソッド
実装されたバージョン JavaScript 1.2
※ JavaScript 1.3: 第二引数に関数を指定できるようになった
ECMAScript エディション ECMA-262 第 3 版

構文

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

引数

regexp
RegExp オブジェクトです。そのマッチは 第二引数の戻り値によって置き換えられます。
substr
newSubStr によって置き換えられる 文字列 (String) です。
newSubStr
第一引数で受け取った部分文字列を置き換える 文字列 です。
function
（ 第一引数で受け取った部分文字列と置き換えるための）新しい部分文字列を生成するために実行される関数です。
flags
(SpiderMonkey 拡張) 正規表現のフラグの任意の組み合わせを含む 文字列 です。
g
グローバルマッチ
i
大文字と小文字の違いを無視する
m
複数行を越えたマッチ（この引数は 第一引数が文字列である場合にのみ使用されます）
y
sticky

詳細

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

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

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

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

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

引数としての関数の指定

第二引数として関数を指定するとき、その関数はマッチが完了された後に実行されます（この形式における関数の使用は、しばしばラムダ式と呼ばれます）。

指定する関数では、マッチした部分文字列を置き換える文字列を動的に作成することができます。関数呼び出しの結果は、置換する値として使われます。

ネストされた関数は、見つかった部分文字列を置き換える新しい文字列 (newSubStr) を決定するために、マッチした部分文字列を使います。指定した関数の引数を通してマッチした部分文字列が得られます。指定した関数の 第一引数はマッチした部分文字列そのものを保持します。第一引数が RegExp オブジェクトだった場合、それに続く n 個の引数は、括弧でキャプチャしたマッチによって記憶されたサブマッチの文字列として使うことができます。n には正規表現におけるサブマッチの文字列の数が入ります。最後に、最後の 2 つの引数は、そのマッチが現れた文字列内のオフセットとその文字列それ自身です。例えば、以下の replace メソッドは、 XXzzzz - XX , zzzz を返します。

function replacer(str, p1, p2, offset, s) {
  return str + " - " + p1 + " , " + p2;
}

var newString = "XXzzzz".replace(/(X*)(z*)/, 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);
}

タグ (4)