2026.02.11

【JavaScript】文字列を置換したい（replace/replaceAll）

takahide

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『文字列の置換』及び、『replaceメソッド』『replaceAllメソッド』」を紹介します。

文字列の置換というのは、「おはよう」という文字列を「こんにちは」に置き換えたい。
という時に使うアレですね。

こんな人にオススメ

JavaScriptにおける『文字列の置換』が理解できない
『replaceメソッド』『replaceAllメソッド』の記載方法を知りたい

ぜひ本記事を参考にしてください。

Contents

先頭の文字列のみを置換（replaceメソッド）
すべての文字列を置換（replaceAllメソッド）
「$」を使ったちょっと特殊な置換方法パターン
まとめ

先頭の文字列のみを置換（replaceメソッド）

まずは、先頭の文字列のみを置換する方法です。
そのような場合、『replaceメソッド』を使用します。

該当する文字列が複数あったとしても最初に該当した文字列のみが置換されます。

どういうことか分かりますか？
以下の記載例まで見ていただくとイメージ付きやすいと思います。

まずは記載方法です。

//記載方法

.replace(置換したい文字列,置換後の文字列)

//記載方法

.replace(置換したい文字列,置換後の文字列)

続けて以下が記載例です。

ちなみに記載例で出てくる「Yasuo」は、私の父の名前です。（知らんがな）

let test = "おはようTakahide! おはようYasuo!";

console.log(test.replace("おはよう", "こんにちは"));

//実行結果：こんにちはTakahide! おはようYasuo!

let test = "おはようTakahide! おはようYasuo!";

console.log(test.replace("おはよう", "こんにちは"));

//実行結果：こんにちはTakahide! おはようYasuo!

文字列内に『おはよう』は2つ存在しますが、最初の『おはよう』のみが『こんにちは』に置換されたことが分かります。

これが「先頭の文字列のみ置換している」ということです。

すべての文字列を置換（replaceAllメソッド）

続けて、すべての文字列を置換する場合を見ていきましょう。

その場合には、『replaceAllメソッド』を使用します。

該当する文字列が複数あった場合、すべての文字列が置換されます。

こちらも記載方法です。

//記載方法

.replaceAll(置換したい文字列,置換後の文字列)

//記載方法

.replaceAll(置換したい文字列,置換後の文字列)

以下が記載例です。
「replace」が「replaceAll」に変わっただけなので簡単ですね。

let test = "おはようTakahide! おはようYasuo!";

console.log(test.replaceAll("おはよう", "こんにちは"));

//実行結果：こんにちはTakahide! こんにちはYasuo!

let test = "おはようTakahide! おはようYasuo!";

console.log(test.replaceAll("おはよう", "こんにちは"));

//実行結果：こんにちはTakahide! こんにちはYasuo!

文字列内に存在する2つの『おはよう』が、どちらも『こんにちは』に置換されたことが分かります。

「$」を使ったちょっと特殊な置換方法パターン

最期に、『$』を使用した特殊な記法について説明します。
『$』は「ドル」とか「ダラーマーク」と呼ばれるやつですね

『$』を使用することで通常の『replaceメソッド』とは異なる処理を行うことができます。

■『$』による記法一覧

記法	効果
$&	一致した文字列を置換
$`	一致した文字列の前の文字列を置換
$’	一致した文字列の後の文字列を置換

「$`」と「$’」がよく似てて見間違え安いので注意が必要です。

言葉だけでは分かりにくいので以下の記載例も見ていきましょう。

let test = "おはようTakahide! おはようYasuo!";

console.log(test.replace("Takahide", "$&さん"));
//実行結果：おはようTakahideさん! おはようYasuo!

console.log(test.replace("Takahide", "$`"));
//実行結果：おはようおはよう! おはようYasuo!

console.log(test.replace("Takahide", "$'"));
//実行結果：おはよう! おはようYasuo!! おはようYasuo!

let test = "おはようTakahide! おはようYasuo!";

console.log(test.replace("Takahide", "$&さん"));
//実行結果：おはようTakahideさん! おはようYasuo!

console.log(test.replace("Takahide", "$`"));
//実行結果：おはようおはよう! おはようYasuo!

console.log(test.replace("Takahide", "$'"));
//実行結果：おはよう! おはようYasuo!! おはようYasuo!