【JavaScript】replaceメソッドを使った文字列置換｜正規表現の使い方も解説

JavaScriptのreplaceメソッドとは

JavaScriptのreplaceメソッドは、文字列の一部を別の文字列に置き換えるための非常に便利なメソッドです。これにより、特定のパターンや文字を見つけ、それを別の文字やパターンに変更することができます。

replaceメソッドは、単純な文字列の置換だけでなく、正規表現を使った高度なパターンマッチングも可能です。

replaceメソッドの使い方

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

string.replace(searchValue, newValue)

searchValueは置換する対象の文字列や正規表現パターンであり、newValueは置換後の文字列を指定します。

例えば、文字列内の最初の”world”を”JavaScript”に置き換えます。

let text = "Hello world!";
let newText = text.replace("world", "JavaScript");
console.log(newText);  

[出力イメージ]

replaceAllとの違い

replaceAllメソッドは、ES2021（ECMAScript 2021）で導入された新しいメソッドで、replaceメソッドと非常に似ていますが、いくつかの重要な違いがあります。replaceメソッドは最初にマッチした部分だけを置換するのに対して、replaceAllメソッドは文字列全体の全てのマッチ箇所を置換します。

以下にreplaceとreplaceAllの違いを示す例を紹介します。

let text = "The rain in Spain stays mainly in the plain";

// replaceメソッド：最初の"in"だけを置換
let replacedText = text.replace("in", "ON");
console.log(replacedText);   

[出力イメージ]

// replaceAllメソッド：全ての"in"を置換
let replacedAllText = text.replaceAll("in", "ON");
console.log(replacedAllText);  

[出力イメージ]

replaceメソッドでは最初の”in”だけが”ON”に置換されていますが、replaceAllメソッドでは文字列全体の全ての”in”が”ON”に置換されています。replaceAllメソッドは、置換対象が多数ある場合や、正規表現を使わずに文字列全体を簡単に置換したい場合に非常に有用です。

合わせて読みたい

replaceメソッドの正規表現置換

JavaScriptのreplaceメソッドは、正規表現と組み合わせることで、柔軟な文字列置換を実現します。

正規表現を使用することで、特定のパターンに一致する文字列を効率的に見つけて置換することが可能です。これにより、複雑な文字列操作をシンプルかつ効果的に行うことができます。

例えば、全ての小文字の”a”を大文字の”A”に置き換えたい場合、以下のように正規表現を使います。

let text = "a quick brown fox jumps over a lazy dog";
let newText = text.replace(/a/g, "A");
console.log(newText);

[出力イメージ]

上記の例では、正規表現”/a/g”を使用して、文字列内の全ての”a”を”A”に置き換えています。フラグ ”g” は「グローバル検索」を意味し、文字列全体を通して全ての一致を見つけて置換します。

また、正規表現を使って数字を全てマスクすることも簡単にできます。例えば、以下のようにして全ての数字を ”*” に置き換えることができます。

let text = "My phone number is 123-456-7890.";
let maskedText = text.replace(/\d/g, "*");
console.log(maskedText);

[出力イメージ]

上記の例では、正規表現”\d”を使用して、全ての数字を ”*”に置き換えています。フラグ”g”により、文字列全体の全ての数字が対象となります。

さらに、HTMLタグを除去する場合も正規表現が役立ちます。以下の例では、文字列から全てのHTMLタグを取り除いています。

let htmlText = "<div>Hello <b>world</b>!</div>";
let plainText = htmlText.replace(/<[^>]+>/g, "");
console.log(plainText);  

[出力イメージ]

上記の例では、正規表現”<[^>]+>”を使用して、全てのHTMLタグを空文字に置き換えています。フラグ”g”により、文字列全体の全てのタグが除去されます。

