正規表現を使用したJavaScriptパターンマッチング：包括的なガイド

正規表現（regex）は、JavaScriptでのパターンマッチングとテキスト操作のための強力なツールです。開発者は、定義されたパターンに基づいて文字列を検索、検証、および変換できます。このガイドでは、JavaScriptの正規表現の包括的な概要を提供し、構文、使用法、および高度なテクニックについて説明します。

正規表現とは？

正規表現は、検索パターンを定義する一連の文字です。これらのパターンは、文字列を照合および操作するために使用されます。正規表現は、次のようなタスクのプログラミングで広く使用されています。

• データ検証：ユーザー入力が特定の形式（例：メールアドレス、電話番号）に準拠していることを確認します。
• データ抽出：テキストから特定の情報を取得します（例：日付、URL、または価格の抽出）。
• 検索と置換：複雑なパターンに基づいてテキストを検索および置換します。
• テキスト処理：定義されたルールに基づいて文字列を分割、結合、または変換します。

JavaScriptでの正規表現の作成

JavaScriptでは、正規表現は次の2つの方法で作成できます。

1. 正規表現リテラルを使用する：パターンをスラッシュ（/）で囲みます。
2. RegExpコンストラクターを使用する：パターンを文字列として持つRegExpオブジェクトを作成します。

例：

// 正規表現リテラルを使用する
const regexLiteral = /hello/;

// RegExpコンストラクターを使用する
const regexConstructor = new RegExp("hello");

2つの方法の選択は、パターンがコンパイル時に既知であるか、動的に生成されるかによって異なります。パターンが固定されており、事前にわかっている場合は、リテラル表記を使用します。パターンをプログラムで構築する必要がある場合、特に変数を取り込む場合は、コンストラクターを使用します。

基本的な正規表現の構文

正規表現は、照合するパターンを表す文字で構成されます。基本的な正規表現のコンポーネントを次に示します。

• リテラル文字：文字自体に一致します（例：/a/は文字「a」に一致します）。
• メタ文字：特別な意味を持ちます（例：.、^、$、*、+、?、[]、{}、()、\、|）。
• 文字クラス：文字のセットを表します（例：[abc]は「a」、「b」、または「c」に一致します）。
• 量指定子：文字またはグループが出現する回数を指定します（例：*、+、?、{n}、{n,}、{n,m}）。
• アンカー：文字列内の位置に一致します（例：^は先頭に一致し、$は末尾に一致します）。

一般的なメタ文字：

• .（ドット）：改行を除く任意の単一文字に一致します。
• ^（キャレット）：文字列の先頭に一致します。
• $（ドル）：文字列の末尾に一致します。
• *（アスタリスク）：直前の文字またはグループの0回以上の出現に一致します。
• +（プラス）：直前の文字またはグループの1回以上の出現に一致します。
• ?（疑問符）：直前の文字またはグループの0回または1回の出現に一致します。 オプションの文字に使用されます。
• []（角かっこ）：文字クラスを定義し、かっこ内の任意の単一文字に一致します。
• {}（中かっこ）：一致する出現回数を指定します。{n}は正確にn回一致し、{n,}はn回以上一致し、{n,m}はn回からm回一致します。
• ()（かっこ）：文字をグループ化し、一致するサブストリングをキャプチャします。
• \（バックスラッシュ）：メタ文字をエスケープし、文字どおりに一致させることができます。
• |（パイプ）：「または」演算子として機能し、その前後の式のいずれかに一致します。

文字クラス：

• [abc]：文字a、b、またはcのいずれか1つに一致します。
• [^abc]：a、b、またはc *以外*の文字に一致します。
• [a-z]：aからzまでの任意の小文字に一致します。
• [A-Z]：AからZまでの任意の大文字に一致します。
• [0-9]：0から9までの任意の数字に一致します。
• [a-zA-Z0-9]：任意の英数字に一致します。
• \d：任意の数字に一致します（[0-9]と同等）。
• \D：任意の非数字文字に一致します（[^0-9]と同等）。
• \w：任意の単語文字に一致します（英数字+アンダースコア; [a-zA-Z0-9_]と同等）。
• \W：任意の非単語文字に一致します（[^a-zA-Z0-9_]と同等）。
• \s：任意の空白文字に一致します（スペース、タブ、改行など）。
• \S：任意の非空白文字に一致します。

