JavaScriptのreplaceAllを使って文字列を置換する方法

JavaScriptで文字列を扱うとき、特定の文字や文字列を別のものに置き換えたい場合がよくあります。

例えば、文章の中の誤字を修正するときや、特定の単語を別の単語に一括で変更するときなどです。

このような場合に非常に便利なのが、JavaScriptのreplaceAllメソッドです。

replaceAllメソッドは、文字列の中の特定の部分を探して、それを別の文字列で置き換える機能を提供します。

このメソッドを使うと、文字列の中で繰り返し現れるパターンや特定の文字列を一度に置換することが可能です。

この記事では、replaceAllメソッドの基本的な使い方から、もう少し進んだ使い方までを学んでいきます。

初心者の方でもわかりやすいように、具体的な例を交えながら説明していきますので、最後までご覧ください。

また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！

replaceAllを理解し、使いこなせるようになると、JavaScriptでの文字列操作がぐっと簡単に、そして効率的になります。

それでは、まずはreplaceAllとは何か、基本的な使い方から見ていきましょう。

replaceAllとは

JavaScriptのreplaceAllメソッドは、文字列の中で指定された部分文字列を全て別の文字列に置き換える機能を持っています。

これはJavaScriptのStringオブジェクトに属するメソッドで、簡単に言うと「ある文字列の中の特定の文字や単語を、別の文字や単語で一括置換する」ためのものです。

基本的な特徴

一括置換

replaceAllは、対象の文字列の中で指定した部分文字列が複数存在する場合、その全てを置き換えます。

ケースセンシティブ

このメソッドは大文字と小文字を区別します。

つまり、"Apple"と"apple"は異なる文字列として扱われます。

文字列と正規表現の使用

replaceAllでは、単純な文字列だけでなく、正規表現を使ってより柔軟な置換を行うこともできます。

replaceAllの基本的な構文

replaceAllメソッドの基本的な構文は以下の通りです。

str.replaceAll(search, replacement)

ここで、strは元の文字列、searchは置換対象の文字列、replacementは置換後の文字列を指します。

例えば、次のように使用します。

let text = "Hello World. Welcome to the programming world.";
let newText = text.replaceAll("world", "universe");
console.log(newText); // "Hello Universe. Welcome to the programming universe."

この例では、textという文字列の中の”world”という単語を”universe”に置き換えています。

ただし、replaceAllは大文字と小文字を区別するため、”World”は置換されず、”world”のみが”universe”に置き換わります。

このように、replaceAllは文字列の置換を行う際に非常に便利なメソッドです。

しかし、単純な文字列置換だけでなく、正規表現を使った複雑な置換も可能です。

正規表現を使った置換方法については後のセクションで詳しく説明します。

replaceAllとreplaceの違い

JavaScriptには文字列を置換するためのもう一つのメソッド、replaceがあります。

replaceAllとreplaceは似ているようでいて、実はいくつかの重要な違いがあります。

これらの違いを理解することは、適切な状況で正しいメソッドを選択する上で非常に重要です。

replaceメソッドの基本

replaceメソッドは、文字列の中で最初に見つかった一致する部分を置き換えます。

つまり、replaceは基本的に一度の呼び出しで一箇所のみの置換を行うという特徴があります。

例：

let text = "Hello World. Welcome to the programming world.";
let newText = text.replace("world", "universe");

console.log(newText); // "Hello Universe. Welcome to the programming world."

この例では、最初に見つかった”world”のみが”universe”に置き換わり、2番目の”world”はそのまま残ります。

replaceAllメソッドの基本

一方で、replaceAllメソッドは文字列内の全ての一致する部分を置き換えます。

例：

let text = "Hello World. Welcome to the programming world.";
let newText = text.replaceAll("world", "universe");

console.log(newText); // "Hello Universe. Welcome to the programming universe."

この例では、”world”と一致する全ての部分が”universe”に置き換わっています。

主な違い

置換範囲

replaceは最初に見つかった一致する部分のみを置き換える。

replaceAllは一致する全ての部分を置き換える。

正規表現の扱い

