Regex trong JavaScript: test, match, replace và nhóm bắt

Regex là một mẫu để khớp văn bản

Biểu thức chính quy (regular expression) mô tả hình dạng của chuỗi: "bốn chữ số", "một từ theo sau là dấu phẩy", "bất cứ thứ gì trông giống email". JavaScript cho bạn hai cách để tạo một biểu thức:

const literal = /hello/i;
const built = new RegExp("hello", "i");

console.log(literal.test("Hello, world"));
console.log(built.test("HELLO"));

Dạng literal, với dấu gạch chéo bao quanh mẫu và cờ đặt sau dấu gạch chéo đóng, là dạng bạn dùng nhiều nhất. Hãy dùng new RegExp(...) khi bản thân mẫu là động, chẳng hạn dựng từ dữ liệu người dùng nhập hoặc từ một biến.

Chữ i ở cuối là một cờ (flag). i nghĩa là không phân biệt chữ hoa chữ thường. Lát nữa sẽ nói thêm về cờ.

test: có khớp không?

Câu hỏi nhanh nhất bạn có thể hỏi một regex là "chuỗi này có chứa chỗ khớp không?". Đó là test:

const hasDigit = /\d/;

console.log(hasDigit.test("abc123"));
console.log(hasDigit.test("abcdef"));
console.log(hasDigit.test(""));

\d nghĩa là "một chữ số bất kỳ". test chỉ trả về true hoặc false. Nếu bạn chỉ cần câu trả lời có hoặc không, như kiểm tra một trường nhập liệu hay lọc một mảng, test là công cụ phù hợp.

match: lấy phần văn bản khớp ra

Khi bạn muốn lấy chính phần văn bản khớp, hãy dùng phương thức match của chuỗi:

const text = "Order #4521 shipped on 2024-11-03";

console.log(text.match(/\d+/));
console.log(text.match(/\d+/g));

Không có cờ g, match trả về một mảng chứa chỗ khớp đầu tiên cùng siêu dữ liệu (index, input). Có g, nó trả về mọi chỗ khớp dưới dạng một mảng chuỗi thông thường. Nếu không có gì khớp, bạn nhận được null chứ không phải mảng rỗng, nên cần kiểm tra trước:

const result = "no numbers here".match(/\d+/);
console.log(result ?? "no match");

Cờ thay đổi cách mẫu hoạt động

Cờ đặt sau dấu gạch chéo đóng và điều chỉnh cách so khớp. Những cờ bạn hay dùng nhất:

• g: global, tìm mọi chỗ khớp thay vì chỉ chỗ đầu tiên.
• i: không phân biệt chữ hoa chữ thường.
• m: multiline, để ^ và $ khớp đầu và cuối mỗi dòng, không chỉ đầu và cuối chuỗi.
• s: dotall, để . khớp cả ký tự xuống dòng.
• u: hỗ trợ unicode, cần cho nhiều mẫu có emoji và ký tự ngoài ASCII.

const poem = "Roses are red\nViolets are blue";

console.log(poem.match(/^\w+/));
console.log(poem.match(/^\w+/gm));

Không có m, ^ chỉ neo vào đầu chuỗi. Có m, nó neo vào đầu mỗi dòng, nên cả Roses lẫn Violets đều được lấy ra.

Lớp ký tự và lượng từ

Những viên gạch tạo nên phần lớn các mẫu:

• \d chữ số, \w ký tự từ (chữ cái, chữ số, dấu gạch dưới), \s khoảng trắng.
• [abc] một trong a, b hoặc c. [^abc] bất cứ ký tự nào ngoại trừ chúng. [a-z] một khoảng.
• . bất kỳ ký tự nào trừ ký tự xuống dòng.
• * không hoặc nhiều lần, + một hoặc nhiều lần, ? không hoặc một lần.
• {3} đúng ba lần, {2,5} từ hai đến năm lần, {2,} từ hai lần trở lên.
• ^ đầu, $ cuối.

Ghép lại với nhau:

const patterns = {
  phone: /^\d{3}-\d{3}-\d{4}$/,
  hex: /^#[0-9a-f]{6}$/i,
  word: /\b\w+\b/g,
};

console.log(patterns.phone.test("415-555-0132"));
console.log(patterns.hex.test("#1a2B3c"));
console.log("hello, regex world".match(patterns.word));

\b là ranh giới từ (word boundary), đường vô hình giữa một ký tự từ và một ký tự không phải từ. Rất hữu ích khi bạn muốn khớp "nguyên một từ". Để xem một mẫu khớp những gì trước khi dùng nó trong code, hãy thử trong công cụ kiểm tra regex.

Nhóm bắt: ghi nhớ từng phần của chỗ khớp

Cặp ngoặc tròn tạo ra một nhóm bắt lấy bất cứ thứ gì nó khớp. exec và match trả về các phần bắt được này cùng với chỗ khớp tổng thể:

const date = /(\d{4})-(\d{2})-(\d{2})/;
const result = "today is 2024-11-03".match(date);

console.log(result[0]);
console.log(result[1]);
console.log(result[2]);
console.log(result[3]);

Chỉ số 0 là toàn bộ chỗ khớp, và mỗi nhóm có ô riêng ngay sau đó. Đếm nhóm theo vị trí trở nên rối khi có hơn hai nhóm, nên hãy đặt tên cho chúng:

const date = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const { groups } = "today is 2024-11-03".match(date);

console.log(groups.year, groups.month, groups.day);

Nhóm có tên dễ đọc hơn ở chỗ dùng và vẫn đúng khi bạn sắp xếp lại mẫu.

replace: viết lại phần văn bản khớp

replace nhận một mẫu và một giá trị thay thế. Giá trị thay thế có thể là chuỗi hoặc hàm:

const text = "Contact: alice@example.com or bob@example.com";

console.log(text.replace(/@example\.com/, "@acme.io"));
console.log(text.replace(/@example\.com/g, "@acme.io"));

Không có g, chỉ chỗ khớp đầu tiên được thay. Lỗi hay gặp là quên cờ rồi thắc mắc vì sao email thứ hai vẫn sai.

Chuỗi thay thế hỗ trợ tham chiếu ngược. $1, $2... trỏ tới các nhóm bắt; $<name> trỏ tới nhóm có tên:

const date = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

console.log("2024-11-03".replace(date, "$<day>/$<month>/$<year>"));

Với mọi thứ phức tạp hơn một phép thay thế thẳng, hãy truyền vào một hàm. Hàm này nhận chỗ khớp và các phần bắt được làm đối số:

const prices = "Apples $3, Pears $5, Plums $2";

const doubled = prices.replace(/\$(\d+)/g, (_, n) => `$${Number(n) * 2}`);
console.log(doubled);

Dấu gạch dưới là toàn bộ chỗ khớp (ta không cần nó); n là nhóm bắt đầu tiên. Cặp regex và hàm thay thế này xử lý được phần lớn việc biến đổi văn bản ngoài thực tế.

matchAll: mọi chỗ khớp kèm các nhóm

String.prototype.matchAll trả về một iterator gồm mọi chỗ khớp kèm theo các nhóm bắt, điều mà match thông thường với cờ g không làm được:

const text = "alice@acme.io and bob@example.com";
const email = /(?<user>\w+)@(?<domain>[\w.]+)/g;

for (const m of text.matchAll(email)) {
  console.log(m.groups.user, "at", m.groups.domain);
}

matchAll bắt buộc phải có cờ g. Thiếu nó, bạn sẽ gặp TypeError. Trải nó ra thành mảng ([...text.matchAll(email)]) nếu bạn cần truy cập ngẫu nhiên thay vì duyệt tuần tự.

Thoát ký tự đặc biệt

Các ký tự như . * + ? ( ) [ ] { } | \ ^ $ có ý nghĩa đặc biệt trong regex. Để khớp đúng chúng theo nghĩa đen, hãy thoát (escape) bằng dấu gạch chéo ngược:

