JavaScriptの正規表現とRegExpオブジェクト

こんにちは、未来のプログラマーたち!今日は、JavaScriptの正規表現(RegEx)の世界に足を踏み入れる興奮的な旅を始めます。RegExについて聞いたことがない方も安心してください。基礎から始めて、少しずつ進んでいきます。このチュートリアルの終わりには、プロのようにRegExの力を振るうことができるでしょう!

JavaScript - RegExp

正規表現とは何か?

正規表現、しばしばRegExと略されますが、文字列のパターンマッチングと操作に非常に強力なツールです。これを、テキスト内のパターンを説明する特別な言語と考えてください。文字列を扱うためのスイスアーミーナイフのような存在で、多様で非常に役立ちます!

簡単な例から始めましょう:

let pattern = /hello/;
let text = "Hello, world!";
console.log(pattern.test(text));  // 出力: false

この例では、/hello/が私たちのRegExパターンで、それが"Hello, world!"にマッチするかどうかをテストしています。結果はfalseです。なぜなら、RegExはデフォルトで大文字と小文字を区別するからです。

RegExpオブジェクト

JavaScriptでは、RegExpオブジェクトを使用してRegExパターンを作成できます。以下のようにします:

let pattern1 = new RegExp("hello");
let pattern2 = /hello/;

console.log(pattern1.test("hello world"));  // 出力: true
console.log(pattern2.test("hello world"));  // 出力: true

RegExpオブジェクトを作成する这两种方法は等しいです。リテラル記法(/pattern/)はそのシンプルさからもっと一般的に使用されます。

モディファイア

モディファイアを使用すると、RegExパターンの振る舞いを変更できます。以下に一般的なモディファイアをいくつか示します:

モディファイア 説明
i 大文字小文字を区別しない
g グローバルマッチ(最初の一致だけでなくすべての一致を見つける)
m マルチラインマッチ

以下に'i'モディファイアを使用した例を示します:

let pattern = /hello/i;
let text = "Hello, World!";
console.log(pattern.test(text));  // 出力: true

今では、パターンが"Hello"に大小文字を区別せずにマッチします!

ブラケット

ブラケットは、マッチする文字のセットまたは範囲を定義するために使用されます:

ブラケット 説明
[abc] ブラケット内のいずれかの文字にマッチ
[^abc] ブラケット内のいずれかの文字以外にマッチ
[0-9] 0から9のいずれかの数字にマッチ
[a-z] aからzのいずれかの小文字にマッチ

以下に例を示します:

let pattern = /[aeiou]/;
console.log(pattern.test("hello"));  // 出力: true
console.log(pattern.test("why"));    // 出力: false

このパターンはいかなる母音にマッチします。それは"hello"で一致しますが、"why"では一致しません。

量子化子

量子化子は、どれだけのインスタンスがマッチするかを指定します:

量子化子 説明
* 0回以上のインスタンス
+ 1回以上のインスタンス
? 0回または1回のインスタンス
{n} 正確にn回のインスタンス
{n,} n回以上のインスタンス
{n,m} n回からm回のインスタンス

以下に楽しい例を示します:

let pattern = /ba+/;
console.log(pattern.test("b"));      // 出力: false
console.log(pattern.test("ba"));     // 出力: true
console.log(pattern.test("baaaa"));  // 出力: true

このパターンは"ba"に続く'a'の任意の数をマッチします。"baaaa"はまるで羊の鳴き声です!

文字リテラル

文字リテラルは、文字自体にマッチします。例えば、/hello/は正確な文字列"hello"にマッチします。

let pattern = /hello world/;
console.log(pattern.test("hello world"));  // 出力: true
console.log(pattern.test("hello earth"));  // 出力: false

メタキャラクタ

メタキャラクタには特別な意味があります:

メタキャラクタ 説明
. 任意の单一文字にマッチ
\d 任意の数字にマッチ
\D 任意の非数字にマッチ
\w 任意の単語文字にマッチ
\W 任意の非単語文字にマッチ
\s 任意の空白文字にマッチ
\S 任意の非空白文字にマッチ

以下にメタキャラクタを使用した例を示します:

let pattern = /\d{3}-\d{3}-\d{4}/;
console.log(pattern.test("123-456-7890"));  // 出力: true
console.log(pattern.test("abc-def-ghij"));  // 出力: false

このパターンは典型的なUSの電話番号フォーマットにマッチします。

RegExpプロパティ

RegExpオブジェクトにはいくつかの便利なプロパティがあります:

プロパティ 説明
global "g"フラグが設定されているか
ignoreCase "i"フラグが設定されているか
multiline "m"フラグが設定されているか
source パターンのテキスト
lastIndex 次のマッチを開始するインデックス

以下にこれらのプロパティを使用する例を示します:

let pattern = /hello/gi;
console.log(pattern.global);      // 出力: true
console.log(pattern.ignoreCase);  // 出力: true
console.log(pattern.source);      // 出力: "hello"

RegExpメソッド

最後に、RegExpオブジェクトで使用できるメソッドを見てみましょう:

メソッド 説明
exec() 文字列内でのマッチを検索実行
test() 文字列内でのマッチをテスト
toString() 正規表現の文字列表現を返す

以下にexec()メソッドを使用した例を示します:

let pattern = /\d+/g;
let text = "I have 2 apples and 3 oranges.";
let match;

while ((match = pattern.exec(text)) !== null) {
console.log(`Found ${match[0]} at index ${match.index}`);
}

// 出力:
// Found 2 at index 7
// Found 3 at index 23

このコードは、テキスト内のすべての数字を見つけてその位置を報告します。

以上です!JavaScriptの正規表現の基本をカバーしました。練習は完璧を生みます。自分でパターンを作成して試してみてください。そうすれば、すぐに文字列操作の問題を簡単に解決するためのRegExを使用できるようになります!

ハッピーコーディング、そしてあなたの正規表現が常に一致するように!

Credits: Image by storyset