JavaScriptで文字列置換｜replaceメソッドの使い方

（最終更新月：2023年10月）

✔当記事は以下のような方におすすめです

✔当記事を通じて伝える内容

• JavaScript replaceの基本概念
• replaceメソッドの正確な書き方とその応用
• JavaScript replaceの実践的な例

当記事では、JavaScript replaceの基本から、さまざまなケースでの活用法まで、具体的なサンプルコードを用いて詳細に解説します。

一読を通じて、JavaScript replaceの扱い方を確実にマスターできるようになるでしょう。

ぜひ最後までご一読ください。

「replace」って何？

「replace」は、文字列の一部を新しい文字列に置き換えるためのJavaScriptのメソッドです。

• replaceとは
• replaceの構文と作用

replaceとは

「replace」は、文字列内の特定の部分を別の文字列に置き換えるメソッドです。

このメソッドを使用することで、文字列の編集やデータの整形が簡単におこなえます。

replaceの構文と作用

基本的な構文は以下のとおりです。

str.replace(検索文字列, 置換文字列);

例えば、”Hello, World!”の”World”を”Japan”に置き換える場合は、以下のようになります。

let str = "Hello, World!";
let newStr = str.replace("World", "Japan");
console.log(newStr);  // "Hello, Japan!"

「replace」の実践的な使い方

「replace」を実際に使用して、文字列置換を学びましょう。

• 基本的な文字列の置換方法
• 一度に複数の文字列を置換する方法

基本的な文字列の置換方法

「replace」を使用して、簡単な文字列置換をおこな方法です。

例えば、”apple, banana, cherry”の”banana”を”grape”に置き換える場合、以下のようにコードを書きます。

let fruits = "apple, banana, cherry";
let newFruits = fruits.replace("banana", "grape");
console.log(newFruits);  // "apple, grape, cherry"

一度に複数の文字列を置換する方法

「replace」メソッドは、デフォルトで最初に見つかった文字列のみを置き換えます。

しかし、正規表現を使用することで、一度に複数の置換も可能。

let text = "cat cat cat";
let newText = text.replace(/cat/g, "dog");
console.log(newText);  // "dog dog dog"

正規表現と「replace」

正規表現を使用することで、「replace」の機能をさらに強化できます。

• 正規表現を用いた任意文字列の置換方法
• 正規表現で複数の文字列を置換する流れ
• 特殊文字を用いた置換パターンの使い方

正規表現を用いた任意文字列の置換方法

正規表現を使用することで、特定のパターンに一致する文字列を簡単に置換できます。

以下は、すべての数字を「X」に置き換える例です。

let str = "My phone number is 123-456-7890.";
let newStr = str.replace(/\d/g, "X");
console.log(newStr);  // "My phone number is XXX-XXX-XXXX."

正規表現で複数の文字列を置換する流れ

正規表現のフラグを使用することで、一致する全文字列を置換できます。

すべての「apple」を「orange」に置き換える例。

let text = "apple pie, apple juice, apple cake";
let newText = text.replace(/apple/g, "orange");
console.log(newText);  // "orange pie, orange juice, orange cake"

特殊文字を用いた置換パターンの使い方

正規表現の中で特殊文字を使用する場合、エスケープが必要です。

ドット「.」をカンマ「,」に置き換える場合はこちら。

let sentence = "This is a sentence. Another sentence.";
let newSentence = sentence.replace(/\./g, ",");
console.log(newSentence);  // "This is a sentence, Another sentence,"

「replace」の具体的な活用例

「replace」の実際の使用例を通じて、さまざまなシチュエーションでの応用方法を学びます。

• 改行コードをHTMLタグ「<br>」に置換する方法
• 文字列内の空白をすべて削除する例
• ダブルクオートの置換手順

改行コードをHTMLタグ「<br>」に置換する方法

テキスト内の改行コードをHTMLの改行タグに置き換える例です。

let poem = "Roses are red,\nViolets are blue.";
let htmlPoem = poem.replace(/\n/g, "<br>");
console.log(htmlPoem);  // "Roses are red,<br>Violets are blue."

文字列内の空白をすべて削除する例

文字列からすべての空白を取り除く方法です。

let phrase = "   This is a    phrase.  ";
let trimmedPhrase = phrase.replace(/\s+/g, "");
console.log(trimmedPhrase);  // "Thisisaphrase."

ダブルクオートの置換手順

文字列内のダブルクオートをシングルクオートに置き換える例です。

let quote = 'He said, "Hello, World!"';
let newQuote = quote.replace(/"/g, "'");
console.log(newQuote);  // "He said, 'Hello, World!'"

特定の文字の置換: カンマ

カンマを含む文字列の操作は、データ処理やフォーマット変更において頻繁におこなわれます。

• カンマを含む文字列の全てのカンマを除去する方法
• 文字列にカンマを付与する方法

カンマを含む文字列の全てのカンマを除去する方法

カンマを完全に取り除く方法を学びます。

let data = "1,234,567";
let newData = data.replace(/,/g, "");
console.log(newData);  // "1234567"

文字列にカンマを付与する方法

数字の3桁ごとにカンマを付与する方法を学びます。

let number = "1234567";
let formattedNumber = number.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
console.log(formattedNumber);  // "1,234,567"

---

関数と「replace」

「replace」メソッドは関数と組み合わせることで、より高度な文字列操作を実現できます。

• 「replace」を関数として利用する例
• 関数利用時の注意点とアドバイス

「replace」を関数として利用する例

文字列内の数字を二倍にする例を学びます。

let str = "Increase 5 by 5 and 10 by 10.";
let newStr = str.replace(/\d+/g, function(match) {
    return match * 2;
});
console.log(newStr);  // "Increase 10 by 10 and 20 by 20."

文字列内の数値を2倍にして置き換えるものです。

関数利用時の注意点とアドバイス

「replace」メソッドと関数を組み合わせる際は、関数の戻り値が文字列であることを確認する必要があります。

また、関数内でのエラーハンドリングも重要です。

別の便利関数「split()/join()」との組み合わせ例

「replace」だけでなく、他の文字列操作メソッドとの組み合わせも非常に有効です。

以下は、文字列の置換を「split()」と「join()」でおこなう例になります。

let text = "apple orange apple";
let replacedText = text.split("apple").join("banana");
console.log(replacedText);  // "banana orange banana"

まとめ

当記事では、JavaScriptの「replace」メソッドについて学習してきました。

• 「replace」メソッドの使い方を学ぶことで、文字列操作の幅が広がります
• 正規表現と組み合わせることで、複雑な文字列操作も簡単におこなえます
• 正確な動作を期待する場合は、正規表現のパターンやフラグの理解が必要

当記事を参考に、日常のコーディング作業での文字列操作を効率的におこないましょう。

これらの例をベースに、さらに複雑な文字列操作のニーズに応じてカスタマイズして使用できます。