Nhóm bắt tên (Named Capture Groups) trong Biểu thức chính quy JavaScript

Trong JavaScript, bạn có thể nhóm một phần của biểu thức chính quy bằng cách đặt các ký tự trong cặp ngoặc đơn. Tính năng Named Capture Groups (nhóm bắt có tên) cho phép gán tên cho các nhóm này, giúp mã dễ đọc và dễ bảo trì hơn.

Ví dụ minh họa

Dưới đây là ví dụ trích xuất năm từ chuỗi văn bản bằng named capture group:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Named Capture Groups Regex</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .sample, .result { font-size: 20px; font-weight: 500; }
  </style>
</head>
<body>
  <h1>Trích xuất năm bằng Named Capture Groups</h1>
  <div class="sample">Năm tôi tốt nghiệp trung học là 2012.</div>
  <div style="color: green;" class="result"></div>
  <button class="btn">NHẤN VÀO ĐÂY</button>
  <h3> Nhấn nút trên để trích xuất năm sử dụng named groups </h3>
  <script>
    const sampleEle = document.querySelector(".sample").innerHTML;
    const btnEle = document.querySelector(".btn");
    const resEle = document.querySelector(".result");
    // Sử dụng named capture group (?<year>\d{4})
    const yearRegex = /(?<year>\d{4})/g;
    btnEle.addEventListener("click", () => {
      const match = sampleEle.match(yearRegex);
      resEle.innerHTML = "Năm = " + (match ? match[0] : "Không tìm thấy");
    });
  </script>
</body>
</html>

Kết quả

Mã trên sẽ hiển thị văn bản ban đầu. Khi nhấn nút "NHẤN VÀO ĐÂY", năm 2012 sẽ được trích xuất và hiển thị.

Lưu ý: Named capture groups sử dụng cú pháp (?<name>pattern). Kết quả trả về từ match() hoặc exec() sẽ có thuộc tính groups chứa các nhóm đã đặt tên.