量指定子：

• *：直前の要素の0回以上の出現に一致します。たとえば、a*は""、"a"、"aa"、"aaa"などに一致します。
• +：直前の要素の1回以上の出現に一致します。たとえば、a+は"a"、"aa"、"aaa"に一致しますが、""には一致しません。
• ?：直前の要素の0回または1回の出現に一致します。たとえば、a?は""または"a"に一致します。
• {n}：直前の要素の正確に*n*回の出現に一致します。たとえば、a{3}は"aaa"に一致します。
• {n,}：直前の要素の*n*回以上の出現に一致します。たとえば、a{2,}は"aa"、"aaa"、"aaaa"などに一致します。
• {n,m}：直前の要素の*n*回から*m*回（包括的）の出現に一致します。たとえば、a{2,4}は"aa"、"aaa"、または"aaaa"に一致します。

アンカー：

• ^：文字列の先頭に一致します。たとえば、^Helloは「Hello」で*始まる*文字列に一致します。
• $：文字列の末尾に一致します。たとえば、World$は「World」で*終わる*文字列に一致します。
• \b：単語の境界に一致します。これは、単語文字（\w）と非単語文字（\W）の間、または文字列の先頭または末尾の位置です。たとえば、\bword\bは単語全体「word」に一致します。

フラグ：

正規表現フラグは、正規表現の動作を変更します。それらは正規表現リテラルの末尾に追加されるか、RegExpコンストラクターへの2番目の引数として渡されます。

• g（グローバル）：パターンのすべての出現に一致します。最初の一致だけでなく。
• i（大文字と小文字を区別しない）：大文字と小文字を区別しない一致を実行します。
• m（複数行）：複数行モードを有効にします。このモードでは、^と$は各行の先頭と末尾（\nで区切られています）に一致します。
• s（dotAll）：ドット（.）が改行文字にも一致するようにします。
• u（unicode）：完全なUnicodeサポートを有効にします。
• y（sticky）：正規表現のlastIndexプロパティで示されるインデックスからのみ一致します。

JavaScriptの正規表現メソッド

JavaScriptには、正規表現を扱うためのいくつかのメソッドが用意されています。

• test()：文字列がパターンに一致するかどうかをテストします。trueまたはfalseを返します。
• exec()：文字列内の一致を検索します。一致したテキストとキャプチャされたグループを含む配列を返すか、一致するものが見つからない場合はnullを返します。
• match()：文字列を正規表現と照合した結果を含む配列を返します。gフラグの有無で動作が異なります。
• search()：文字列内の一致をテストします。最初の一致のインデックスを返すか、一致するものが見つからない場合は-1を返します。
• replace()：パターンの出現を、置換文字列または置換文字列を返す関数で置き換えます。
• split()：正規表現に基づいて文字列をサブストリングの配列に分割します。

正規表現メソッドを使用した例：

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // 出力：true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // 出力：["hello world", "world", index: 0, input: "hello world", groups: undefined]

// match() with 'g' flag
const regex3 = /\d+/g; // Matches one or more digits globally
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // 出力：["123", "456"]

// match() without 'g' flag
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // 出力：["123", index: 11, input: "There are 123 apples and 456 oranges.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // 出力：6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // 出力：hello JavaScript

// replace() with a function
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Today's date is 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // 出力：Today's date is 27/10/2023

// split()
const regex8 = /, /;
const str8 = "apple, banana, cherry";
const arr = str8.split(regex8);
console.log(arr); // 出力：["apple", "banana", "cherry"]

高度な正規表現のテクニック

キャプチャグループ：

かっこ()は、正規表現でキャプチャグループを作成するために使用されます。キャプチャされたグループを使用すると、一致したテキストの特定の部分を抽出できます。exec()およびmatch()メソッドは、最初 の要素が完全一致であり、後続の要素がキャプチャされたグループである配列を返します。

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // 出力：2023-10-27 (完全一致)
console.log(match[1]); // 出力：2023 (最初のキャプチャグループ - 年)
console.log(match[2]); // 出力：10 (2番目のキャプチャグループ - 月)
console.log(match[3]); // 出力：27 (3番目のキャプチャグループ - 日)

名前付きキャプチャグループ：