const withDot = /example\.com/;
const withoutDot = /example.com/;

console.log(withDot.test("example.com"));
console.log(withDot.test("examplexcom"));
console.log(withoutDot.test("examplexcom"));

Phiên bản không thoát khớp cả examplexcom vì . nghĩa là "bất kỳ ký tự nào". Loại bug này rất phổ biến và không gây ra lỗi nào. Nếu một regex khớp quá nhiều, hãy tìm dấu . chưa thoát trước tiên.

Khi dựng mẫu từ dữ liệu người dùng nhập, bạn bắt buộc phải thoát nó, nếu không người dùng có thể chèn cú pháp regex vào:

function escape(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

const userInput = "3.14";
const safe = new RegExp(escape(userInput));
console.log(safe.test("pi is 3.14"));
console.log(safe.test("pi is 3x14"));

$& trong chuỗi thay thế là cách viết tắt của "toàn bộ chỗ khớp".

Lookahead và lookbehind

Đôi khi bạn chỉ muốn khớp văn bản khi theo sau (hoặc đứng trước) nó là một thứ gì đó, mà không đưa thứ đó vào chỗ khớp. Đó là việc của lookaround:

const prices = "items cost 10 USD, 25 EUR, 7 GBP";

console.log(prices.match(/\d+(?= USD)/));
console.log(prices.match(/(?<=\$)\d+/));

• (?= ...) lookahead khẳng định: "theo sau là".
• (?<= ...) lookbehind khẳng định: "đứng trước là".
• (?! ...) và (?<! ...) là các phiên bản phủ định.

Lookaround không tiêu thụ ký tự, nên phần bạn "nhìn vào" vẫn còn nguyên cho phần tiếp theo của mẫu.

Vài lời về kiểm tra email

Bạn sẽ gặp yêu cầu này rất nhiều: "cho tôi một regex kiểm tra email". Câu trả lời thật lòng là: đừng. Ngữ pháp email thực tế rất rắc rối, và regex nào đủ ngắn để đọc được thì đều sai theo hướng này hay hướng khác. Với việc kiểm tra form, một mẫu thực dụng là đủ:

const emailish = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

console.log(emailish.test("alice@acme.io"));
console.log(emailish.test("not an email"));
console.log(emailish.test("a@b"));

Đọc nó như sau: "vài ký tự không phải khoảng trắng và không phải @, một dấu @, thêm vài ký tự như vậy, một dấu chấm, rồi thêm vài ký tự như vậy nữa". Mẫu này bắt được lỗi gõ rõ ràng mà không giả vờ tuân thủ RFC 5322. Để xác minh thật sự, hãy gửi email xác nhận.

Những lỗi thường gặp

Vài cái bẫy đáng ghi nhớ:

• Quên g với replace hoặc matchAll. Chỉ chỗ khớp đầu tiên được thay, hoặc gặp TypeError.
• lastIndex lưu trạng thái trên regex global. Regex có cờ g hoặc y nhớ vị trí dừng lại giữa các lần gọi test/exec. Đừng dùng lại một regex cho các chuỗi không liên quan: hãy tạo regex mới, hoặc dùng matchAll.
• Dấu chấm và dấu gạch chéo chưa thoát trong mẫu động. Luôn thoát dữ liệu người dùng nhập trước khi đưa vào new RegExp(...).
• Quay lui thảm họa (catastrophic backtracking). Lượng từ lồng nhau như (a+)+ gặp đầu vào bất lợi có thể làm treo cả tab. Nếu một regex có vẻ chậm, hãy đơn giản hóa nó.

Tiếp theo: ngày và giờ

Regex xử lý hình dạng của văn bản; dữ liệu thực tế còn đi kèm mốc thời gian cần phân tích, định dạng và tính toán. Trang tiếp theo nói về Date, Intl.DateTimeFormat và mô hình tư duy giúp bạn tránh xa bug múi giờ.