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

はじめに

この記事を読めば、JavaScriptのreplace関数を使って文字列の置換を簡単に行えるようになります。

具体的な使い方やサンプルコード、注意点を初心者向けにわかりやすく解説します。

●replace関数とは

replace関数は、JavaScriptの文字列操作の一つで、指定したパターンに一致する部分を別の文字列に置き換える機能を提供しています。

○基本構文

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

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

さまざまな使い方がありますが、ここでは7つの典型的な例をサンプルコードとともに紹介します。

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

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

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

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

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

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

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

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：特定の条件で置換

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パラメータの置換

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関数は元の文字列を変更せず、新しい文字列を返します。
  元の文字列を変更したい場合は、新しい文字列を再代入してください。
• 正規表現にはグローバルフラグ「g」をつけることで、全てのマッチする部分を置換できます。
  グローバルフラグをつけない場合、最初にマッチした部分のみが置換されます。

まとめ

この記事では、JavaScriptのreplace関数の使い方、サンプルコード、注意点を初心者向けにわかりやすく解説しました。

replace関数を使えば、簡単に文字列の置換を行うことができます。

ぜひ実際にコードを書いて、さまざまな置換処理を試してみてください。