ES2018では、構文(?<name>...)を使用してキャプチャグループに名前を割り当てることができる名前付きキャプチャグループが導入されました。これにより、コードの可読性と保守性が向上します。

const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // 出力：2023
console.log(match.groups.month); // 出力：10
console.log(match.groups.day);   // 出力：27

非キャプチャグループ：

正規表現の一部をキャプチャせずにグループ化する必要がある場合（たとえば、グループに量指定子を適用するため）、構文(?:...)を使用して非キャプチャグループを使用できます。これにより、キャプチャされたグループに不要なメモリ割り当てが回避されます。

const regex = /(?:https?:\/\/)?([\w\.]+)/; // URLに一致しますが、ドメイン名のみをキャプチャします
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // 出力：www.example.com

先読み/後読みアサーション：

先読み/後読みアサーションは、その位置の前（後読み）または後（先読み）に続くパターンに基づいて文字列内の位置に一致するゼロ幅のアサーションであり、一致自体に先読み/後読みパターンを含めません。

• 肯定先読み：(?=...) 先読み内のパターンが現在の位置の*後*に続く場合に一致します。
• 否定先読み：(?!...) 先読み内のパターンが現在の位置の*後*に続かない場合に一致します。
• 肯定後読み：(?<=...) 後読み内のパターンが現在の位置の*前*に続く場合に一致します。
• 否定後読み：(?<!...) 後読み内のパターンが現在の位置の*前*に続かない場合に一致します。

例：

// 肯定先読み：USDが後に続く場合にのみ価格を取得します
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // 出力：["100"]

// 否定先読み：数値が後に続かない場合にのみ単語を取得します
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // 出力：null because match() only returns the first match without 'g' flag, which isn't what we need.
// to fix it:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // 出力：[ 'banana' ]

// 肯定後読み：$が前に付いている場合にのみ値を取得します
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // 出力：["200"]

// 否定後読み：単語「not」が前に付いていない場合にのみ単語を取得します
const regex5 = /(?<!not )\w+/;
const text5 = "I am not happy, I am content.";
const match5 = text5.match(regex5); //returns first match if matched, not the array
console.log(match5); // 出力：['am', index: 2, input: 'I am not happy, I am content.', groups: undefined]
// to fix it, use g flag and exec(), but be careful since regex.exec saves the index
const regex6 = /(?<!not )\w+/g;
let text6 = "I am not happy, I am content.";
let match6; let matches6=[];
while ((match6 = regex6.exec(text6)) !== null) {
  matches6.push(match6[0]);
}

console.log(matches6); // 出力：[ 'I', 'am', 'happy', 'I', 'am', 'content' ]

後方参照：

後方参照を使用すると、同じ正規表現内で以前にキャプチャされたグループを参照できます。構文\1、\2などを使用します。ここで、番号はキャプチャされたグループ番号に対応します。

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // 出力：["hello hello", "hello", index: 0, input: "hello hello world", groups: undefined]

正規表現の実用的な応用

メールアドレスの検証：

正規表現の一般的なユースケースは、メールアドレスの検証です。完璧なメール検証正規表現は非常に複雑ですが、簡単な例を次に示します。

const emailRegex = /^\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // 出力：true
console.log(emailRegex.test("invalid-email"));       // 出力：false
console.log(emailRegex.test("test@sub.example.co.uk")); // 出力：true

テキストからURLの抽出：

正規表現を使用して、テキストのブロックからURLを抽出できます。

