replaceの文字列置換・正規表現の使い方まとめ

文字列置換と正規表現の使い方について、JavaScriptを例に挙げてまとめてみます。

【文字列置換】

文字列置換は、指定された文字列を別の文字列に置き換える操作です。

【例】

const str = "I love JavaScript."; 
const newStr = str.replace("JavaScript", "Python"); 
console.log(newStr); // "I love Python." 

上記の例では、元の文字列 str に含まれる "JavaScript" という文字列を、新しい文字列 "Python" に置き換えた結果を newStr に代入しています。console.log メソッドを使って、置換後の文字列をコンソールに出力しています。

【正規表現】

正規表現は、特定のパターンに一致する文字列を検索するための記述法です。正規表現には、様々なメタ文字が用意されており、それらを組み合わせることで複雑なパターンを表現できます。

【例】

const str = "I love JavaScript and Python.";
const pattern = /Java.+/; const newStr = str.replace(pattern, "Ruby"); 
console.log(newStr); // "I love Ruby" 

上記の例では、元の文字列 str に含まれる "Java" から始まり、その後に任意の文字が1文字以上続くパターン（"Java" の後に空白があるため、"Java" にはマッチしない）に一致する文字列を、新しい文字列 "Ruby" に置き換えた結果を newStr に代入しています。正規表現は / で囲んで表現し、 replace メソッドの第一引数に指定します。

また、正規表現を使った文字列置換では、置換の対象となる文字列が複数ある場合、 g フラグを付けることで、すべてのマッチした箇所を一度に置き換えることができます。

【例】

const str = "I love JavaScript and Java."; 
const pattern = /Java/g; const newStr = str.replace(pattern, "Ruby"); 
console.log(newStr); // "I love RubyScript and Ruby." 

上記の例では、元の文字列 str に含まれる "Java" に全てマッチするパターンに一致する文字列を、新しい文字列 "Ruby" に置き換えた結果を newStr に代入しています。gフラグを付けることで、"Java" のすべての出現箇所が置換対象となります。

※正規表現における gフラグとは、グローバル (global) フラグのことを指します。

このフラグが指定されると、マッチした箇所を全て検索し、置換処理やその他の操作を行うようになります。通常の正規表現パターンは、マッチした最初の箇所だけを置換するため、gフラグが指定されない場合は、最初にマッチした箇所だけが置換されます。

以下に例を示します。例えば、以下の文字列を考えます。

I have a cat, a dog, and a rabbit.

この文字列から、すべての "a" を "e" に置換するには、g フラグを指定する必要があります。

【例】

const str = "I have a cat, a dog, and a rabbit.";
const pattern = /a/g;
const newStr = str.replace(pattern, "e");
console.log(newStr); // "I heve e cet, e dog, end e rebbit."

上記の例では、/a/g というパターンを指定することで、文字列中の全ての "a" に一致するようになり、置換処理が全ての "a" に対して実行されます。newStr には、すべての "a" が "e" に置換された結果が格納されます。

なお、g フラグは、通常の置換処理以外にも、文字列の中からマッチする部分文字列の個数を取得するなどの処理にも役立ちます。

【正規表現】

正規表現による文字列置換では、様々なメタ文字を使うことができます。以下によく使われるメタ文字です。

• . : 任意の1文字にマッチします。
• • : 直前のパターンに一致する文字列が1回以上繰り返されることを表します。
• • : 直前のパターンに一致する文字列が0回以上繰り返されることを表します。
• ? : 直前のパターンに一致する文字列が0回または1回現れることを表します。
• [] : 括弧内の任意の1文字にマッチします。
• () : グループ化を行うために使用されます。
• ^ : 行の先頭にマッチします。
• $ : 行の末尾にマッチします。
• \d : 数字にマッチします。
• \w : 英数字、アンダースコアにマッチします。
  以下に、これらのメタ文字を使った正規表現を例として挙げます。

【例】

const str = "abc123def456"; const pattern = /\d+/g; const newStr = str.replace(pattern, "X"); console.log(newStr); // "abcXdefX" 

上記の例では、元の文字列 str に含まれる数字に全てマッチするパターンに一致する文字列を、新しい文字列 "X" に置き換えた結果を newStr に代入しています。\d メタ文字は数字にマッチするため、 /d+/ というパターンを指定することで、文字列中の数字に全てマッチします。また、 g フラグを付けることで、数字が複数ある場合に全て置換されます。
【例】

const str = "Hello, world!"; const pattern = /^H.+!$/; const newStr = str.replace(pattern, "Hi there!"); console.log(newStr); // "Hi there!" 

上記の例では、元の文字列 str が "H" で始まり、"!" で終わる行にマッチするパターンに一致する文字列を、新しい文字列 "Hi there!" に置き換えた結果を newStr に代入しています。 ^ メタ文字は行の先頭、 $ メタ文字は行の末尾にマッチするため、 /^H.+!$/ というパターンを指定することで、"Hello, world!" の行にマッチします。

【例】

const str = "The quick brown fox jumps over the lazy dog.";
const pattern = /the/gi;
const newStr = str.replace(pattern, "a");
console.log(newStr); // "a quick brown fox jumps over a lazy dog."

上記の例では、元の文字列 str に含まれる "the" という文字列にマッチするパターンに一致する文字列を、新しい文字列 "a" に置き換えた結果を newStr に代入しています。/the/gi というパターンを指定することで、"the" という文字列に大文字小文字を区別せずにマッチします。

【例】

const str = "123-456-7890";
const pattern = /(\d{3})-(\d{3})-(\d{4})/;
const newStr = str.replace(pattern, "($1) $2-$3");
console.log(newStr); // "[phone]"

上記の例では、元の文字列 str に含まれる電話番号の形式にマッチするパターンに一致する文字列を、新しい文字列の形式に置き換えた結果を newStr に代入しています。/(\d{3})-(\d{3})-(\d{4})/ というパターンを指定することで、123-456-7890 のような電話番号にマッチします。また、() メタ文字を使ってグループ化し、置換文字列の中で$1、$2、$3を使って、それぞれグループの中の文字列を取得しています。最終的に、置換文字列は ($1) $2-$3 となります。

以上が、JavaScriptでの文字列置換・正規表現の使い方のまとめとなります。正規表現は非常に強力であり、複雑な文字列の置換が可能ですが、初めて触った私ににとっては少し難しかったです。
慣れてくると、より高度な処理が可能になるようなので、皆様もぜひ試して見てください