このように、正規表現を使ったreplaceメソッドは、様々な文字列操作において非常に有用です。特定のパターンを効率よく検索・置換できるため、複雑な処理も簡単に実現できます。正規表現の基本を理解し、適切に活用することで、より高度なJavaScriptでのコーディングができるようになるでしょう。

文字列の複数回置換

JavaScriptでは、文字列の中で複数の箇所を置換する必要がある場合があります。replaceメソッドとreplaceAllメソッドを使用することで、これを効率的に行うことができます。replaceメソッドでは、正規表現を用いることで複数箇所の置換が可能になり、replaceAllメソッドでは簡単に全ての一致を置換できます。

前述のコーディング例で文字列の複数回置換も使用していましたが、ここでは別例を交えながら複数回置換に焦点を当てて解説します。

replaceメソッドで複数箇所置換

replaceメソッドを使って文字列内の複数の部分を置換するには、正規表現を使用します。例えば、特定の単語の変形を置換したい場合を考えましょう。以下の例では、文章内の全ての “cat” を “dog” に、または “cats” を “dogs” に置き換えます。

let text = "The cat chased the other cats because the cat was curious.";
let newText = text.replace(/cat(s?)/g, "dog$1");
console.log(newText);  

[出力イメージ]

上記の例では、正規表現 /cat(s?)/g を使って “cat” または “cats” に一致する部分を見つけています。$1 は、正規表現のキャプチャグループを使用して、”s” を保持しています。これにより、”cat” と “cats” の両方を適切に “dog” と “dogs” に置き換えています。

replaceAllメソッドで一括置換

replaceAllメソッドは、特定の文字列リテラルの全ての出現箇所を簡単に一括で置換するための便利な方法です。以下の例では、文章内の全てのピリオド “.” をエクスクラメーションマーク “!” に置き換えます。

let text = "Hello. How are you today? It's a sunny day.";
let newText = text.replaceAll(".", "!");
console.log(newText);  

[出力イメージ]

上記の例では、replaceAllメソッドを使って、文字列内の全てのピリオドをエクスクラメーションマークに置き換えています。このメソッドは文字列リテラルの置換に特に便利で、シンプルで明確なコードを実現できます。

特定の文字を置換する方法

JavaScriptでは、特定の文字やパターンを別の文字やパターンに置き換えることがよくあります。特に、改行コードやカンマ、空白といった特定の文字を置換する方法を理解しておくと、データの整形やフォーマットに役立ちます。ここでは、これらの特定の文字を置換する方法について解説します。

改行コードの置換

改行コードは、テキストデータを扱う際によく登場する文字の一つです。特に、異なるプラットフォーム間でテキストデータをやり取りする場合、改行コードの形式が異なるため、統一する必要が生じることがあります。Windowsでは”\r\n”、UnixやLinux、macOSでは”\n”が使用されます。

改行コードを統一するために、全ての改行コードを
タグに置き換える例を示します。

let text = "Hello world!\r\nWelcome to JavaScript.\nEnjoy coding!";
let newText = text.replace(/\r?\n/g, "<br>");
console.log(newText);  

[出力イメージ]

上記の例では、正規表現”/\r?\n/g”を使用して、全ての改行コード”\r\n”および”\n”を
タグに置き換えています。”\r?”は”\r”が存在する場合としない場合の両方を網羅しています。

カンマや空白の置換

テキストデータのフォーマットを整えるために、カンマや空白を他の文字や文字列に置換することもよくあります。例えば、CSV形式のデータをスペース区切りに変換する場合や、複数の連続する空白を一つの空白にまとめる場合です。

以下に、カンマをセミコロンに置換する例を示します。

let csvText = "apple,banana,cherry,dates";
let newText = csvText.replace(/,/g, ";");
console.log(newText);  

[出力イメージ]

上記の例では、正規表現”/,/g”を使用して、全てのカンマをセミコロンに置き換えています。

次に、複数の連続する空白を一つの空白に置き換える例を示します。

