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

JavaScriptのreplace関数で文字列の置換を行うイメージJS
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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関数を使えば、簡単に文字列の置換を行うことができます。

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