JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScript正規表現の名前付きキャプチャグループの使い方を解説

JavaScript正規表現における名前付きキャプチャグループとは

JavaScriptでは、正規表現の一部をまとめて扱うためにグループ化を行うことができます。グループ化は、対象となる文字やパターンを丸括弧 () で囲むだけで簡単に実現できます。

さらに、ECMAScript 2018（ES9）から導入された名前付きキャプチャグループを使うと、各グループに任意の名前を付けることが可能になります。構文は (?<name>pattern) で、マッチ結果には groups.name というプロパティ経由でアクセスできます。番号ではなく名前で参照できるため、可読性と保守性の高いコードを書くのに役立ちます。

以下は、文章の中から西暦4桁の年号を抽出し、「year」という名前のキャプチャグループとして取得するサンプルです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample,.result {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>Named Capture Groups Regular Expressions</h1>
<div class="sample">The year in which I passed school was 2012.</div>
<div style="color: green;" class="result"></div>
<button class="btn">CLICK HERE</button>
<h3>
Click on the above button to extract the year using named groups
</h3>
<script>
   let sampleEle = document.querySelector(".sample").innerHTML;
   let btnEle = document.querySelector(".btn");
   let resEle = document.querySelector(".result");
   const yearRegex = /(?<year>\d{4})/;
   btnEle.addEventListener("click", () => {
      resEle.innerHTML = "The year = " + sampleEle.match(yearRegex).groups.year;
   });
</script>
</body>
</html>

出力結果

上記のコードをブラウザで表示すると、次の画面が表示されます。

JavaScript正規表現の名前付きキャプチャグループの使い方を解説

続いて、「CLICK HERE」ボタンをクリックすると、テキストから抽出された年号が緑色の領域に出力されます。

JavaScript正規表現の名前付きキャプチャグループの使い方を解説

ポイント解説

  • 基本のグループ化：丸括弧 () で囲んだ部分はキャプチャグループとなり、マッチした文字列の一部として個別に取り出すことができます。
  • 名前付きキャプチャの書き方：(?<year>\d{4}) のように ?< と > の間に名前を記述することで、そのグループに「year」というラベルを付けています。
  • 結果へのアクセス方法：String.match() の戻り値オブジェクトにある groups.year プロパティを参照すれば、名前を指定して直接値を取得できます。複数のグループがある場合でも、順番に依存しないためバグが起きにくくなります。

このように名前付きキャプチャグループを使いこなすと、日付・電話番号・URLなど構造のある文字列を解析する処理が格段に書きやすくなります。

  1. JavaScriptで名前付き引数を実現する方法｜分割代入を使ったサンプルコード付き

    JavaScriptには、Pythonなどの言語に存在するような「名前付き引数（キーワード引数）」の専用構文は用意されていません。しかし、オブジェクトの分割代入（Destructuring）とデフォルト値を組み合わせることで、名前付き引数とまったく同じ挙動を簡単に実現できます。 名前付き引数とは？ 通常のJavaScript関数は、引数を「位置（順番）」で受け取ります。この方式では、引数の数が多い場合に順番を間違えやすく、コードの可読性も低下します。 そこで、オブジェクトを1つだけ引数として渡し、そのプロパティ名で値を指定する方法がよく使われます。こうすることで、引数の順番に依存しない、意図が

  2. JavaScriptの名前付き関数式とは？実装方法と動作をわかりやすく解説

    名前付き関数式（Named Function Expression）とはJavaScriptでは、関数式に対して名前を付けることができます。これを「名前付き関数式」と呼びます。通常の無名関数式と異なり、付けた名前はその関数の内部でのみ参照可能という特徴があります。この仕組みを活用すると、以下のようなメリットがあります。関数内部から自分自身を呼び出す再帰処理が書きやすくなるデバッグ時のスタックトレースに関数名が表示され、エラー箇所の特定が容易になるサンプルコード以下は、オブジェクトのプロパティとして名前付き関数式「factorial」を定義し、階乗を計算する例です。<!DOCTYPE ht