Các Modifier (Flags) trong Biểu thức chính quy JavaScript

Regex Modifiers (Flags) là các tùy chọn thay đổi hành vi khớp của biểu thức chính quy. Đặt sau dấu `/` cuối cùng: /pattern/flags.

3 Modifier chuẩn (Standard Flags):

Các Modifier mở rộng (ES2018+):

Ví dụ minh họa

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Regex Modifiers JS</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .sample, .result { font-size: 18px; font-weight: 500; margin: 10px 0; }
    button { padding: 8px 16px; cursor: pointer; }
    pre { background: #f5f5f5; padding: 10px; }
  </style>
</head>
<body>
  <h1>JavaScript Regular Expression Modifiers</h1>
  <div class="sample" id="sample"></div>
  <div style="color: green;" class="result" id="result"></div>
  <button class="Btn" id="btn">NHẤN VÀO ĐÂY</button>
  <h3> Nhấn nút để xem các modifier hoạt động trên chuỗi </h3>
  <script>
    const sampleEle = document.querySelector('#sample');
    const resEle = document.querySelector('#result');
    const str = '\nHello world. This is a beautiful world';
    sampleEle.innerHTML = `Chuỗi: "${str.replace(/\n/g, '\\n')}"`;
    
    document.querySelector("#btn").addEventListener("click", () => {
      // m: multiline - ^ khớp đầu dòng (sau \n)
      resEle.innerHTML = `/^Hello/m = ${JSON.stringify(str.match(/^Hello/m))}
`;
      
      // g: global - tìm tất cả "world"
      resEle.innerHTML += `/world/g = ${JSON.stringify(str.match(/world/g))}
`;
      
      // i: case insensitive - tìm "WORLD" khớp "world"
      resEle.innerHTML += `/WORLD/i = ${JSON.stringify(str.match(/WORLD/i))}
`;
      
      // s: dotAll - . khớp newline
      resEle.innerHTML += `/^.*/s = ${JSON.stringify(str.match(/^.*/s))}
`;
      
      // u: unicode - emoji
      const emojiStr = "😀😃";
      resEle.innerHTML += `
Unicode flag u: /😀/u = ${JSON.stringify(emojiStr.match(/😀/u))}
`;
      
      // Kết hợp flags: gi, gim, gimus...
      resEle.innerHTML += `
Kết hợp /WORLD/gi = ${JSON.stringify(str.match(/WORLD/gi))}`;
    });
  </script>
</body>
</html>

Kết quả

/^Hello/m = ["Hello"]
/world/g = ["world", "world"]
/WORLD/i = ["world"]
/^.*/s = ["\nHello world. This is a beautiful world"]
Unicode flag u: /😀/u = ["😀"]
Kết hợp /WORLD/gi = ["world", "world"]

Chi tiết từng flag:

g - Global

"ababa".match(/aba/);    // ["aba"] (chỉ 1)
"ababa".match(/aba/g);   // ["aba"] (vẫn 1 - overlap không khớp)
"ababa".match(/ab/g);    // ["ab", "ab"] (2 matches)

i - Case Insensitive

/HELLO/i.test("hello"); // true
/[A-Z]/i.test("z");     // true

m - Multiline

const multi = "line1\nline2\nline3";
/^line2/.test(multi);    // false (^ chỉ khớp đầu chuỗi)
/^line2/m.test(multi);   // true (^ khớp đầu dòng)

s - DotAll (ES2018)

/^.$/.test("\n");       // false (. không khớp \n)
/^.$/s.test("\n");      // true (. khớp \n với flag s)

u - Unicode (ES2015)

"😀".length;           // 2 (surrogate pair)
/^.$/.test("😀");       // false (khớp 1 code unit)
/^.$/u.test("😀");      // true (khớp 1 code point)
/\u{1F600}/u.test("😀"); // true (Unicode escape)

Kết hợp flags:

Thứ tự không quan trọng: /gim = /mig = /img. Ví dụ phổ biến: /pattern/gim (global, case-insensitive, multiline).