JavaScript - 文字列を置換する

String.prototype.replace()

replace() メソッドは、pattern にマッチした文字列の一部またはすべてを replacement で置き換えた新しい文字列を返します。pattern は文字列、または RegExpreplacement は文字列、または各マッチで呼び出される関数です。pattern が文字列の場合、最初に一致した箇所のみを置き換えます。元の文字列は変更されません。replace() メソッドの構文は以下のとおりです。

str.replace(regexp|substr, newSubstr|function)
replace() メソッド
regexp (pattern)
RegExp オブジェクト、またはリテラルです。マッチすると、第2引数の newSubStr または function の戻り値と置き換えられます。
substr (pattern)
newSubStr に置き換えられる String です。これは逐次的な文字列として扱われ、正規表現としては解釈されません。最初に出てきたものだけが置き換えられます。
newSubStr (replacement)
regexpsubstr パラメーターで指定される部分文字列を置換する String です。
function (replacement)
新しい部分文字列を生成するために実行される関数で regexpsubstr でマッチしたものを置き換えるのに使われます。

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

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

$$
"$" を挿入します。
$&
マッチした部分文字列を挿入します。
$`
マッチした部分文字列の直前の文字列の部分を挿入します。
$'
マッチした部分文字列の直後の文字列の部分を挿入します。
$n
n100 未満の正の整数です。第1引数が RegExp オブジェクトだった場合に n 番目の括弧でキャプチャされた文字列を挿入します。

引数としての関数の指定

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

match
マッチした部分文字列です。(上記の $& に対応)
p1, p2, ...
マッチした部分文字列を挿入します。
$`
replace() の第1引数が RegExp オブジェクトだった場合、n 番目の括弧でキャプチャされたグループの文字列です。(上記の $n に対応)
offset
マッチした部分文字列の、分析中の文字列全体の中でのオフセットです。
string
分析中の文字列全体です。

replace の返り値は、パターンにマッチした部分文字列の一部またはすべてを置換文字列で置き換えた新しい文字列です。

var str = 'user_123';
var result = str.replace('_', '-');
 
console.log(result); // user-123
replace() メソッド

上記の例では、_ に置換しています。

var users = 'user_1, user_2, user_3';
var result = users.replace('_', '-');
 
console.log(result); // user-1, user_2, user_3
replace() メソッド

複数の文字列を置換する場合、最初に一致した user-1 だけが置換されており、後続の文字は置換されないことに注意してください。すべての文字列を置換するには、正規表現の g フラグを使用します。

var str = 'user_1, user_2, user_3';
 
// 正規表現に「g」フラグを追加
var result = str.replace(/_/g, '-');
 
console.log(result); // user-1, user-2, user-3
replace() メソッド

特殊文字を使った置換方法の一例として、マッチした対象の文字をキャプチャすることができます。例えば以下の例では、マッチした文字(性と名)を入れ替えるように置換しています。

var str = 'Sato Taro';
var result = str.replace(/(\w+)\s(\w+)/, '$2 $1');
 
console.log(result); // Taro Sato
replace() メソッド

正規表現に含まれる () を使うと、マッチした文字列が $n という文字列で扱うことができます。上記の例では、性が $1、名が$2 にキャプチャされており、置換後の文字列で入れ替えています。

var str = 'a, div, p';
var result = str.replace( /(a|p|div)/g, '<$&>' );
 
console.log(result); // <a>, <div>, <p>
replace() メソッド

上記の例では、特殊文字 $& を使用してマッチした対象文字をまとめて置換しています。

サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
412111
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

関連記事