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() を使えば、
特定の文字列をすべて一度に置換でき、非常に便利です。
初心者の方もこの記事を参考にして、
文字列置換を効率的に行えるように練習しましょう！
