JavaScript - 文字列を置換する

replace

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

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

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
19
Shares:
2
Tag:
JavaScript
コードレシピ