JavaScriptのreplaceメソッドを使いこなす!文字列を自在に置換する方法

当サイトでは一部リンクに広告が含まれています
アイキャッチ

JavaScriptのreplaceメソッドを使うと、文字列中の任意の文字を別の文字に置き換えることができます。

特に、正規表現と組み合わせることで、文字列の置換をより柔軟かつ効率的に行うことが可能です。

この記事では、JavaScriptのreplaceメソッドについて、以下の流れで詳しく解説します。

  • replaceメソッドの基本的な使い方
  • 正規表現を使った高度な置換方法
  • 特殊な置換パターン
  • 実用的な置換の例

初心者にもわかりやすいよう、丁寧に説明していきますので、ぜひ最後までご覧ください!

この記事を書いた人
筆者のプロフィールアイコン
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
  • プログラミングスクールのカリキュラム執筆経験あり
目次

replaceメソッドの基本的な使い方

まずは、replaceメソッドの基本的な使い方から見ていきましょう。
replaceメソッドは、文字列の中から指定した文字列を検索し、それを別の文字列に置き換えるメソッドです。

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

文字列.replace(検索する文字列, 置換後の文字列);

例えば、以下のようにして使います。

let str = "I love JavaScript!";
let newStr = str.replace("JavaScript", "TypeScript");

console.log(newStr);  // "I love TypeScript!"

この例では、文字列strの中にある”JavaScript”という文字列を、”TypeScript”に置き換えています。
置換後の文字列は、replaceメソッドの戻り値として返されるので、新しい変数newStrに代入しています。

大文字と小文字の区別

replaceメソッドは、デフォルトでは大文字と小文字を区別して検索します。
つまり、検索する文字列と完全に一致する部分だけが置換の対象になります。

let str = "I love Javascript!";
let newStr = str.replace("javascript", "TypeScript");

console.log(newStr);  // "I love Javascript!"

この例では、strの中に”javascript”(小文字)は存在しないので、置換は行われません。

複数の置換

replaceメソッドは、最初に一致した部分だけを置換します。
文字列中に同じ文字列が複数ある場合でも、最初の1つだけが置換の対象になります。

let str = "JavaScript is fun. I love JavaScript!";
let newStr = str.replace("JavaScript", "TypeScript");

console.log(newStr);  // "TypeScript is fun. I love JavaScript!"

この例では、最初の”JavaScript”だけが”TypeScript”に置換され、2つ目の”JavaScript”はそのまま残っています。

文字列中のすべての部分を置換したい場合は、正規表現を使う必要があります。これについては次の章で詳しく説明します。

正規表現を使った高度な置換方法

replaceメソッドの第1引数には、文字列だけでなく正規表現(RegExp)オブジェクトも指定できます。
これにより、より柔軟で高度な文字列の置換が可能になります。

正規表現の基本

正規表現は、/で囲んだパターンで表現します。
例えば、/hello/は”hello”という文字列にマッチする正規表現です。

let str = "Hello, world!";
let newStr = str.replace(/hello/, "Hi");

console.log(newStr);  // "Hi, world!"

正規表現では、特別な意味を持つメタ文字を使うことで、より柔軟なパターンマッチングができます。
例えば:

  • .(ドット)は任意の1文字にマッチ
  • \dは任意の数字1文字にマッチ
  • \wは任意の英数字とアンダースコア1文字にマッチ

また、量指定子を使うと、直前の文字の繰り返しを表現できます。
例えば:

  • *は直前の文字の0回以上の繰り返し
  • +は直前の文字の1回以上の繰り返し
  • {3}は直前の文字の3回の繰り返し

これらを組み合わせることで、非常に柔軟なパターンを表現できます。

let str = "abc123def456";
let newStr = str.replace(/\d+/g, "X");

console.log(newStr);  // "abcXdefX"

この例では、\d+で数字の連続にマッチし、それを”X”に置き換えています。
正規表現の後ろにあるgは、グローバルフラグといい、文字列中のすべてのマッチ部分を置換対象にします。

キャプチャグループと特殊変数

正規表現では、丸括弧()を使ってグループ化することができます。
これをキャプチャグループといい、マッチした部分を後で参照できるようにします。

キャプチャグループにマッチした部分は、特殊変数$1, $2, …で参照できます。
これを使うと、マッチした部分を置換文字列に組み込むことができます。

let str = "John Smith";
let newStr = str.replace(/(\w+)\s(\w+)/, "$2, $1");

console.log(newStr);  // "Smith, John"

この例では、正規表現/(\w+)\s(\w+)/が”John Smith”にマッチし、1つ目のキャプチャグループ(\w+)が”John”、2つ目のキャプチャグループが”Smith”にマッチします。
置換文字列"$2, $1"は、これらのキャプチャグループを入れ替えて”, “で結合しています。

