お問い合わせ
お問い合わせ
ホーム > JavaScript > JavaScriptのreplace()とは？文字列を置き換える基本と使い方を徹底解説

JavaScriptのreplace()とは？文字列を置き換える基本と使い方を徹底解説

JavaScript
JavaScriptのreplaceメソッドによる文字列の検索と置換処理を表現したイメージ（コードと変換の流れ）
JavaScriptのreplace()を使った文字列の検索と置換の仕組みを視覚的に表現したアイキャッチ画像

JavaScriptのreplace()は、文字列の一部を別の文字列に置き換えるための基本メソッドです。
検索・置換の処理は、フォーム入力の整形やデータ加工など、さまざまな場面で活用されます。

この記事では、replace()の基本から応用までを体系的に解説し、確実に使いこなせる状態を目指します。

replace()とは何か

replace()は、文字列内の特定の文字やパターンを別の文字列に置き換えるメソッドです。

基本構文

const newStr = str.replace(検索文字列または正規表現, 置換文字列);

ポイント

  • 元の文字列は変更されない（新しい文字列が返る）
  • 最初にマッチした1箇所のみ置換される（通常）

基本的な使い方

単純な文字列の置換

const str = "Hello World";
const result = str.replace("World", "JavaScript");

console.log(result); // Hello JavaScript

解説

  • "World"が"JavaScript"に置き換えられる
  • 元のstrは変更されない

すべての一致を置換する方法

通常のreplace()は、最初の1件しか置換しません。
すべて置換するには、正規表現のgフラグを使用します。

例：全置換

const str = "apple apple apple";
const result = str.replace(/apple/g, "orange");

console.log(result); // orange orange orange

ポイント

  • /apple/gのgは「global（全体）」の意味
  • すべての一致が対象になる

大文字・小文字を区別しない置換

iフラグを使うと、大文字・小文字を区別せずに置換できます。

const str = "Hello hello HELLO";
const result = str.replace(/hello/gi, "Hi");

console.log(result); // Hi Hi Hi

正規表現を使った応用

replace()は正規表現と組み合わせることで、柔軟な置換が可能になります。

数字をすべて置換

const str = "商品番号は12345です";
const result = str.replace(/\d+/g, "XXXXX");

console.log(result); // 商品番号はXXXXXです

空白を削除

const str = " a b c ";
const result = str.replace(/\s/g, "");

console.log(result); // abc

関数を使った置換（高度な使い方）

置換文字列の代わりに関数を指定すると、動的な処理が可能です。

例：数値を2倍にする

const str = "価格は100円、送料は200円";
const result = str.replace(/\d+/g, (match) => {
  return Number(match) * 2;
});

console.log(result); // 価格は200円、送料は400円

ポイント

  • matchには一致した文字列が入る
  • 条件に応じた変換が可能

replace()とreplaceAll()の違い

replace()

  • デフォルトでは最初の1件のみ置換

replaceAll()

  • すべての一致を置換（正規表現不要）
const str = "apple apple apple";
const result = str.replaceAll("apple", "orange");

console.log(result); // orange orange orange

使い分け

  • 単純な全置換 → replaceAll()
  • 柔軟な条件 → replace() + 正規表現

よくある注意点

元の文字列は変更されない

const str = "Hello";
str.replace("Hello", "Hi");

console.log(str); // Hello（変わらない）

実務での活用例

入力値の整形（スペース削除）

const input = "  test input  ";
const cleaned = input.replace(/\s+/g, "");

console.log(cleaned); // testinput

改行コードの統一

const text = "line1\r\nline2\r\nline3";
const result = text.replace(/\r\n/g, "\n");

console.log(result);

関連知識

より理解を深めるために、以下の記事もあわせて確認するのがおすすめです。

まとめ

  • replace()は文字列の一部を置き換えるメソッド
  • 通常は最初の1件のみ置換される
  • 全置換には正規表現のgフラグを使う
  • 関数を使うことで高度な処理が可能
  • 元の文字列は変更されないため再代入が必要

文字列操作はJavaScriptの基礎でありながら、実務でも頻繁に使われる重要なスキルです。
replace()を正確に理解することで、データ加工や入力処理の精度が大きく向上します。

関連記事