let textWithSpaces = "This    is  a   text with   multiple   spaces.";
let newText = textWithSpaces.replace(/\s+/g, " ");
console.log(newText);  

[出力イメージ]

上記の例では、正規表現”/\s+/g”を使用して、複数の連続する空白（タブや改行も含む）を一つの空白に置き換えています。”\s”は空白文字を意味し、+は一つ以上の連続する空白文字に一致します。

これらの方法を活用することで、テキストデータの整形やフォーマットを効率的に行うことができます。特定の文字やパターンを適切に置き換えることで、データの一貫性と可読性を保つことができます。

replaceメソッドの応用例

JavaScriptのreplaceメソッドは、基本的な文字列置換だけでなく、さまざまな応用例があります。ここでは、文字の大文字小文字変換、全角と半角の変換、複数の対象を指定して置換する方法について具体例を交えて紹介します。

文字の大文字小文字変換

文字列の中で特定の文字を大文字や小文字に変換したい場合、replaceメソッドと正規表現を使うことで簡単に実現できます。例えば、文中のすべての小文字の”a”を大文字の”A”に変換する場合、以下のようにします。

let text = "JavaScript is an amazing language.";
let newText = text.replace(/a/g, "A");
console.log(newText);  

[出力イメージ]

上記の例では、正規表現”/a/g”を使って、すべての小文字の”a”を大文字の”A”に置き換えています。

次に、文章内の各単語の先頭文字を大文字に変換する例を示します。

let sentence = "javascript is fun and exciting.";
let capitalizedSentence = sentence.replace(/\b\w/g, char => char.toUpperCase());
console.log(capitalizedSentence);  

[出力イメージ]

上記の例では、正規表現”\b\w”を使って、各単語の先頭文字を見つけ、コールバック関数でその文字を大文字に変換しています。

全角と半角の変換

日本語の文章では、全角文字と半角文字の変換が必要になることがあります。例えば、全角の英数字を半角に変換する場合、以下のように正規表現とreplaceメソッドを使います。

let text = "ＪａｖａＳｃｒｉｐｔ　は　楽しい！";
let newText = text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, char => 
    String.fromCharCode(char.charCodeAt(0) - 0xFEE0));
console.log(newText);  

[出力イメージ]

上記の例では、正規表現 [Ａ-Ｚａ-ｚ０-９] を使って全角の英数字を検出し、それを対応する半角の文字に変換しています。

複数の対象を指定して置換

一度に複数の異なる文字列を置換する必要がある場合、複数の正規表現パターンを組み合わせることができます。例えば、文中の”cat”を”dog”に、”mouse”を”elephant”に置き換える場合、以下のようにします。

let text = "The cat and the mouse are friends.";
let newText = text.replace(/cat|mouse/g, matched => {
    if (matched === "cat") return "dog";
    if (matched === "mouse") return "elephant";
});
console.log(newText);  

[出力イメージ]

上記の例では、正規表現 cat|mouse を使って、”cat”または”mouse”に一致する部分を見つけ、それぞれを対応する新しい文字列に置き換えています。このように、replaceメソッドを活用することで、さまざまな文字列の置換を柔軟に行うことができます。

replaceメソッドを活用して文字列の置換を効率よく行おう

JavaScriptのreplaceメソッドは、文字列の操作において非常に有用です。基本的な文字列の置換から、正規表現を使用した高度な置換まで、さまざまな場面で活用できます。また、ES2021で導入されたreplaceAllメソッドを使うことで、特定の文字列リテラルを一括で置換する作業がさらに簡単になります。

本記事では、replaceメソッドとreplaceAllメソッドの基本的な使い方、正規表現を使った置換、複数回の置換方法、特定の文字（改行コード、カンマ、空白など）の置換方法、そして文字の大文字小文字変換や全角と半角の変換、複数の対象を指定して置換する応用例について詳しく解説しました。

ぜひ、当記事で学んだreplaceメソッドの活用方法をぜひ試してみてください。