関数を使った置換

replaceメソッドの第2引数には、置換文字列だけでなく関数を指定することもできます。
これにより、マッチした部分に応じて動的に置換文字列を生成できます。

let str = "abc123def456";
let newStr = str.replace(/\d+/g, function(match) {
    return match * 2;
});

console.log(newStr);  // "abc246def912"

この例では、数字の連続にマッチする正規表現に対して、マッチした部分(match)を2倍にする関数を指定しています。
これにより、”123″は”246″に、”456″は”912″に置換されます。

置換関数には、マッチした文字列だけでなく、キャプチャグループの値やマッチした位置などの情報も渡されます。
これらを活用することで、さらに高度な置換処理が可能になります。

特殊な置換パターン

replaceメソッドの置換文字列では、$記号を使っていくつかの特殊なパターンを表現できます。

よく使われるものを以下にまとめます。

パターン説明
$$$記号自体を表す
$&マッチした部分全体
$`マッチした部分の前の部分
$'マッチした部分の後ろの部分
$nn番目のキャプチャグループ(n は1以上の整数)

例えば、次のようなコードを考えてみましょう。

let str = "Hello, world!";
let newStr = str.replace(/(\w+), (\w+)!/, "$2 $1$$");

console.log(newStr);  // "world Hello$"

この例では、$2 がキャプチャグループ (\w+) の2つ目にマッチした “world” に、$1 が1つ目にマッチした “Hello” に置き換えられ、$$ が文字通りの $ 記号に置き換えられます。

もう1つ例を見てみましょう。

let str = "abc123def";
let newStr = str.replace(/\d+/, "[$&]");

console.log(newStr);  // "abc[123]def"

この例では、$& がマッチした部分全体(この場合は “123”)に置き換えられ、それが [] で囲まれます。

実用的な置換の例

ここまで、replace メソッドと正規表現の基本的な使い方を見てきました。
最後に、実際の開発でよく出てくる置換の例をいくつか紹介します。

改行コードの置換

テキストデータ中の改行コード \nbr タグに置き換えるには、次のようにします。

let str = "Hello\nworld!";
let newStr = str.replace(/\n/g, "<br>");

console.log(newStr); // "Hello<br>world!"

URLのエスケープ

URLに含まれる特殊文字(&, = など)をエスケープするには、次のようにします。

let url = "https://example.com/search?q=hello&lang=en";
url = url.replace(/[&=]/g, encodeURIComponent);

console.log(url);
// "https://example.com/search?q=hello%26lang%3Den"

この例では、URLの &=encodeURIComponent 関数でエスケープしています。

数字の3桁区切り

数字を3桁ごとにカンマで区切るには、次のようにします。

let num = "1234567890";
let formatted = num.replace(/\d{1,3}(?=(?:\d{3})+(?!\d))/g, "$&,");

console.log(formatted);  // "1,234,567,890"

この例では、少し複雑な正規表現を使っています。
\d{1,3} で3桁以下の数字の塊にマッチし、(?=(?:\d{3})+(?!\d)) という 先読みで、その後ろに3の倍数桁の数字があることを確認しています。
マッチした部分 $& の後ろにカンマを付けることで、3桁ごとにカンマが挿入されます。

まとめ

この記事では、JavaScriptの replace メソッドについて詳しく解説しました。

要点をまとめると以下のようになります。

  • replace メソッドは、文字列の一部を別の文字列で置換するメソッド
  • 第1引数に文字列または正規表現、第2引数に置換後の文字列または関数を指定
  • 正規表現を使うと、より柔軟で高度な置換が可能
  • キャプチャグループと特殊変数を活用すると、マッチした部分を置換文字列に組み込める
  • 置換文字列では、$記号を使っていくつかの特殊なパターンを表現可能
  • replace メソッドは、改行コードの置換やURLのエスケープ、数字の整形など、様々な場面で活躍

ただし、正規表現は少し複雑で、初心者には敷居が高く感じられるかもしれません。
まずはシンプルなパターンから始めて、徐々に理解を深めていくのがよいでしょう。

replace メソッドは、JavaScriptでテキスト処理をする上で非常に重要なメソッドの1つです。
正規表現の力を借りることで、非常に柔軟で強力な置換が可能になります。

この記事が、皆さんの replace メソッドと正規表現のマスターへの一助となれば幸いです。

JavaScriptを効率的に身につける勉強法は?

JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

  • JavaScript を身に付けてエンジニアになるには何をすればいい?
  • 何から勉強すればいいんだろう?
  • 効率よく勉強するには?

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか?

目次