JavaScript – 文字列を全て置換：replaceAll()の基本と応用
JavaScriptを使い始めたばかりの人にとって、
文字列操作は避けて通れない重要なスキルです。
特に、特定の文字列を置換する作業は頻繁に発生します。
本記事では、
その中でも非常に便利な replaceAll() メソッドについて、
基本から応用までをわかりやすく解説します。
「replaceAll()」がどのようなメソッドなのかを理解し、
具体的な使い方を学んでいきましょう！
replaceAll()とは？
replaceAll() とは、
JavaScriptで特定の文字列を
すべて置換するためのメソッドです。
例えば、
文章中のすべての「apple」を
「orange」に置き換えたいときに使います。
通常の replace() メソッドは、
最初に見つかった1つの「apple」しか置き換えませんが、replaceAll() はその名前の通り、
すべての「apple」を置き換えてくれます。
replaceAll() の基本的な使い方
まず、replaceAll() の基本的な書き方を確認しましょう。
let newString = originalString.replaceAll('検索する文字列', '置換する文字列');
たとえば、
次のコードでは「Hello World!」という
文字列のすべての「o」を「a」に置き換えています。
let result = "Hello World!".replaceAll("o", "a");
console.log(result); // "Hella Warld!"
このように、replaceAll() を使うと
簡単に文字列を全て置換できます。
正規表現を使った文字列の置換
正規表現とは？
正規表現（せいきひょうげん）とは、
特定のパターンに一致する文字列を検索したり、
置換したりするための特別な書き方です。
例えば、「数字だけを探す」
「特定の単語が含まれているかどうかを確認する」
といった用途で使います。
replaceAll() メソッドでも正規表現を使って、
より複雑なパターンの文字列を置換することができます。
replaceAll() での正規表現の使い方
次に、replaceAll() で
正規表現を使って文字列を置換する方法を見てみましょう。
let text = "I have 2 apples and 3 bananas.";
let newText = text.replaceAll(/\d/g, "number");
console.log(newText); // "I have number apples and number bananas."
この例では、文章中のすべての数字（\d）を
「number」に置き換えています。/\d/g の「g」は「グローバル」という意味で、
文章中のすべての一致する部分を置き換えることを示しています。
エスケープが必要な文字の処理
正規表現を使う場合、
特殊文字を正しくエスケープしないと
予期せぬ結果になることがあります。
const str = "apple.banana.orange";
const replaced = str.replace(/\./g, ' ');
console.log(replaced); // "apple banana orange"上記のように、. は正規表現では「任意の文字」を意味するため、
エスケープが必要です。
※試しに「\」を消してみると、
全部の文字が置き換えられてしまいます！
実用的な置換の例
例1: 文字列の全置換
特定の文字列を全て別の文字に置き換える例です。
let text = "apple, apple, apple";
let newText = text.replaceAll("apple", "orange");
console.log(newText); // "orange, orange, orange"例2: 文字列の削除
replaceAll() を使って文字列を削除することもできます。
let text = "Hello, World!";
let newText = text.replaceAll("World", "");
console.log(newText); // "Hello, !"例3: 文字列の挿入
特定の文字列の前後に文字を挿入する方法です。
let text = "apple, banana, cherry";
let newText = text.replaceAll(", ", "-fruit-");
console.log(newText); // "apple-fruit-banana-fruit-cherry"例4: 正規表現を使った置換
次に、正規表現を使って特定のパターンを置換する例を紹介します。
let text = "cat bat rat";
let newText = text.replaceAll(/at/g, "og");
console.log(newText); // "cog bog rog"javascriptCopy codelet text = "cat bat rat";
let newText = text.replaceAll(/at/g, "og");
console.log(newText); // "cog bog rog"
このコードでは、”at” の部分をすべて “og” に置換しています。
replaceAll() と replace() の使い分け
replace() と replaceAll() の違い
replace() と replaceAll() の最大の違いは、
置換の対象となる文字列が一つだけか、
すべてかという点です。
1つだけ置き換えたい場合は replace() を、
すべてを置き換えたい場合は replaceAll() を使うと良いでしょう。
ブラウザーの互換性と仕様書の確認
ブラウザーの互換性
replaceAll() メソッドは比較的新しい機能であり、
一部の古いブラウザではサポートされていません。
したがって、replaceAll() が使用できない環境では、
正規表現や split() + join() の方法を使うことが推奨されます。
どの環境でも動作するコードを書けるように注意しましょう。
仕様書へのリンク
JavaScriptの公式仕様書には、replaceAll() やその他のメソッドの詳細が記載されています。
より深く学びたい場合は、公式の 仕様書 を参照してください。
まとめ
本記事では、
JavaScriptの replaceAll() メソッドについて
基本から応用までを解説しました。replaceAll() を使えば、
特定の文字列をすべて一度に置換でき、非常に便利です。
初心者の方もこの記事を参考にして、
文字列置換を効率的に行えるように練習しましょう！
