JavaScriptのreplace関数で簡単置換！7つの具体例

はじめに
●replace関数とは
- ○基本構文
●使い方とサンプルコード
●注意点
まとめ

はじめに

JavaScriptのreplace関数は文字列操作において非常に重要な役割を果たします。

この記事では、初心者の方でも理解しやすいように、replace関数の使い方やサンプルコード、注意すべきポイントについて詳しく解説いたします。

実際のコードを交えながら、段階的に学んでいきましょう。

●replace関数とは

JavaScriptにおいて、replace関数は文字列を操作するための強力な機能です。

この関数を使用すると、指定したパターンに一致する文字列の一部を、別の文字列に置き換えることができます。

文字列の編集や加工が必要な場面で、非常に便利に活用できる機能となっています。

○基本構文

replace関数の基本的な構文は次の通りです。

str.replace(regexp|substr, newSubstr|function)

この構文では、最初の引数に置換対象となるパターン（正規表現または部分文字列）を指定し、第二引数に置換後の文字列または置換処理を行う関数を指定します。

●使い方とサンプルコード

replace関数の使い方は多岐にわたりますが、ここでは7つの代表的な例を挙げて、サンプルコードとともに詳しく説明していきます。

○サンプルコード1：単純な文字列置換

最も基本的な使い方として、単純に一つの文字列を別の文字列に置き換える例を見てみましょう。

const str = "Hello, world!";
const newStr = str.replace("world", "JavaScript");
console.log(newStr); // "Hello, JavaScript!"

このコードでは、”world”という文字列を”JavaScript”に置き換えています。

○サンプルコード2：正規表現を用いた置換

正規表現を使用すると、より複雑なパターンの置換が可能になります。

次の例では、空白文字をアンダースコアに置き換えています。

const str = "The quick brown fox.";
const newStr = str.replace(/\s/g, "_");
console.log(newStr); // "The_quick_brown_fox."

○サンプルコード3：グローバル置換

正規表現にグローバルフラグ（g）を付けることで、文字列内のすべての一致箇所を置換することができます。

const str = "apple orange apple grape";
const newStr = str.replace(/apple/g, "banana");
console.log(newStr); // "banana orange banana grape"

○サンプルコード4：置換関数を使用した置換

第二引数に関数を指定することで、より柔軟な置換処理が可能になります。

この例では、数字を2倍にする処理を行っています。

const str = "2 + 3 = 5";
const newStr = str.replace(/\d+/g, (match) => parseInt(match) * 2);
console.log(newStr); // "4 + 6 = 10"

○サンプルコード5：大文字と小文字の入れ替え

文字列内の大文字と小文字を入れ替える例です。

これは、文字列の変換処理の一例として参考になるでしょう。

const str = "JaVaScRiPt";
const newStr = str.replace(/[a-zA-Z]/g, (c) => c === c.toUpperCase() ? c.toLowerCase() : c.toUpperCase());
console.log(newStr); // "jAvAsCrIpT"

○サンプルコード6：特定の条件で置換

条件分岐を用いて、特定の条件を満たす場合のみ置換を行う例です。

この場合、2000円以上の金額に「(セール)」を付加しています。

const str = "1000円、2000円、3000円";
const newStr = str.replace(/\d+円/g, (match) => parseInt(match) >= 2000 ? match + "(セール)" : match);
console.log(newStr); // "1000円、2000円(セール)、3000円(セール)"

○サンプルコード7：URLパラメータの置換

URLのクエリパラメータを置換する例です。

Webアプリケーション開発でよく使用されるテクニックの一つです。

const url = "https://example.com/?search=keyword&page=1";
const newUrl = url.replace(/page=\d+/, "page=2");
console.log(newUrl); // "https://example.com/?search=keyword&page=2"

●注意点

replace関数を使用する際には、次の点に注意が必要です。

replace関数は元の文字列を直接変更せず、新しい文字列を返します。もし元の文字列を変更したい場合は、新しい文字列を再代入する必要があります。
正規表現を使用する際、グローバルフラグ（g）を付けないと、最初にマッチした部分のみが置換されます。全ての一致箇所を置換したい場合は、必ずグローバルフラグを付けるようにしましょう。