【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説

この記事では、

• 特定の文字列を別の文字列に置換する方法を知りたい
• テキスト内の全ての指定した文字や単語を置換したい
• 正規表現を使用して複雑なパターンの文字列を置換したい方法を探している
• プログラミング初心者として、replace関数の基本的な使い方を学びたい
• JavaScriptのreplace関数とreplaceAll関数の違いと使い分けについて知りたい

という悩みを抱えている向けに、

• JavaScriptでの文字列置換の基本から応用まで
• 正規表現を駆使した効率的な文字列操作
• replace関数とreplaceAll関数の違いとその使い分け

について解説していきたいと思います。

JavaScriptで文字列を操作する：replaceメソッドの解説

本セクションではJavaScriptのreplaceメソッドに焦点を当て、基本的な使い方から応用技法までを学びましょう。

replaceメソッドによる文字の置換

replaceメソッドを使用すると、文字列内の最初に見つかった部分文字列を、指定した文字列に置換することができます。以下のコードでは、"Hello world!"という文字列内の"world"を"JavaScript"に置換しています。

let str = "Hello world!";

let newStr = str.replace("world", "JavaScript");

console.log(newStr); // "Hello JavaScript!"

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

let result = str.replace(regexp|substr, newSubstr|function)

• regexp|substrは、置換対象の文字列または正規表現パターンです。
• newSubstr|functionは、置換後の文字列または置換を定義する関数です。

replaceAllメソッドによる全文字の置換

replaceAllメソッドは、指定したパターンに一致するテキストを文書全体で置換するために使用します。これはreplaceメソッドと似ていますが、全ての一致を置換する点が異なります。

以下のコードは、"World"という単語が複数回出現している文字列を置換する例です。replaceメソッドを使用した場合は1回目の"World"のみが"JavaScript"に置換されますが、replaceAllメソッドを使用した場合には全ての"World"が置換されています。

let str = "Hello World! World is wonderful.";

//replaceを使用した場合
let newStr = str.replace("World", "JavaScript");

console.log(newStr); // "Hello JavaScript! World is wonderful."

//replaceAllを使用した場合
let newStrAll = str.replaceAll("World", "JavaScript");

console.log(newStrAll); // "Hello JavaScript! JavaScript is wonderful."

正規表現を使用した柔軟な文字列置換

正規表現は、パターンマッチングとテキスト処理の強力なツールです。JavaScriptのreplaceメソッドと組み合わせることで、柔軟な置換操作が可能になります。

正規表現の基本と応用

正規表現を使用することで、特定のパターンに一致するテキストの抽出や置換が簡単に行えます。例えば、全ての空白文字を除去する場合、以下のように書けます。

let str = "Hello World! ";

let newStr = str.replace(/\s+/g, "");

console.log(newStr); // "HelloWorld!"

この例では、\s+の正規表現が1つ以上の空白文字にマッチし、gフラグが全体を対象としています。その結果、全ての空白文字が除去されます。

正規表現とgフラグを用いたグローバル置換

正規表現にg（グローバル）フラグを付けることで、テキスト内の全てのマッチに対して置換を行うことができます。これはreplaceAllメソッドと似ていますが、より柔軟なパターンを指定できるという利点があります。

let str = "The rain in SPAIN stays mainly in the plain";

let newStr = str.replace(/ain/gi, "0");

console.log(newStr); // "The r0 in SP0 stays m0ly in the pl0"

この例では、/ain/gi正規表現を使っていて、ainにマッチするすべての文字列を"0"に置換しています。iフラグは大文字小文字を区別しないことを意味します。

replaceメソッドの応用例

replaceメソッドはさまざまなシチュエーションで柔軟に活用できる非常に強力なツールです。ここでは、言語処理やデータ処理における応用例をいくつか紹介します。

文字列内の特定パターンの置換

ウェブ開発では、ユーザー入力やテキストデータのクリーニングにreplaceメソッドがよく使われます。特定のフォーマットに合わせるために、特定のパターンや不要な文字を除去するのに役立ちます。

let str = "This is an email: [email protected]";

let newStr = str.replace(/([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})/, '<a href="mailto:$1">$1</a>');

console.log(newStr); // "This is an email: <a href="mailto:[email protected]">[email protected]</a>"