replaceでは、文字列だけでなく正規表現も使用できますが、グローバルフラグ(g)が必要です。

replaceAllでは、正規表現を使用する際にグローバルフラグは必要ありません。

使用するメソッドの選択

これらの違いを理解することで、置換の必要性に応じてreplaceとreplaceAllのどちらを使用するか適切に選択できます。

一箇所だけを置換したい場合はreplaceを、文字列全体を一括で置換したい場合はreplaceAllを使用すると良いでしょう。

replaceAllで正規表現を使って自由に文字列を置換する

正規表現とは

正規表現とは、文字列のパターンを表現するための一種の記法です。

簡単な例を見てみましょう。

次のような文字列があったとします。

let text = "今日は2023年12月28日です。温度は10度です。";

この文字列には、”2023″という数字や”10″という数字が含まれています。

このような文字列の中から数字を探すには、文字列の中に数字が含まれているかどうかを調べる必要があります。

このとき、正規表現を使うと非常に簡単に数字を探すことができます。

let text = "今日は2023年12月28日です。温度は10度です。";

// 数字を探す
let result = text.match(/\d+/g);
console.log(result); // ["2023", "12", "28", "10"]

この例では、matchメソッドを使って正規表現を使っています。

matchメソッドは、文字列の中で正規表現に一致する部分を探して、その部分を配列として返します。

この例では、\d+という正規表現が数字に一致するため、文字列中のすべての数字が配列として返されています。

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

次は、文字列中から「hoge2」や「hoge3」など、”hoge”という文字列に続く数字を探す例です。

let text = "hoge1, hoge2, fuga3, fuga4, fuga5, hoge6";

// "hoge"に続く数字を探す
let result = text.match(/hoge\d+/g);

console.log(result); // ["hoge1", "hoge2", "hoge6"]

この例では、hogeという文字列に続く数字を探しています。

正規表現の\d+は、数字に一致するため、”hoge”に続く数字が配列として返されています。

このように、正規表現は特定の文字列を探したり、文字列のパターンに一致する部分を置換したりするときに非常に強力なツールとなります。

例えば、”すべての数字を見つける”や”メールアドレスの形式に一致する文字列を探す”などの複雑な条件も、正規表現を使って簡単に表現できます。

replaceAllで正規表現を使うメリット

replaceAllメソッドで正規表現を使用する最大のメリットは、その柔軟性にあります。

特定の単語だけでなく、パターンにマッチするすべての文字列を置換できるため、より複雑な文字列操作が可能になります。

たとえば、さまざまな形式の日付を一つの形式に統一する、文章中のすべての電子メールアドレスを特定の文字列で隠すなど、具体的なパターンに基づいた操作が行えます。

replaceAllで正規表現を使う方法

replaceAllで正規表現を使う方法は非常にシンプルです。

まず、置換したいパターンを正規表現で定義し、それをreplaceAllメソッドの第一引数に渡します。

そして、第二引数には置換後の文字列を指定します。

例えば、文章中のすべての数字を星印（*）に置換する場合は、以下のように書きます。

let text = "今日は2023年12月28日です。温度は10度です。";
let newText = text.replaceAll(/\d+/g, "*");

console.log(newText); // "今日は*年*月*日です。温度は*度です。"

この例では、\d+という正規表現が数字に一致し、文字列中のすべての数字（2023, 12, 28, 10）が星印（*）に置き換わっています。

このように、replaceAllと正規表現を組み合わせることで、JavaScriptにおける文字列操作の幅が大きく広がります。

日常的なプログラミング作業で直面する多くの問題を、より効率的に解決することができるようになるでしょう。

replaceAllで文字列を置換する具体例

具体例1: 文字列の置換

replaceAllメソッドを使用して文字列を置換する具体的な例を見てみましょう。

これはJavaScriptでの基本的な文字列操作の一つであり、多くのシナリオで役立ちます。

シナリオ

ある文章の中にある特定の単語を別の単語で置き換えたいとします。

例えば、文章中のすべての「犬」を「猫」に置き換えるという場合です。

コード例

let originalText = "犬は人間の親友です。多くの家庭に犬がいます。";
let replacedText = originalText.replaceAll("犬", "猫");