const urlRegex = /https?:\/\/(www\\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
const text = "Visit our website at https://www.example.com or check out http://blog.example.org.";
const urls = text.match(urlRegex);
console.log(urls); // 出力：["https://www.example.com", "http://blog.example.org"]

CSVデータの解析：

正規表現を使用して、CSV（カンマ区切り値）データを解析できます。CSV文字列を値の配列に分割し、引用符で囲まれたフィールドを処理する例を次に示します。

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; //Corrected CSV regex
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // 出力：["John", "Doe", "123, Main St", "New York"]

国際電話番号の検証

国際電話番号の検証は、形式と長さが異なるため複雑です。堅牢なソリューションでは、多くの場合ライブラリを使用しますが、簡略化された正規表現で基本的な検証を提供できます。

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // 出力：true (US Example)
console.log(phoneRegex.test("+44 20 7946 0500")); // 出力：true (UK Example)
console.log(phoneRegex.test("+81 3 3224 5000"));  // 出力：true (Japan Example)
console.log(phoneRegex.test("123-456-7890"));   // 出力：false

パスワードの強度の検証

正規表現は、パスワードの強度ポリシーを適用するのに役立ちます。以下の例では、最小の長さ、大文字、小文字、および数値を確認します。

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // 出力：true
console.log(passwordRegex.test("password"));       // 出力：false (大文字または数字なし)
console.log(passwordRegex.test("Password"));       // 出力：false (数字なし)
console.log(passwordRegex.test("Pass123"));        // 出力：false (小文字なし)
console.log(passwordRegex.test("P@ss1"));          // 出力：false (8文字未満)

正規表現の最適化手法

正規表現は、特に複雑なパターンや大きな入力の場合、計算コストが高くなる可能性があります。正規表現のパフォーマンスを最適化するためのいくつかの手法を次に示します。

• 具体的にする：意図したよりも多く一致する可能性のある過度に一般的なパターンを使用しないでください。
• アンカーを使用する：可能な場合は常に、文字列の先頭または末尾に正規表現を固定します（^、$）。
• バックトラッキングを回避する：所有格量指定子（例：+の代わりに++）またはアトミックグループ（(?>...)）を適宜使用して、バックトラッキングを最小限に抑えます。
• 一度コンパイルする：同じ正規表現を複数回使用する場合は、一度コンパイルしてRegExpオブジェクトを再利用します。
• 文字クラスを賢く使用する：文字クラス（[]）は、一般的に選択肢（|）よりも高速です。
• シンプルに保つ：理解と保守が難しい過度に複雑な正規表現は避けてください。場合によっては、複雑なタスクを複数の単純な正規表現に分割したり、他の文字列操作手法を使用したりする方が効率的です。

一般的な正規表現の間違い

• メタ文字のエスケープを忘れる：.、*、+、?、$、^、(、)、[、]、{、}、|、および\などの特殊文字を、文字どおりに一致させたい場合にエスケープできませんでした。
• .（ドット）のオーバーユース：ドットは、任意の文字（一部のモードでは改行を除く）に一致します。注意して使用しないと、予期しない一致が発生する可能性があります。可能な場合は、文字クラスまたはその他のより制限的なパターンを使用して、より具体的にしてください。
• 貪欲さ：デフォルトでは、*や+などの量指定子は貪欲で、可能な限り多く一致します。可能な限り短い文字列に一致させる必要がある場合は、遅延量指定子（*?、+?）を使用します。
• アンカーの誤った使用：^（文字列/行の先頭）と$（文字列/行の末尾）の動作を誤解すると、不正確な一致につながる可能性があります。複数行の文字列を操作し、^と$を各行の先頭と末尾に一致させる場合は、m（複数行）フラグを使用することを忘れないでください。
• エッジケースの処理を怠る：考えられるすべての入力シナリオとエッジケースを考慮しないと、バグが発生する可能性があります。空の文字列、無効な文字、境界条件など、さまざまな入力で正規表現を徹底的にテストします。
• パフォーマンスの問題：過度に複雑で非効率な正規表現を構築すると、特に大きな入力の場合にパフォーマンスの問題が発生する可能性があります。より具体的なパターンを使用し、不要なバックトラッキングを回避し、繰り返し使用される正規表現をコンパイルして、正規表現を最適化します。
• 文字エンコーディングの無視：文字エンコーディング（特にUnicode）を適切に処理しないと、予期しない結果につながる可能性があります。Unicode文字を操作する場合は、uフラグを使用して、正しい一致を確認します。

結論

正規表現は、JavaScriptでのパターンマッチングとテキスト操作のための貴重なツールです。正規表現の構文とテクニックを習得すると、データ検証から複雑なテキスト処理まで、幅広い問題を効率的に解決できます。このガイドで説明されている概念を理解し、実際の例で練習することで、正規表現の使用に習熟し、JavaScript開発スキルを向上させることができます。

正規表現は複雑になる可能性があるため、regex101.comやregexr.comなどのオンラインの正規表現テスターを使用して徹底的にテストすると役立つことを忘れないでください。これにより、一致を視覚化し、問題を効果的にデバッグできます。ハッピーコーディング！