NỘI DUNG BÀI VIẾT
Giới thiệu
Trong JavaScript, biểu thức chính quy (Regular Expression hay RegEx) là một đối tượng mô tả một chuỗi các ký tự được sử dụng để xác định một mẫu tìm kiếm. Ví dụ:
/^a...s$/Đoạn mã trên xác định một mẫu Regular Expression. Nghĩa là: chuỗi năm chữ cái bất kỳ bắt đầu bằng a và kết thúc bằng s.
Một mẫu được xác định bằng Regular Expression có thể được sử dụng để khớp (match) với một chuỗi.
| String | Matched? |
abs | No match |
alias | Match |
abyss | Match |
Alias | No match |
An abacus | No match |
Tạo một Regular Expression
Có hai cách để tạo một biểu thức chính quy trong JavaScript:
Sử dụng cụm từ thông dụng
Biểu thức chính quy bao gồm một mẫu nằm giữa dấu gạch chéo /.
cost regularExp = /abc/Code language: JavaScript (javascript)Trong đó, /abc/ là một biểu thức chính quy.
Sử dụng hàm khởi tạo RegExp()
Bạn 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().
const reguarExp = new RegExp('abc)Code language: JavaScript (javascript)Ví dụ:
const regex = new RegExp(/^a...s$/);
console.log(regex.test('alias')); // trueCode language: JavaScript (javascript)Trong ví dụ trên, alias khớp với mẫu RegEx /^a...s$/
Ở đây, phương thức test() được sử dụng để kiểm tra xem chuỗi có khớp với mẫu hay không.
Còn một số phương thức khác có sẵn để sử dụng với JavaScript Regular Expression. Để tìm hiểu rõ hơn, hãy xem ở phía cuối bài viết nhé!
Xác định mẫu bằng Regular Expression
Để xác định biểu thức chính quy, siêu ký tự (metacharacter) được sử dụng. Trong ví dụ trên (/^a...s$/), ^ và $ là các siêu ký tự.
Siêu ký tự là các ký tự được RegEx diễn giải theo một cách đặc biệt. Đây là danh sách các siêu ký tự:
Siêu ký tự
[] . ^ $ * + ? {} () \ |
[] – Dấu ngoặc vuông
Dấu ngoặc vuông xác định một tập hợp các ký tự bạn muốn khớp.
Biểu thức: [abc]
| String | Matched? |
a | 1 match |
ac | 2 matches |
Hey Jude | No match |
abc de ca | 5 matches |
Ở đây, [abc] sẽ khớp nếu chuỗi có chứa bất kỳ ký tự a, b hoặc c.
[a-e] khớp với [abcde].
[1-4] khớp với [1234].
[0-39] khớp với [01239].
Ngoài ra, có thể thêm dấu ^ sau dấu ngoặc vuông mở đầu để đảo ngược tập hợp ký tự.
[^abc] có nghĩa là bất kỳ ký tự nào ngoại trừ a hoặc b hoặc c.
[^0-9] có nghĩa là bất kỳ ký tự nào không phải chữ số.
. – Dấu chấm
Dấu chấm khớp với bất kỳ ký tự đơn nào (ngoại trừ xuống dòng '\n').
Biểu thức: ..
| String | Matched? |
a | No match |
ac | 1 match |
acd | 1 match |
acde | 2 matches (gồm 4 ký tự) |
^ – Dấu mũ
Dấu mũ ^ được sử dụng để kiểm tra xem một chuỗi có bắt đầu bằng một ký tự nhất định hay không.
Biểu thức: ^a
| String | Matched? |
a | 1 match |
abc | 1 match |
bac | No match |
Biểu thức: ^ab
| String | Matched? |
abc | 1 match |
acb | No match |
$ – Dấu dollar
Dấ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ự nhất định hay không.
Biểu thức: a$
| String | Matched? |
a | 1 match |
formula | 1 match |
cap | No match |
* – Dấu sao
Dấu sao * khớp với chuỗi có thành phần trước dấu * xuất hiện >= 0 lần (có thể không xuất hiện).
Biểu thức: ma*n
| String | Matched? |
mn | 1 match |
man | 1 match |
mann | 1 match |
main | No match (vì theo sau a không phải n) |
woman | 1 match |
+ – Dấu cộng
Dấu cộng + khớp với chuỗi có thành phần trước dấu + xuất hiện >= 1 lần.
Biểu thức: ma+n
| String | Matched? |
mn | No match (vì không chứa a) |
man | 1 match |
mann | 1 match |
main | No match (vì theo sau a không phải n) |
woman | 1 match |
? – Dấu hỏi chấm
Dấu hỏi chấm ? khớp với chuỗi có thành phần trước dấu ?
Biểu thức: ma?n
| String | Matched? |
mn | 1 match |
man | 1 match |
mann | No match (có nhiều hơn 1 ký tự n) |
main | No match (vì theo sau a không phải n) |
woman | 1 match |
{} – Dấu ngoặc nhọn
Xem xét đoạn mã này: {n, m}. Điều này có nghĩa là có ít nhất n và nhiều nhất m lần lặp lại thành phần đó.
Biểu thức: a{2, 3}
| String | Matched? |
| No match |
| 1 match (ở daat) |
| 2 matches (ở aabc và daaat) |
| 2 matches (ở aabc và daaaat) |
Hãy thử một ví dụ nữa. RegEx [0-9]{2,4} này khớp với ít nhất 2 chữ số nhưng không nhiều hơn 4 chữ số.
| String | Matched? |
| 1 match (ở ab123csde) |
| 3 matches (12, 3456 và 73) |
| No match |
| – Dấu sổ thẳng
Xem xét đoạn mã này: n|m. Dấu sổ thẳng | được sử dụng để tìm chuỗi hoặc là n hoặc là m.
Biểu thức: a|b
| String | Matched? |
| No match |
| 1 match (ở ade) |
| 3 matches (ở acdbea) |
() – Dấu ngoặc tròn
Dấu ngoặc trò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 khớp với a hoặc b hoặc c theo sau là xz.
Biểu thức: (a|b|c)xz
| String | Matched? |
| No match |
| 1 match (ở abxz) |
| 2 matches (ở axzbc cabxz) |
\ – Dấu gạch chéo ngược
Dấu gạch chéo ngược được sử dụng để thể hiện tất cả các ký tự theo sau nó, bao gồm các siêu ký tự (metacharacter).
\$a khớp nếu một chuỗi chứa $ theo sau là a. Ở đây, $ không phải là RegEx.
Nếu bạn không chắc liệu một ký tự có đặc biệt hay không, bạn có thể đặt \ trước nó. Điều này đảm bảo rằng sẽ không bỏ sót trường hợp nào.
Special Sequences
Special Sequences là chuỗi đặc biệt và được bắt đầu bằng ký tự \, nó có ý nghĩa đặc biệt và thường trợ giúp cho việc mô tả Regular Expression được gọn gàng hơn.
\A
Bắt đầu chuỗi bằng ký tự chỉ định.
Biểu thức: \Athe
| String | Matched? |
the sun | Match |
In the sun | No match |
\b
Bắt đầu hoặc kết thúc của một từ bằng ký tự chỉ định.
Biểu thức: \bfoo
| String | Matched? |
| Match |
| Match |
Biểu thức: foo\b
| String | Matched? |
| No match |
| Match |
the afoo test | Match |
the afootest | No match |
\B
Ngược với \b, khớp với các ký tự chỉ định nhưng không nằm ở đầu hoặc cuối từ.
Biểu thức: \Bfoo
| String | Matched? |
| No match |
| No match |
Biểu thức: foo\B
| String | Matched? |
a | Match |
| No match |
the afoo test | No match |
the afootest | Match |
\d
Chuỗi chứa ký tự là chữ số, giống với [0-9].
Biểu thức: \d
| String | Matched? |
| 3 matches (ở 12abc3) |
| No match |
\D
Chuỗi không chứa ký tự là số, giống với [^0-9].
Biểu thức: \D
| String | Matched? |
| 3 matches (ở 1ab34"50) |
| No match |
\s
Chuỗi chứa khoảng trắng, giống với [\t\n\r\f\v].
Biểu thức: \s
| String | Matched? |
| 1 match |
| No match |
\S
Chuỗi không chứa khoảng trắng, giống với [^\t\n\r\f\v].
Biểu thức: \S
| String | Matched? |
| 2 matches (at a b) |
| No match |
\w
Chuỗi chứa bất kỳ ký tự nào trong nhóm từ a tới Z, từ 0 tới 9 và dấu _ (underscore), giống với [a-zA-Z0-9_].
Biểu thức: \w
| String | Matched? |
| 3 matches (ở 12&": ;c) |
%"> ! | No match |
\W
Ngược lại với \w.
Biểu thức: \W
| String | Matched? |
| 1 match (ở 1a2%c) |
JavaScript | No match |
\Z
Kết thúc chuỗi bằng các ký tự được chỉ định.
Biểu thức: JavaScript\Z
| String | Matched? |
| 1 match |
| No match |
JavaScript is fun | No match |
Mẹo: Để build và test các biểu thức chính quy, bạn có thể sử dụng các công cụ kiểm tra RegEx như regex101. Công cụ này không chỉ giúp bạn trong việc tạo biểu thức chính quy mà còn giúp bạn tìm hiểu chúng.
Phương thức của Regular Expression trong JavaScript
Như đã đề cập ở trên, bạn có thể sử dụng RegExp() hoặc cụm từ thông dụng để tạo RegEx trong JavaScript.
const regex1 = /^ab/;
const regex2 = new Regexp('/^ab/');
Trong JavaScript, bạn có thể sử dụng các biểu thức chính quy với các phương thức RegExp() là test() và execute().
Ngoài ra, còn có một số phương thức chuỗi cho phép bạn chuyển RegEx làm tham số của chúng như match(), replace(), search() và split().
| Method | Description |
|---|---|
exec() | Tìm kiếm chuỗi phù hợp với mẫu so khớp, trả về một mảng chứa kết quả tìm kiếm |
test() | Kiểm tra mẫu có khớp với chuỗi hay không, trả về true hoặc false |
match() | Tìm kiếm chuỗi phù hợp với mẫu so khớp, trả về một mảng chứa kết quả tìm kiếm hoặc null nếu không tìm thấy |
search() | Tìm kiếm chuỗi phù hợp với mẫu so khớp, trả về vị trí của chuỗi đó hoặc -1 nếu không tìm thấy |
replace() | Thay thế chuỗi bằng chuỗi khác phù hợp với mẫu tìm kiếm |
split() | Ngắt chuỗi thành một mảng các chuỗi con |
Ví dụ 1: Biểu thức chính quy
const string = 'Find me';
const pattern = /me/;
// search if the pattern is in string variable
const result1 = string.search(pattern);
console.log(result1); // 5
// replace the character with another character
const string1 = 'Find me';
string1.replace(pattern, 'found you'); // Find found you
// splitting strings into array elements
const regex1 = /[\s,]+/;
const result2 = 'Hello world! '.split(regex1);
console.log(result2); // ["I", "am", "learning", "JavaScript", "RegEx"]
// searching the phone number pattern
const regex2 = /(\d{3})\D(\d{3})-(\d{4})/g;
const result3 = regex2.exec('My phone number is: 555 123-4567.');
console.log(result3); // ["555 123-4567", "555", "123", "4567"]
Regular Expression Flags
Cờ (Flag) được sử dụng với các cụm từ thông dụng 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 phân biệt chữ hoa chữ thường, v.v. Chúng có thể được sử dụng riêng biệt hoặc cùng nhau.
| Flags | Description |
|---|---|
g | so khớp toàn bộ chuỗi cần tìm |
m | so khớp luôn cả các dữ liệu xuống dòng |
i | so khớp không quan tâm đến chữ hoa chữ thường |
Ví dụ 2: Chính sửa Regular Expression
const string = 'Hello hello hello'; // performing a replacement const result1 = string.replace(/hello/, 'world'); console.log(result1); // Hello world hello // performing global replacement const result2 = string.replace(/hello/g, 'world'); console.log(result2); // Hello world world // performing case-insensitive replacement const result3 = string.replace(/hello/i, 'world'); console.log(result3); // world hello hello // performing global case-insensitive replacement const result4 = string.replace(/hello/gi, 'world'); console.log(result4); // world world world
Ví dụ 3: Xác thực số điện thoại
// program to validate the phone number
function validatePhone(num) {
// regex pattern for phone number
const re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/g;
// check if the phone number is valid
let result = num.match(re);
if (result) {
console.log('The number is valid.');
}
else {
let num = prompt('Enter number in XXX-XXX-XXXX format:');
validatePhone(num);
}
}
// take input
let number = prompt('Enter a number XXX-XXX-XXXX');
validatePhone(number);
Kết quả:
Enter a number XXX-XXX-XXXX: 2343223432
Enter number in XXX-XXX-XXXX format: 234-322-3432
The number is validVí dụ 4: Xác thực địa chỉ email
// program to validate the email address
function validateEmail(email) {
// regex pattern for email
const re = /\S+@\S+\.\S+/g;
// check if the email is valid
let result = re.test(email);
if (result) {
console.log('The email is valid.');
}
else {
let newEmail = prompt('Enter a valid email:');
validateEmail(newEmail);
}
}
// take input
let email = prompt('Enter an email: ');
validateEmail(email);
Kết quả:
Enter an email: hellohello
Enter a valid email: learningJS@gmail.com
The email is valid.Code language: CSS (css)Kết luận
Regular Expression thật sự rất mạnh mẽ và nó sẽ giúp các bạn xử lý được rất nhiều bài toán khó, phức tạp nếu áp dụng cách thông thường. Nhưng nó cũng thực sự khá rối rắm với nhưng người chưa tìm hiểu kỹ về nó. Hy vọng các bạn sẽ tìm được niềm vui khi sử dụng Regular Expression với JavaScript.
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