console.log(replacedText);

実行結果

猫は人間の親友です。多くの家庭に猫がいます。

解説

このコードでは、originalTextという変数に格納された元の文章から、すべての「犬」という単語を「猫」に置き換えています。

replaceAllメソッドを使用することで、対象の文字列全体で一致する全ての部分が新しい文字列で置き換わります。

結果として、元の文章中のすべての「犬」が「猫」に変更された新しい文章が得られます。

このようにreplaceAllメソッドは、特定の文字列を別の文字列に一括して置き換える際に非常に便利です。

文章の一部を更新する、単語の誤りを修正する、あるいは特定の表現を別の表現に変更するなど、様々な場面で活用できます。

具体例2: 文字列の削除

replaceAllメソッドを使って、文字列から特定の部分を削除する例を見てみましょう。

この操作は、不要な文字や単語を文から取り除く際に役立ちます。

シナリオ

文章から特定の単語や記号を完全に取り除きたいとします。

例えば、文章中のすべての句読点を削除する場合です。

コード例

let originalText = "こんにちは、これはテスト文章です。文章には、さまざまな句読点が含まれています。";
let cleanedText = originalText.replaceAll("、", "").replaceAll("。", "");

console.log(cleanedText);

実行結果

こんにちはこれはテスト文章です文章にはさまざまな句読点が含まれています

解説

この例では、originalTextという変数に格納された元の文章から、すべての読点（「、」）と句点（「。」）を削除しています。

replaceAllメソッドを使うことで、これらの文字を空文字（””）に置き換え、実質的に削除することができます。

この方法は、特定の文字やパターンを文から完全に取り除きたい場合に非常に効果的です。

replaceAllを用いることで、単純な文字列の置換だけでなく、不要な文字やパターンの削除といったより複雑な文字列操作も簡単に行うことができます。

これは、フォーマットの統一、不要な情報の削除など、多様な状況で便利です。

具体例3: 文字列の挿入

replaceAllメソッドを用いた文字列の挿入は、特定のパターンや文字の後に新しい文字列を追加する際に便利です。

この方法は、特定の形式のデータに新しい要素を追加する場合などに役立ちます。

シナリオ

文章中の特定の単語の後に追加の文字列を挿入したいとします。

例えば、文章中のすべての名詞の後に「(名詞)」という注釈を付け加える場合です。

コード例

let originalText = "猫は食事をしている。犬は庭で遊んでいる。";
let annotatedText = originalText.replaceAll("猫", "猫(名詞)").replaceAll("犬", "犬(名詞)");

console.log(annotatedText);

実行結果

猫(名詞)は食事をしている。犬(名詞)は庭で遊んでいる。

解説

この例では、originalTextという変数に格納された元の文章から、「猫」と「犬」という単語を見つけ、それぞれの単語の後に「(名詞)」という注釈を付け加えています。

replaceAllメソッドを使用することで、特定の単語の後に新しい文字列を追加することができます。

このような使用法は、特定の単語やパターンに注目を引くための注釈を加えたり、特定の情報を強調するために追加情報を挿入する際に非常に役立ちます。

replaceAllを使えば、元の文字列を保持しつつ、必要な場所に新しい文字列を効率的に挿入することができるのです。

具体例4: 文字列の置換（正規表現）

replaceAllメソッドを用いて正規表現を使った文字列の置換を行うことは、より複雑なパターンの検出と置換に非常に効果的です。

正規表現を使用することで、単純な文字列マッチングを超えた柔軟な置換が可能になります。

シナリオ

文章中の全ての電子メールアドレスを特定の文字列で置き換えたいとします。

電子メールアドレスは多様な形式で存在するため、正規表現を用いてこれを検出し、置換することが望ましいです。

コード例

let originalText = "私のメールアドレスはexample1@example.comです。別のアドレスはexample2@example.netです。";
let maskedText = originalText.replaceAll(/\w+@\w+\.\w+/g, "[メールアドレス]");

console.log(maskedText);

実行結果

私のメールアドレスは[メールアドレス]です。別のアドレスは[メールアドレス]です。

