なぜ記事を書こうと思ったか
開発の際にJavascriptのreplaceメソッドで第一引数に正規表現、第二引数に関数を使用する際の関数の引数に何の情報が入っているか分からず開発が進まない事があった為、今回replaceメソッドの引数に入る情報をまとめたいと思います。
replaceメソッドはどのような処理？
replaceメソッドは簡単に言うと、パターンに一致した部分文字列の一部またはすべてを置換文字列で置き換えた新しい文字列を返します。
簡単な例だと以下のような形です。
const greeting = "初めまして、私は田中太郎です。このクラスの田中健太君と友達です。よろしくお願いします。";
// 第一引数が文字列の場合
console.log(greeting.replace("田中", "佐藤"));
// コンソール結果("初めまして、私は佐藤太郎です。このクラスの田中健太君と友達です。よろしくお願いします。")
// 第一引数が正規表現の場合
console.log(greeting.replace(/田中/i, "佐藤"));
// コンソール結果("初めまして、私は佐藤太郎です。このクラスの田中健太君と友達です。よろしくお願いします。")
上記のreplaceメソッドは簡単に理解できると思います。自分にとってはこの後の内容が理解に苦しみました。
replaceメソッドの第二引数に関数を指定した場合について
以下にreplaceメソッドの第二引数に関数を指定した場合の例を記載致します。
function replacer(match, regexpMatch1, regexpMatch2, offset, string) {
return "{小池徹平}";
}
const introduction = "初めまして、私は田中太郎です。このクラスの{佐藤健}と友達です。よろしくお願いします。";
const newIntroduction = introduction.replace(/({佐藤([^}}]*)})/g, replacer);
console.log(newIntroduction);
// コンソール結果("初めまして、私は田中太郎です。このクラスの{小池徹平}と友達です。よろしくお願いします。")
このreplaceメソッドの第二引数のreplacerの引数に何が入っているのか分かりませんでした。
簡単に以下にreplacer関数の引数にどのような情報が入っているかまとめます。
- 第一引数(match)
replaceメソッドの第一引数の正規表現に該当する文字列を格納しています。今回の場合は"{佐藤健}"が該当します。 - 第二・第三引数(regexpMatch1・regexpMatch2)
replaceメソッドの第一引数の正規表現の()に囲まれた部分(サブパターン)を格納します。regexpMatch1には正規表現の"({佐藤([^}}])})"に該当する"{佐藤健}"が格納され、regexpMatch2には正規表現の"([^}}])"に該当する"健"が格納されています。
この第二・第三引数については、正規表現のサブパターンを指定しない場合は存在せず、今回よりも多くのサブパターンを指定する場合は第四引数、第五引数・・・と増えていきます。 - 第四引数(offset)
変数introductionの文字列で何文字目の後に正規表現が合致するかを格納します。今回の場合は21が該当します。 - 第五引数(string)
replaceメソッドをしている変数の値を格納します。今回の場合は"初めまして、私は田中太郎です。このクラスの{佐藤健}と友達です。よろしくお願いします。"が該当します。
上記に書いた事で引数にはどのような情報が格納されているか理解できると思います。
最後に
最後まで読んでいただきありがとうございました〜