JavaScriptの文字列replace()関数：文字列を別の文字列に置き換える

定義と使い方

文字列におけるreplace()関数は
文字列の特定部分を検索し、別の文字列に置き換える（replace、置換）ための関数です。

特徴

特定の文字列または正規表現パターンを使用して、元の文字列内で対象を検索し、
検索された部分は、指定した文字列に置き換えられて返されます。
基本的には最初に一致した部分のみを置き換えますが、gフラグを持つ正規表現パターンを使用して検索すると、一致する部分が複数ある場合でもすべての一致箇所を置き換えることができます。
元の文字列は変更されません。

基本例

JavaScript

const str = "私は青色が一番好きです〜";
const replacedStr = str.replace("青色", "赤色");

console.log(replacedStr); // "私は赤色が一番好きです〜"

構文

strは、検索対象となる元の文字列です。

引数

replace()関数の引数の説明
`searchValue`	置き換え対象となる文字列を検索する方法です。検索対象として、特定の文字列または正規表現パターンを指定できます。
`newValue`	置き換える新しい文字列を指定する方法です。 `searchValue`が見つかった場合に置き換える文字列または関数を指定できます。引数に文字列を指定すると、その文字列が最初に見つかった位置で置き換えられます。引数に関数を指定すると、その関数が置き換え後の文字列を返します。

戻り値

searchValueを検索し、newValueに置き換えた新しい文字列を返します。
元の文字列は変更されません。

`searchValue`：置き換え対象となる文字列を検索する方法

検索対象となる特定の文字列または正規表現パターンを指定できます。

特定の文字列で検索する場合

特定の文字列で検索する場合、検索された文字列のうち最初に一致した部分のみを置き換えます。

JavaScript 特定の文字列を置き換え

const originalString = "こんにちは、ジャバスクリプト！ジャバスクリプト！";
const newString = originalString.replace("ジャバスクリプト", "JavaScript");

// 検索された部分は、指定した文字列に置き換えられて返されます。
// このとき、検索された文字列のうち最初に一致した部分のみが置き換えられます。
console.log(newString); // 出力：こんにちは、JavaScript！ジャバスクリプト！

// 元の文字列は変更されません。
console.log(originalString); // 出力："こんにちは、ジャバスクリプト！ジャバスクリプト！"

正規表現パターンで検索する場合

JavaScript 正規表現パターンを使用した置き換え

const originalString = "私の年齢は20歳です。";
const newString = originalString.replace(/\d+/, "**");
// \d+は1つ以上の数字を表す正規表現です。

// 検索された部分は、指定した文字列に置き換えられて返されます。
console.log(newString); // 出力：私の年齢は**歳です。

// 元の文字列は変更されません。
console.log(originalString); // 出力："私の年齢は20歳です。"

正規表現パターンも、検索された文字列のうち最初に一致した部分のみを置き換えます。
ただし、gフラグを持つ正規表現パターンを使用すると、すべての一致箇所を置き換えることができます。

gフラグのgはglobalを意味し、文字列内のすべての一致パターンをグローバルに検索して置き換えることを表します。

JavaScript

const text = "apple banana apple";

// gフラグを使用
const result = text.replace(/apple/g, "orange");
console.log(result);  // 出力："orange banana orange"

// gフラグを使用しない
const resulNotg = text.replace(/apple/, "orange");
console.log(resulNotg);  // 出力："orange banana apple"

gフラグを使用した上記のコードでは、正規表現/apple/gによってgフラグを設定しているため、文字列内のすべての"apple"を"orange"に置き換えます。

`newValue`：置き換える新しい文字列を指定する方法

searchValueが見つかった際に置き換える文字列または関数を指定できます。

文字列を指定する場合

文字列を指定した場合、指定した文字列に置き換えられて返されます。

JavaScript newValue引数に文字列を指定した場合の例

const originalString = "こんにちは、JavaScript！";
const newString = originalString.replace("JavaScript", "ジャバスクリプト");

console.log(newString); // 出力："こんにちは、ジャバスクリプト！"

関数を指定する場合

関数を指定した場合、この関数は一致した各項目ごとに呼び出され、戻り値が置き換え用の文字列として使用されます。

JavaScript newValue引数に関数を指定した場合の例