解説

この例では、正規表現\w+@\w+\.\w+を用いて、電子メールアドレスに一致する部分を検出しています。

この正規表現は、一般的な電子メールアドレスのパターン（一つ以上の文字、続いて「@」、さらに一つ以上の文字、ピリオド「.」、そして一つ以上の文字）にマッチします。

replaceAllメソッドを使って、これらの部分を「[メールアドレス]」という文字列で一括置換しています。

このように、正規表現を使用することで、特定のパターンに一致する複数の異なる文字列を効率的に一つの文字列に置き換えることができます。

これは、機密情報のマスキング、特定のフォーマットのデータの統一、複雑なパターンの文字列操作など、多くの用途に適用できます。

具体例5: 文字列の削除（正規表現）

正規表現を用いたreplaceAllメソッドを使って、特定のパターンに一致する文字列を文から削除する方法は、複雑な条件の下でも高い効率で不要な部分を取り除くことができます。

シナリオ

文章からHTMLタグのような特定のパターンを削除したいとします。

HTMLタグは多様な形式を取り得るため、正規表現を使用してこれらを検出し、削除することが適切です。

コード例

文章中に含まれるすべてのHTMLタグを削除する場合、以下のようなコードを使用します。

let originalText = "<p>これは段落です。</p><a href='link'>リンク</a>です。";
let textWithoutTags = originalText.replaceAll(/<[^>]+>/g, "");

console.log(textWithoutTags);

実行結果

これは段落です。リンクです。

解説

この例では、正規表現<[^>]+>を用いてHTMLタグに一致する部分を検出しています。

この正規表現は、「<」で始まり、「>」で終わる任意の文字列（タグ内の文字）にマッチします。

replaceAllメソッドを使用して、これらの部分を空文字列（つまり何もない状態）で置換し、実質的に削除しています。

この方法を用いることで、文章からHTMLタグのような特定のパターンを効率的に削除し、プレーンテキストのみを抽出することができます。

これは、ウェブページのテキストから不要なものを取り除いて綺麗にするする際や、テキストデータから不要なフォーマットを取り除く際に特に有効です。

具体例6: 文字列の挿入（正規表現）

正規表現を使用したreplaceAllメソッドを利用することで、特定のパターンに基づいて文字列に新しい要素を効率的に挿入することができます。

この手法は、特定の形式やパターンを持つテキストに追加情報を挿入する際に特に有効です。

シナリオ

例として、文章中のすべての数字の後に単位（例えば「円」）を挿入したい場合を考えてみましょう。

数字はさまざまな形で表れる可能性があるため、正規表現を使用してこれらを識別し、単位を追加します。

コード例

文章中に出現するすべての数字に「円」を追加する場合、以下のようなコードを使用できます。

let originalText = "この商品の価格は1000です。割引後の価格は800になります。";
let textWithCurrency = originalText.replaceAll(/(\d+)/g, "$1円");

console.log(textWithCurrency);

実行結果

この商品の価格は1000円です。割引後の価格は800円になります。

解説

この例では、正規表現(\d+)を用いて数字に一致する部分を検出しています。

ここで\d+は一つ以上の数字を意味し、括弧()はマッチした部分をキャプチャグループとして保存します。

replaceAllメソッドでは、第二引数に$1を使用してキャプチャグループの内容（この場合はマッチした数字）を参照し、その後に「円」という文字列を追加しています。

この方法を使用することで、文中の数字に簡単に単位を追加することができます。

同様のアプローチは、テキストデータのフォーマットを変更する際や、特定のパターンに追加情報を挿入する様々なシナリオに応用可能です。

正規表現の柔軟性を活用することで、複雑なテキスト操作も簡単かつ効率的に実行できるようになります。

JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！

この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。

そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？

JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。

おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！

Muscle Coding

JavaScriptを学べるおすすめプログラミングスクールを現役エンジニアが解説 | Muscle Coding JavaScriptを学べるプログラミングスクールの中でも特におすすめのスクールを現役エンジニアが詳しく解説します。料金、給付金、受講期間、サポート、チーム開発、など、各…