この例では、Eメールアドレスに一致するパターンを、メールリンクのHTMLに置換しています。

関数を使用した動的な文字列置換

replaceメソッドには、第二引数に関数を指定することもできます。これにより、マッチした各部分に対して動的に置換文字列を生成することができます。

let str = "10 times 20 equals 200";

let newStr = str.replace(/\b(\d+)\b/g, (match, num) => Number(num) * 2);

console.log(newStr); // "20 times 40 equals 400"

このコードでは、数字に一致する部分を検出し、その数字を2倍に置換しています。

JavaScriptのreplace関数による高度な文字列操作

JavaScriptのreplace関連関数を駆使することで、編集作業やデータ処理を大幅に自動化し、効率化することができます。

改行コードの置換や空白の削除

テキストデータの整形や前処理では、不要な空白や改行の削除がしばしば必要になります。

let str = "This\nis a\nmultiline\ntext.";

let newStr = str.replace(/\n/g, " ");

console.log(newStr); // "This is a multiline text."

この例では、改行コードを単一のスペースに置換して、テキストを1行に整形しています。

数値や特殊文字の置換パターン

特定の条件に基づいた数値や特殊文字の置換も、replace関数を使って簡単に実装できます。

let str = "I have 100 dollars and 15 cents.";

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

console.log(newStr); // "I have $100 dollars and $15 cents."

このコードでは、数字に一致するすべての部分を、その前にドル記号を付加する形で置換しています。

replaceとreplaceAllの違いと使い分け

replaceメソッドとreplaceAllメソッドは似ていますが、replaceメソッドは最初に見つかった部分のみを置換し、replaceAllは文書全体のマッチするすべての部分を置換します。この違いを正しく理解し、それぞれの場面で適切に使い分けることが重要です。

replaceメソッドとreplaceAllメソッドの比較

replaceメソッドは、正規表現にgフラグを使用することでreplaceAllメソッドと同様の振る舞いをすることが可能です。しかしreplaceAllメソッドはこのフラグなしでも文書全体の置換を行います。

let str = "fooBar fooBar fooBar";

console.log(str.replace(/foo/g, "bar")); // "barBar barBar barBar"

console.log(str.replaceAll("foo", "bar")); // "barBar barBar barBar"

IE11など古いブラウザでの対応策

replaceAllメソッドは比較的新しいため、古いブラウザではサポートされていないことがあります。そのような場合、replaceメソッドと正規表現の組み合わせを利用することで同様の結果を得ることができます。

let str = "fooBar fooBar fooBar";

let newStr = str.replace(/foo/g, "bar"); // IE11でも問題なく動作する

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

また、Node.jsでreplaceAllメソッドを使用してエラーになるケースもあります。これは、replaceAllメソッドがバージョンが15からのみサポートしているためです。

このようにreplaceAllメソッドはブラウザごとに互換性が異なるので注意しましょう。以下の表は、ブラウザの互換性をまとめたものです。

参照：MDN Web Docs: String.prototype.replaceAll()

文字列操作の補助技：splitとjoinの組み合わせ

時には、replaceやreplaceAllよりもsplitとjoinを組み合わせた方が直感的に問題を解決できることがあります。これは特に、特定の文字やパターンで文字列を区切り、それぞれの部分を変換した後に再組み立てしたい場合に便利です。

splitとjoinによる置換の実例

splitは、パターンを受け取り、String をパターン検索によって部分文字列の順序付きリストに分割し、これらの部分文字列を入れた配列を返します。またjoin は Arrayインスタンスのメソッドで、配列の全要素を順に連結した新しい文字列を返します。

以下の例では、カンマで区切られた文字列内の数字を括弧で囲みます。

let str = "1,2,3,4,5";

let parts = str.split(",");

let transformedParts = parts.map(part => `(${part})`);

let newStr = transformedParts.join(",");

console.log(newStr); // "(1),(2),(3),(4),(5)"

このアプローチは、元の文字列を部分的に分解し、各部分を個別に処理してから再結合する場合に特に有用です。

JavaScriptの文字列操作は非常に強力で、データ処理からUIの動的変更まで幅広い用途に使用できます。本記事で紹介したreplaceメソッドを始めとする文字列操作の技術をマスターすることで、JavaScript開発の幅を広げることができるでしょう。