const originalString = "こんにちは、JavaScript！";
const newString = originalString.replace("JavaScript", function(match) {
    // matchはreplace()関数が検索した部分文字列全体です。
    return match.toUpperCase();
});

console.log(newString); // 出力："こんにちは、JAVASCRIPT！"

ここでmatchはreplace()関数が検索した部分文字列全体を表し、toUpperCase()関数を使用して文字列を大文字に変換して返しています。

newValue引数に関数を指定した場合のシグニチャは次のとおりです。

ここで、各引数の役割は次のとおりです。

`match`	検索された部分文字列全体です。
`p1, p2, ..., pN`	正規表現で括弧に囲まれた各グループに対応する部分文字列です。
`offset`	`match`が見つかった文字列の開始位置（index）です。
`string`	元の文字列全体です。
`groups`	正規表現における名前付きグループに対応するオブジェクトです。（`/(a)(?<b>c)/`のように名前付きグループがある場合にのみ存在します。）

また、この関数では置き換える値を返します。この返された値がreplace()関数によって置き換えられます。この仕組みを活用することで、マッチした部分に対する動的な置き換えロジックを簡単に実装できます。

これに関連した例があります。次の「電話番号を形式に合わせて変換する例」を通して、各引数の役割を確認してみてください。

JavaScript

const phoneNumber = "123-456-7890"; 
const re = /(\d{3})-(\d{3})-(\d{4})/;
// (\d{3}): 数字3桁に対応するグループ。括弧で囲まれているため、この部分は最初のグループ
// (\d{3}): 2番目のグループで、再び3桁に対応するグループ
// (\d{4}): 3番目のグループで、数字4桁に対応

const formattedNumber = phoneNumber.replace(re, function(match, areaCode, prefix, lineNumber) {
    // match: 現在検索された部分文字列全体（例：123-456-7890）
    // areaCode: 最初のグループに対応する地域コード（例：123）
    // prefix: 2番目のグループに対応する接頭番号（例：456）
    // lineNumber: 3番目のグループに対応するライン番号（例：7890）
    
    return `+1 (${areaCode}) ${prefix}-${lineNumber}`;
});

console.log(formattedNumber);
// 出力："+1 (123) 456-7890"

この例では、正規表現(\d{3})-(\d{3})-(\d{4})を使用して電話番号の各部分をグループ化し、コールバック関数でこれらのグループを利用して電話番号を別の形式に変換しています。結果として、"123-456-7890"が"+1 (123) 456-7890"のように置き換えられた形式に変更されます。

参考してください！
正規表現は強力で柔軟な文字列検索・変換のツールですが、その表現自体がやや抽象的であるため、最初は理解しにくい場合があります。特に複雑なパターンやメタ文字の多様な使用は、初心者にとって混乱のもとになることがあります。最初は難しく感じるかもしれませんが、適切なドキュメントや学習資料を参考にしながら、ゆっくり学習すれば問題ありません。

活用例

さまざまな状況でreplace()関数を有効に活用できます。以下はいくつかの例です。

メールアドレスの一部を隠す

JavaScript

const email = "john.doe@example.com";
const hiddenEmail = email.replace(/(?<=.{3})[^@](?=[^@]*@)/g, "*");

console.log(hiddenEmail);
// 出力："joh*************@example.com"

この例では、メールアドレスの最初の3文字を除き、すべての文字を*に置き換えて隠しています。
このとき、正規表現の(?<=.{3})は3文字前の位置を示し、(?=[^@]*@)は後ろに@が現れる前の位置を示します。

HTMLタグを削除する

JavaScript

const htmlString = "<p>Hello, <strong>world</strong>!</p>";
const plainText = htmlString.replace(/<[^>]*>/g, "");

console.log(plainText);
// 出力："Hello, world!"

この例では、HTML文字列からタグを削除して、純粋なテキストのみを残しています。正規表現<[^>]*>は、<で始まり>で終わるパターンを検索してすべて削除します。

単語を置き換える

JavaScript

const sentence = "JavaScript is fun!";
const replacedSentence = sentence.replace("JavaScript", "TypeScript");

console.log(replacedSentence);
// 出力："TypeScript is fun!"

この例では、簡単な文字列置換を行っています。replace()関数を使用して、"JavaScript"を"TypeScript"に置き換えています。その結果、"TypeScript is fun!"という新しい文が出力されます。このような簡単な形式の置換は、日常的な文字列操作でよく活用できます。