JavaScriptのreplace()と正規表現で置換する方法

この記事では、JavaScriptのreplace()メソッドで正規表現にマッチした文字列を置き換える方法について見ていきたいと思います。

replace()メソッドとは

replace()メソッドは、指定した文字列を他の文字列に置き換えることができるメソッドです。

replace()メソッドの書き方

replace()メソッドで正規表現にマッチした文字列を置き換えるには次のような書き方をします。

文字列.replace(/正規表現/, 文字列)

replace()メソッドの返り値

置換後の文字列
→ 元の文字列には変更が加えられず、新しい文字列が返されます。

replace()メソッドで正規表現を用いた例

let str = "秋は英語でFallと書きます。"
let pattern = /\w+/;

let replaced = str.replace(pattern, "Autumn");

console.log(str);
console.log(replaced);

この例では、正規表現に/\w+/を用いています。

\wは半角英数字で、+は直前の文字を１回以上繰り返すという意味になりますね。

なので、\w+は、文字列に含まれる１回以上繰り返す半角英数字にマッチする文字列ということになりますね。

それをreplace()メソッドで「Autumn」に置き換えるということですね。
なので、文字列の中の「Fall」が「Autumn」に置き換わるはずです。

では見てみると、

こうですね。
元の文字列は変更されないので、半角英数字の部分は「Fall」のままで返されています。

replace()で返された文字列は、英数字の「Fall」が「Autumn」に置き換えられた文字列が返されていますね。

このようにreplace()メソッドで正規表現を用いることで、
引数に指定したパターンにマッチする部分を置き換えた文字列を返すことができます。

replace()と正規表現で置換文字のパターンを用いる方法

第２引数で指定する置換文字列には$nという特殊なパターンを含めることができます。
これは、正規表現の中の()で囲った部分にマッチする文字列を順番に格納することのできるパターンです。
それでは例を見ていきましょう。

let str = "abc ABC"
let pattern = /(\w+)\s(\w+)/;

let replaced = str.replace(pattern, "$2, $1");

console.log(replaced);

ここでは、/(\w+)\s(\w+)/という正規表現を用いています。

\wというのは全ての半角英数字という意味で、+というのは直前のパターンを１回以上繰り返すという意味になりますね。

なので、\w+は半角英数字を１回以上繰り返すという意味です。
そして、それを()で囲っているので、最初の(\w+)に最初にマッチする文字列が$1に格納され、
２番目の(\w+)に合致する文字列は$2に格納されるという形になりますね。

なので、この例では、
$1には最初に合致する「abc」が格納され、$2には２番目に合致する「ABC」が格納されということになりますね。
そして、replace()の第２引数で“$2, $1”とすることで、$1と$2の順番を入れ替えることができます。

では結果を見てみると、

こうですね。
元の文字列の「abc」と「ABC」の順番が入れ替わっていますね。

このように$nには正規表現の中で()で指定したパターンが順番に格納されていきます。

正規表現のパターンにマッチした文字列全てを置換する方法

replace()メソッドでは、通常は、置換したい文字列のうち最初にマッチした部分のみが置換されます。
なので、置換したい文字列が複数ある場合は、正規表現で置換したい文字列を指定した後にgを添えてあげる必要があります。

では例を見てみましょう。

let str = "ab!cde!fg!"
let pattern = /!/g;

let replaced = str.replace(pattern, "&");

console.log(replaced);

この例では、文字列「ab!cde!fg!」の「!」をreplace()メソッドで「&」に置き換えるという内容になっていますね。
ここで用いている正規表現は/!/gで指定しています。
正規表現の最後に「g」を添えることで、「!」を全てマッチングさせることができるわけですね。
なので、「!」はすべて「&」に置き換わっているはずです。

では結果を見てみると

こうですね。
「ab!cde!fg!」の「!」が全て「&」に置き換わっていますね。

このようにreplace()メソッドで「/正規表現/g」という形で正規表現の最後に「g」を添えることで、パターンにマッチした文字列全てを置換することができます。

正規表現のパターンにマッチした数字全てを置換する方法

let str = "ab1cde2fg3"
let pattern = /\d/g;

let replaced = str.replace(pattern, "?");

console.log(replaced);

この例では、文字列「ab1cde2fg3」のうち、正規表現/\d/gというパターンにマッチした部分を
置換するという内容になっていますね。

/\d/gについてですが、\dは全ての半角数字という意味で/正規表現/gは繰り返しマッチングを行うという意味になります。
なので、/\d/gは文字列の半角数字の部分全てという意味になり、それらが全て「?」に置き換えられるというわけですね。

では結果を見てみると、

こうですね。
文字列の数字の部分が「?」に置き換わっているのがわかりますね。

このように、replace()の第１引数を「/正規表現/g」とすることで、
正規表現で指定した検索条件に繰り返しマッチングを行い、それらを第２引数に指定した文字列で置き換えることができます。

まとめ

以上に見てきたように、
JavaScriptではreplace()メソッドと正規表現を組み合わせることで、
指定したパターンにマッチした部分を指定した文字列で置き換えることができます。