Trong bài viết này, ta sẽ cùng tìm hiểu về biểu thức chính quy – Regex trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.
Regex trong JavaScript
Trong JavaScript, biểu thức chính quy (Regex, viết tắt của từ Regular Expression) là một đối tượng mô tả một chuỗi các ký tự được sử dụng để định nghĩa cho một mẫu tìm kiếm.
Một mẫu được xác định bằng RegEx có thể được sử dụng để tìm kiếm và so khớp với một chuỗi ký tự.
Tạo một biểu thức chính quy
Có hai cách mà ta có thể tạo một biểu thức chính quy trong JavaScript.
1. Sử dụng một hằng biểu thức chính quy
Biểu thức chính quy bao gồm một mẫu (chuỗi ký tự cần tìm) nằm giữa dấu gạch chéo /.
Ví dụ:
|
1 |
let exp = /JavaScript/; |
Ở đây, /JavaScript/ là một biểu thức chính quy.
2. Sử dụng hàm khởi tạo RegExp()
Ta cũng có thể tạo một biểu thức chính quy bằng cách gọi hàm khởi tạo RegExp().
Ví dụ:
|
1 |
let exp = new RegExp('JavaScript'); |
Ví dụ:
|
1 2 |
let exp = new RegExp(/JavaScript/); console.log(exp.test('JavaScript')); |
Kết quả:
|
1 |
True |
Trong ví dụ trên, mẫu biểu thức chính quy là /JavaScript/. Ở đây, phương thức test()được sử dụng để kiểm tra xem chuỗi ký tự có khớp với mẫu trong biểu thức chính quy hay không.
Xác định mẫu bằng RegEx
Để xác định biểu thức chính quy, các siêu ký tự sẽ được sử dụng.
Siêu ký tự
Siêu ký tự là các ký tự được công cụ RegEx diễn giải theo một cách đặc biệt. Sau đây là danh sách các siêu ký tự:
|
1 |
[] . ^ $ * + ? {} () \ | |
1. Dấu ngoặc vuông []
Dấu ngoặc vuông chỉ định một tập hợp các ký tự ta muốn so khớp.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| [xyz] | x | 1 |
| xz | 2 | |
| abc | 0 | |
| xyz ab yz | 5 |
Ở đây, [xyz] sẽ trùng khớp nếu chuỗi ký tự mà ta đang cố gắng so khớp chứa bất kỳ ký tự nào bao gồm x, y hoặc z.
Ta cũng có thể chỉ định một loạt các ký tự bằng cách sử dụng ký hiệu -bên trong dấu ngoặc vuông
Ví dụ:
|
1 2 3 |
[a-f] tương đương với [abcdef]. [1-9] tương đương với [123456789]. [0-39] tương đương với [01239]. |
Ta có thể bổ sung tập hợp các ký tự bằng cách sử dụng biểu tượng dấu mũ ^ở đầu dấu ngoặc vuông.
[^abc] nghĩa là bất kỳ ký tự nào ngoại trừ a hoặc b hoặc c.
[^0-9] nghĩa là bất kỳ ký tự không phải chữ số.
2. Dấu chấm
Dấu chấm sẽ so khớp với bất kỳ ký tự đơn nào (ngoại trừ ký tự xuống dòng mới ‘\ n’).
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| .. | a | 0 |
| ac | 1 | |
| abc | 1 | |
| acde | 2 (chứa 4 ký tự) |
3. Dấu mũ
Ký hiệu dấu mũ ^ được sử dụng để kiểm tra xem một chuỗi ký tự có bắt đầu bằng một ký tự được xác định hay không.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| ^x | x | 1 |
| xyz | 1 | |
| yxz | 0 | |
| ^ac | abc | 0 (vì bắt đầu bằng a nhưng đằng sau lại là b, không phải là c) |
| acb | 1 |
4. Dấu đô-la
Ký hiệu đô la $ được sử dụng để kiểm tra xem một chuỗi có kết thúc bằng một ký tự được xác định hay không.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| a$ | a | 1 |
| banana | 1 | |
| ant | 0 |
5. Ký hiệu dấu ngôi sao
Biểu tượng ngôi sao * khớp với số lần là 0 hoặc nhiều lần xuất hiện của mẫu còn lại.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| ab*c | ac | 1 |
| abc | 1 | |
| abcc | 1 | |
| abdc | 0 (vì đằng sau b không phải là c) | |
| deabc | 1 |
6. Dấu cộng
Biểu tượng dấu cộng + khớp với một hoặc nhiều lần xuất hiện của mẫu còn lại.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| ab+c | abc | 1 |
| abcc | 1 | |
| abbc | 1 | |
| abdc | 0 | |
| defabc | 1 |
7. Dấu hỏi chấm
Biểu tượng dấu hỏi? khớp với 0 hoặc một lần xuất hiện của mẫu còn lại.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| ab?c | abc | 1 |
| abdc | 0 (vì đằng sau b không phải là c) | |
| abcc | 0 (vì có nhiều hơn 1 ký tự c) | |
| abec | 0 (vì đằng sau b không phải là c) |
8. Dấu ngoặc nhọn
{n, m} là ít nhất n và nhiều nhất m lần lặp lại của mẫu.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| b{1,2} | abbec | 1 |
| aec bbc | 1 | |
| abc bcc | 2 (trong chuỗi abc và bcc) | |
| aacb bbba | 2 (trong chuỗi aacb và bbba) |
9. Dấu thanh dọc
Thanh dọc | được sử dụng để chọn lựa một trong hai mẫu.
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| a|b | cde | 0 |
| ade | 1 | |
| acdbea | 3 |
Ở đây, a | b sẽ khớp với bất kỳ chuỗi nào có chứa ký tự a hoặc b
10. Dấu ngoặc đơn
Dấu ngoặc đơn () được sử dụng để nhóm các mẫu con. Ví dụ: (a | b | c) xz khớp với bất kỳ chuỗi nào có chứa ký tự a hoặc b hoặc c và theo sau là xz
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp? |
| (a|b|c)kk | ab kk | 0 |
| akk | 1 | |
| bck ckk | 2 |
11. Dấu gạch chéo ngược
Dấu gạch chéo ngược \ được sử dụng để thoát các ký tự bao gồm tất cả các siêu ký tự.
Ví dụ:
\$a khớp nếu một chuỗi chứa ký tự $ theo sau là a. Trong phần bên trên, ta đã nói về ký hiệu đô-la này, ký hiệu đô la $ được sử dụng để kiểm tra xem một chuỗi có kết thúc bằng một ký tự được xác định hay không. Tuy nhiên, ở đây, ký hiệu $ không được công cụ RegEx biên dịch theo cách đặc biệt này.
Nếu ta không chắc một ký tự có ý nghĩa đặc biệt hay không, ta có thể đặt dấu gạch chéo ngược \ trước nó. Điều này đảm bảo rằng ký tự sẽ không được xử lý theo một cách đặc biệt.
Chuỗi đặc biệt
Các chuỗi đặc biệt giúp cho các mẫu được viết dễ hơn. Sau đây là danh sách các chuỗi đặc biệt:
1. \A – Trùng khớp nếu các ký tự được chỉ định nằm ở đầu chuỗi.
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| \Athe | theant | 1 |
| athea | 0 |
2. \b – Trùng khớp nếu các ký tự được chỉ định nằm ở đầu hoặc cuối một từ.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| \bJava | JavaScript | 1 |
| Java\b | scriptJava | 1 |
| JavaScript | 0 | |
| the scriptJava program | 1 | |
| the aJavaScript | 0 |
3. \B – Ngược lại với \b. So khớp nếu các ký tự được chỉ định không nằm ở đầu hoặc cuối của một từ.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| \BJava | JavaScript | 0 |
| Java\B | a JavaScript | 1 |
| the Java | 0 | |
| aJava program | 0 | |
| theJavaScript | 1 |
4. \d – Trùng khớp với bất kỳ chữ số nào. Tương đương với [0-9].
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| \d | 12abc3 | 3 |
| JavaScript | 0 |
5. \D – Trùng khớp với bất kỳ ký tự mà không phải là chữ số. Tương đương với [^ 0-9].
| Biểu thức | Chuỗi | Khớp hay không? |
| \D | 1ab22@12 | 3 |
| 98753 | 0 |
6. \s – Trùng khớp với các chỗ mà một chuỗi chứa bất kỳ ký tự khoảng trắng nào. Tương đương với [\t \n \r \f \v].
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| \s | JavaScript Program | 1 |
| JavaScript | 0 |
7. \S – Trùng khớp với các chỗ mà trong đó một chuỗi ký tự không có khoảng trắng. Tương đương với [^ \t \n \r \f \v].
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| \S | x y | 2 |
| 0 |
8. \w – Trùng khớp với bất kỳ ký tự chữ và số nào (chữ số và bảng chữ cái). Tương đương với [a-zA-Z0-9_]. Ký tự dấu _ cũng được coi là ký tự chữ số.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| \w | 98@”:”a | 3 |
| @@@” | 0 |
9. \W – Trùng khớp với bất kỳ ký tự nào mà không phải là chữ và số. Tương đương với [^ a-zA-Z0-9_]
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| \W | 123@abc | 1 |
| 123456789 | 0 |
10. \Z – Trùng khớp nếu các ký tự được chỉ định nằm ở cuối chuỗi.
Ví dụ:
| Biểu thức | Chuỗi ký tự | Khớp hay không? |
| JavaScript\Z | JavaScript | 1 |
| JavaScript Program | 0 | |
| JavaScript Learning | 0 |
Chú ý: Để xây dựng và kiểm tra các biểu thức chính quy, ta có thể sử dụng các công cụ kiểm tra RegEx như regex101.
Các phương thức của biểu thức chính quy – Regex trong JavaScript
Như đã đề cập ở trên, ta có thể sử dụng phương thức RegExp() hoặc ký tự biểu thức chính quy để tạo RegEx trong JavaScript. Trong JavaScript, ta có thể sử dụng các biểu thức chính quy với các phương thức RegExp() bao gồm test() và exec(). Ngoài ra còn có một số phương thức chuỗi cho phép ta truyền RegEx làm tham số của nó bao gồm match(), replace(), search() và split().
| Phương thức | Mô tả |
| exec() | Thực hiện việc tìm kiếm trong một chuỗi ký tự và trả về mảng. Trả về giá trị NULL nếu không tìm thấy bất kỳ mẫu nào. |
| test() | Kiểm tra sự trùng khớp trong một chuỗi ký tự và trả về true hoặc false. |
| match() | Trả về một mảng chứa tất cả các giá trị khớp hoặc trả về NULL nếu ngược lại. |
| matchAll() | Trả về 1 đối tượng lặp chứa tất cả các giá trị khớp. |
| search() | Kiểm tra một giá trị khớp trong một chuỗi ký tự và trả về chỉ số của giá trị khớp đó. Trả về -1 nếu không tìm thấy giá trị khớp. |
| replace() | Tìm một giá trị khớp trong một chuỗi ký tự và thay thế chuỗi đã khớp với một chuỗi khác. |
| split() | Chia một chuỗi ký tự thành một mảng các chuỗi ký tự con. |
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 |
const str = 'Lập trình JavaScript'; const match = /Java/; const kq1 = str.search(match); console.log(kq1); const str1 = 'Lập trình Java'; str1.replace(match, 'JavaScript'); console.log(str1); const match2 = /[\s,]+/; const kq2 = str.split(match2); console.log(kq2); |
Kết quả:
|
1 2 3 |
10 Lập trình Java ['Lập', 'trình', 'JavaScript'] |
Các cờ trong biểu thức chính quy
Cờ được sử dụng với các biểu thức chính quy nhằm cho phép các tùy chọn khác nhau như tìm kiếm toàn cục, tìm kiếm không có phân biệt chữ hoa chữ thường,…
| Cờ | Mô tả |
| g | Thực hiện tìm kiếm toàn cục. |
| m | Thực hiện so khớp nhiều dòng. |
| i | Thực hiện so khớp không phân biệt chữ hoa và chữ thường. |
Ví dụ:
|
1 2 3 4 5 6 7 8 9 |
const str = 'Lập trình JavaScript và Java + Java'; const kq = str.replace(/Java/, 'JavaScript'); console.log(kq); const kq2 = str.replace(/Java/g, 'JavaScript'); console.log(kq2); const kq3 = str.replace(/Java/i, 'JavaScript'); console.log(kq3); const kq4 = str.replace(/Java/gi, 'JavaScript'); console.log(kq4); |
Kết quả:
|
1 2 3 4 |
Lập trình JavaScriptscript và Java + Java Lập trình JavaScriptscript và JavaScript + JavaScript Lập trình JavaScriptscript và Java + Java Lập trình JavaScriptscript và JavaScript + JavaScript |
Ví dụ 2: Sử dụng Regex để kiểm tra tính hợp lệ của email.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function check(email) { const match = /\S+@\S+\.\S+/g; let kq = match.test(email); if (kq) { console.log('Hợp lệ!'); } else { let other = prompt('Nhập lại email:'); check(other); } } let email = prompt('Nhập email: '); check(email); |
Kết quả:
|
1 2 |
Nhập email: > hieu@gmail.com Hợp lệ! |
Trên đây là khái niệm và ví dụ cơ bản về biểu thức chính quy hay Regex trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài tiếp theo về lập trình JavaScript trên tek4 nhé!
P/s: Cảm ơn mọi người đã tin tưởng tek4!
