【JavaScript】replace()メソッドで文字列を置換する

 

置換するならreplace()。

文字列の中からパターンに一致した部分を、置換後の文字列に置き換えます。

パターンには、文字列や正規表現が使えます。

replace()メソッドの構文

構文は次のとおりです。

strは元の文字列です。

regexは、置換したい文字列または正規表現を指定できます。

substrに入れられるのは、置換後の文字列だけではありません。
関数も指定できます。
指定した文字列か、関数の戻り値に置き換わります。

また、この置換後の文字列には、特殊変数も指定できます。
使い方は、正規表現のところに記載します。

replace()メソッドで任意の文字を置換する

まずは正規表現を使わない場合から。
置換したいところを文字列で指定します。

次の例では、カフェラテをソイラテに換えてみます。

replace()メソッドで正規表現を使って置換する

次に正規表現を使って置換します。

次の例では、電話番号のハイフンをカッコに換えます。

今回は$1~$3の特殊変数を使ってみました。

使える変数は他にもいろいろあります。

埋め込む特殊変数
  • $&:マッチした部分の文字列
  • $`:マッチした部分の1つ前までの文字列
  • $’:マッチした部分の1つ後以降の文字列
  • $n:サブマッチ文字列、nは1~100の整数

グローバル検索(gフラグ)を使って2つ目以降も置換する

置換したいところが2か所以上あっても、そのままでは1つ目しか置換されません。

2つ目以降も置換対象としたい場合は、gフラグを指定します。

次の例では電話番号の箇所が2つあるため、正規表現の最後に「g」を入れています。

今回は数字と記号のみでした。

英字も含んでいて、大文字小文字を無視する場合はiフラグを使います。
gフラグと併用するなら、「/g」のところを「/gi」とします。

まとめ:replace()メソッドはとても便利

とても便利なreplace。

いろんな言語に用意されているので、「置換するならreplace」とひとまず覚えておけば良いでしょう。

何度もgoogle先生に聞いて使っているうちに、徐々に身に付いていくはずです。