Trong bài này chúng ta sẽ tìm hiểu về biểu thức chính quy trong javascript, hay còn gọi là RegEx trong javascript. Đây là thư viện được dùng để xử lý chuỗi nâng cao nên rất khó học. Show
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Như ta biết, regular expression hoạt động theo quy tắc so khớp, va lấy kết quả của sự so khớp đó thông qua những quy tắc mà thư viện RegEx đưa ra. Dựa vào những quy tắc này, lập trình viên sẽ viết thành những biểu thức và áp dụng vào bài toán của mình. Để tiện cho việc giải thích thì mình xin có một vài lưu ý như sau:
1. RegEx trong Javascript là gì?RegEx (regular expression) là tập hợp những quy tắc, dựa vào những quy tắc này ta sẽ viết ra những biểu thức so khớp giữa các chuỗi với nhau. Đây là một thư viện nâng cao được tích hợp sẵn trong đối tượng RegExp của Javascript. Bài viết này được đăng tại [free tuts .net] Không chỉ ở javascript, thư viện RegEx còn được tích hợp ở hầu hết các ngôn ngữ lập trình hiện nay. Vì vậy, khi bạn đọc xong bài này và hiểu hết bài rồi, thì qua những ngôn ngữ khác sẽ rất dễ học. Mình sẽ lấy một ví dụ cực kì đơn giản thế này. Để so sánh hai chuỗi có bằng nhau hay không thì ta sử dụng toán tử bằng Nhưng để tìm một chuỗi bắt đầu bằng chữ Trong Javascript thì regular expression là một chuỗi, nhưng nó không được bao quanh bởi cặp dấu nháy đơn Cú pháp để tạo một chuỗi RegEx như sau: Trong đó:
Ví dụ: Pattern kiểm tra chuỗi có tồn tại chữ "freetuts" không, không phân biệt chữ hoa chữ thường và tìm toàn bộ tài liệu. var pattern = /freetuts/igm; Trong ví dụ này thì:
2. Hàm test() trong javascript RegExĐể kiểm thử một biểu thức regular expression thì chúng ta sẽ sử dụng hàm Trong đó Giá trị của hàm này sẽ trả về Ví dụ: Kiểm tra chuỗi xem trong chuỗi "chào mừng bạn đến với freetuts" có xuất hiện chữ "freetuts" không thì ta viết như sau. let result = /freetuts/.test("chào mừng bạn đến với freetuts"); alert(result); // True Kết quả trả về là 3. Ký tự bắt đầu và kết thúc chuỗi RegEx trong javascriptCấu trúc của một chuỗi luôn có ký tự bắt đầu và kí tự kết thúc. Và trong RegEx cũng có một số ký tự giúp quy ước nơi bắt đầu chuỗi và nơi kết thúc chuỗi. Cấu trúc của nó sẽ như sau: Trong đó ký tự Ký tự bắt đầu chuỗi patternVí dụ: Bạn cần kiểm tra một chuỗi có bắt đầu bằng chữ techtuts hay không? Giả sử chuỗi cần dò tìm là "Website techtuts.net là blog công nghệ". Nếu ta giải bài toán này như cách giải ở phần 2 thì chuỗi pattern sẽ như sau: let result = /techtuts/.test("Website techtuts.net là blog công nghệ"); console.log(result); // True Rõ ràng kết quả không như ta mong muốn, bởi chữ techtuts không phải là chuỗi bắt đầu. Để giải quyết vấn đề này ta sẽ thêm
ký tự let result = /^techtuts/.test("Website techtuts.net là blog công nghệ"); console.log(result); // False Tóm lại, nếu muốn quy ước tìm từ đầu chuỗi thì bạn sử dụng ký tự Ký tự kết thúc chuỗi patternQuay lại yêu cầu bài toán trên, ta cần kiểm tra xem chuỗi đó có phải kết thúc bằng chữ techtuts hay không. Ta sẽ thêm dấu let result = /techtuts$/.test("Website techtuts.net là blog công nghệ"); console.log(result); // False Kết quả false là chính xác. Vậy ta có kết luận như sau: Nếu không khai báo bắt đầu chuỗi hoặc kết thúc chuỗi thì javascript sẽ so khớp tại bất kì vị trí nào bên trong chuỗi, miễn là có xuất hiện giá trị cần tìm. 4. Bảng các biểu thức RegEx trong js căn bảnTrước khi làm việc với những ví dụ thì hãy tham khảo bảng tóm tắt dưới đây. Đây là những biểu thức chính quy regular expression căn bản nhất, được sử dụng nhiều nhất trong lập trình javascript.
Ví dụ 1: Kiểm tra trong chuỗi có xuất hiện chữ Cường hay không? Ví dụ này ta chỉ cần truyền nguyên chuỗi Cường vào pattern là được. var patt = /Cường/; if (patt.test("Tác giả Cường")) { document.write('Trong chuỗi có chữ Cường'); } else { document.write('Trong chuỗi không có chữ Cường'); } Bạn cũng có thể sử dụng trực tiếp ngay chuỗi pattern như ví dụ sau> /freetuts/.test("Chào mừng bạn đến với freetuts.net") Ví dụ 2: Kiểm tra chuỗi có ít nhất một chữ n Ví dụ này hơi đặc biệt nên ta sử dụng dấu if (/n+/.test("hello")) { document.write('Trong chuỗi có chữ n'); } else { document.write('Trong chuỗi không có chữ n'); } Ví dụ 3: Kiểm tra trong chuỗi có xuất hiện ký tự số hay không? Với ví dụ này ta có hai cách giải. Cách thứ nhất sử dụng cặp dấu ngoặc Mình sẽ giải bằng cặp dấu ngoặc if (/[0-9]/.test("hello123")) { document.write('Trong chuỗi có xuất hiện số'); } else { document.write('Trong chuỗi không xuất hiện số'); } Ví dụ 4: Kiểm tra trong chuỗi không hoặc có xuất hiện số Bài này ta sẽ kết hợp cặp dấu ngoặc if (/[0-9]*/.test("freetuts")) { document.write('Luôn luôn chạy'); } else { document.write('Không bao giờ chạy'); } Ví dụ: Kiểm tra trong chuỗi có chữ H hay không? Bài này khá đơn giản là ta chỉ cần truyền chữ H vào như sau: if (/H/.test("hello")) { document.write('Có chữ H'); } else { document.write('Không có chữ H'); } Rõ ràng trong ví dụ có xuất hiện chữ if (/H/i.test("hello")) { document.write('Có chữ H'); } else { document.write('Không có chữ H'); } Các bạn xem phần modifiers ở trên để biết thêm thông tin. 5. Bảng các quy tắc RegEx trong javascript khácỞ trên mình đã cung cấp các quy tắc thường gặp của biểu thức chính quy rồi, thì phần này mình sẽ tổng hợp lại để các bạn dễ dàng ôn tập nhé. ModifiersBảng này gồm 3 ký tự, dùng để khai báo cấu hình của chuỗi pattern.
BracketsBảng các quy tắc liên quan đến dấu ngoặc vuông và ngoặc nhọn.
MetacharactersBảng quy tắc các ký tự đơn.
QuantifiersBảng quy tắc đến số lượng các ký tự.
Để lấy hết các ví dụ trên thì bài viết sẽ rất dài, nên phần này mình chỉ làm 4 ví dụ cơ bản thôi nhé. Các bạn hãy thực hành theo để suy luận và hiểu được ý nghĩa của từng quy tắc. Ví dụ 1: Kiểm tra chuỗi xuất hiện ít nhất 10 chữ N liên tiếp và không phân biệt chữ hoa chữ thường Ta sử dụng cú pháp var pattern = /n{10,}/i; if (pattern.test("10 chu n la nnnnnnnnnn")) { document.write('Chuỗi có NHIỀU hơn 10 chữ n'); } else { document.write('Chuỗi có ÍT hơn 10 chữ n'); } Bài 2: Kiểm tra chuỗi có phải là 'freetuts.net' hay không Để kiểm tra chính xác chuỗi là 'freetuts.net' thì bắt buộc ta phải thêm ký tự bắt đầu Ký tự var pattern = /^freetuts\.net$/i; if (pattern.test("freetuts.net")) { document.write('Chuỗi freetuts.net'); } else { document.write('Không phải chuỗi freetuts.net'); } Bài 3: Kiểm tra chuỗi là các chữ số và dài 8 ký tự Để kiểm tra các chữ số ta
dùng var pattern = /^[0-9]{8}$/; if (pattern.test("12345678")) { document.write('Các số dài 8 ký tự'); } else { document.write('Không phải là số hoặc ngắn hơn 8 ký tự'); } Bài 4: Kiểm tra chuỗi định dạng mã thẻ cào xxxx-xxxx-xxxx-xxxx và x chính là các chữ số. Ta sử dụng var pattern = /^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}$/; if (pattern.test("1234-1232-1321-2312")) { document.write('Mã thẻ hợp lệ'); } else { document.write('Mã thẻ không hợp lệ'); } 6. Dùng hàm string.match lấy kết quả toàn bộ chuỗi regexNgoài phương thức Nếu Cú pháp như sau: Trong đó Kết quả hàm này trả về một mảng các giá trị so khớp với chuỗi pattern. Ví dụ 1: Lấy tất cả các chữ số trong chuỗi "số điện thoại 0979306603". let string = "số điện thoại 0979306603"; var result = string.match(/[0-9]+/img); console.log(result); // ["0979306603"] // Thử đổi chuỗi string sang giá trị khác string = "tôi sinh năm 90, vơi tôi sinh năm 92"; result = string.match(/[0-9]+/img); console.log(result); // ["90", "92"] Ví dụ 2: Nếu không tìm thấy thì sẽ trả về giá trị null. string = "tôi đang học regular expression"; result = string.match(/[0-9]+/img); console.log(result); // null 7. Dùng hàm regex.exec lấy kết quả từng group chuỗi RegExHàm Cú pháp của hàm này như sau: Trong đó, Ví dụ: Viết biểu thức chính quy lấu đường dẫn URL bên trong thẻ img dưới đây. <img src="https://freetuts.net/public/logo/logo.png" /> Nhìn qua cấu trúc chuỗi thì ta sẽ có chuỗi pattern như sau: Bây giờ ta sẽ thử đặt nó vào hàm let string = '<img src="https://freetuts.net/public/logo/logo.png" />'; var result = /<img src="(.+)" \/>/img.exec(string); console.log(result); Kết quả là một mảng gồm hai phần tử: Trong đó:
Để hiểu được ví dụ này thì bạn phải biết khái niệm capturing group trong regular expression.
Vậy, kết quả mà hàm exec trả về chính là một mảng, mỗi phần tử trong mảng là một capturing group, trong chuỗi pattern có bao nhiêu group thì nó sẽ trả về bấy nhiêu phần tử. 8. Lời kếtNhư vậy là mình đã hướng dẫn xong cách sử dụng biểu thức chính quy RegEx trong javascript. Đây là kiến thức thuộc dạng khó, nên để hiểu được nó thì bạn phải thực hành rất nhiều. Vẫn còn khá nhiều phần quan trọng liên quan đến biểu thức chính quy nữa, nhưng vì thời gian có hạn nên mình sẽ trình bày ở một bài khác. |