Chủ đề nổi bật
03/08/2018, 10:01

RegExp - Regular Expression trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức chính quy ( Regular Expression ) để xử lý chuỗi nâng cao. Như ta biết Regular ...

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức chính quy (Regular Expression) để xử lý chuỗi nâng cao. 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à nó đư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.

Regular Expression được ghi tắt là RegExp nên để ngắn gọn thì trong bài này mình sẽ nói là RegExp nhé các bạn.

1. Regular Expression trong Javascript

Để hiểu rõ hơn về Regular Expression thì bạn nên học qua serie tìm hiểu Regular Expression trong PHP vì trong serie đó mình viết khá chi tiết và đầy đủ. Và để không mất thời gian viết lại những gì đã viết thì phần này mình chỉ nói sơ sơ qua thôi nhé.

Note: 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 ' hoặc nháy kép " mà nó được bao quanh bởi cặp dấu /.

Cú pháp:

/pattern/modifiers

Trong đó:

  • pattern là chuỗi Regular Expression
  • modifiers là thông số cấu hình cho chuỗi pattern và nó có các giá trị:
    • i : so khớp không quan tâm đến chữ hoa chữ thường
    • 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 (multiline)

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ì:

  • pattern là freetuts
  • modifiers là igm

2. Các quy tắc Regular Expression căn bản

Sau đây là một số quy tắc căn bản thường hay sử dụng trong Regular Expression.

Expression Description
[abc] Tìm các chữ cái a,b hoặc c
[0-9] hoăc [a-z]  Tìm các ký tự từ 0-9 hoặc từ a-z
(x|y) ìm ký tự x hoặc y
d Tìm các chữ số
s Tìm khoảng trắng
n+ Tìm 1 hoặc nhiều chữ n liên tiếp nhau
n* Tìm 0 hoặc nhiều chữ n liên tiếp nhau
n? Tìm 0 hoặc 1 chữ n

Bây giờ mình sẽ thực hành một vài ví dụ nhé. Nhưng trước khi đi vào ví dụ thì mình xin giới thiệu một hàm trong parttern dùng để kiểm tra một chuỗi đó là hàm test().

Cú pháp: pattern.test(string)

Trong đó:

  • pattern là chuỗi pattern
  • string là chuỗi cần kiểm tra.

Kết quả trả về: TRUE nếu khớp và FALSE nếu không khớp.

Ví dụ: Kiểm tra trong chuỗi có xuất hiện chữ freetuts hay không?

Ví dụ này ta chỉ cần truyền nguyên chuỗi freetuts vào pattern là xử lý được.

XEM DEMO

var patt = /freetuts/;
if (patt.test("Chào mừng bạn đến với code24h.com")) {
    document.write('Trong chuỗi có chữ freetuts');
}
else {
    document.write('Trong chuỗi không có chữ freetuts');
}

Với ví dụ này bạn có thể sử dụng trực tiếp hàm test() trong pattern cũng được.

/freetuts/.test("Chào mừng bạn đến với code24h.com")
Ví dụ: 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 + trong bảng RegEx căn bản trên, nó có tác dụng kiểm tra một chuỗi có ít nhất 1 ký tự cần tìm kiếm.

XEM DEMO

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ụ: Kiểm tra trong chuỗi có xuất hiện 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 [0-9] và cách thứ hai là dùng ký hiệu d.

Trong ví dụ này mình giải bằng cặp dấu ngoặc [0-9].

XEM DEMO

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ụ: 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 [0-9] và ký hiệu * trong bảng trên. Rõ ràng trường hợp này thì chuỗi RegEx luôn đúng bởi vì ta có 2 trường hợp XUẤT HIỆN hoặc KHÔNG XUẤT HIỆN.

XEM DEMO

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:

XEM DEMO

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ữ h mà tại sao nó báo không xuất hiện? Lý do là trong chuỗi pattern chúng ta kiểm tra chữ in HOA nhưng trong chuỗi cần kiểm tra thì lại có chữ in thường nên nó báo sai. Để giải quyết thì ta thêm chữ i đằng sau chuỗi pattern.

XEM DEMO

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.

3. Lời kết

Trong bài mình cũng chỉ đưa ra các ví dụ không có tính ứng dụng trong thực tế nhưng bài này giúp bạn làm quen với biểu thức chính quy RegEx trong Javascript. Nó thuộc dạng kiến thức nâng cao nên rất khó, vì vậy bạn hãy thực hành kỹ để bài tiếp theo dễ hiểu bài hơn. .

Còn khá nhiều bài tập nhưng bạn cần phải biết nhiều hơn nữa các biểu thức Regular Expression và vấn đề này mình sẽ trình bày ở bài tiếp theo.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

Image Map trong JavaScript

Bạn có thể sử dụng JavaScript để tạo Image map ở Client-Side. Các Image map được kích hoạt bởi thuộc tính usemap cho thẻ <img /> và được định nghĩa bởi các thẻ mở rộng đặc biệt <map> và <area>. Hình ảnh mà tạo bản đồ đó được chèn vào trong trang bởi sử dụng phần tử ...

Tài liệu tham khảo & Framework cho Javascript

Dưới đây chúng tôi liệt kê tất cả các nguồn tài liệu hữu ích và Framework cho JavaScript. Bạn nên sử dụng chúng để thực hành cũng như hiểu sâu hơn những chủ đề đã được đề cập trong loạt bài này. Các JavaScript Framework hàng đầu: Follow fanpage của ...

Xử lý lỗi trong JavaScript

Có 3 kiểu lỗi trong chương trình: (a) lỗi cú pháp (Syntax Error), (b) lỗi trong khi chạy chương trình (Runtime Error), và (c) lỗi về tính logic của cấu trúc chương trình (Logical Error). Syntax Error Lỗi cú pháp (Syntax Error), cũng được gọi là parsing error, xảy ra tại thời gian biên dịch ...

Đa phương tiện (Multimedia) trong JavaScript

Đối tượng navigator trong JavaScript bao gồm một đối tượng con gọi là plugins . Đối tượng này là một mảng, với một cổng vào (entry) cho mỗi plug-in được cài đặt trên trình duyệt. Đối tượng navigator.plugins chỉ được hỗ trợ bởi Netscape, Firefox và Mozilla. Ví dụ Dưới đây là ví dụ minh ...

Các hàm có sẵn trong JavaScript

Đối tượng Number chỉ chứa các phương thức mặc định mà là một phần của sự định nghĩa của mỗi đối tượng. Phương thức Miêu tả constructor() Trả về hàm mà tạo sự instance của đối tượng này. Theo mặc định, nó là đối tượng Number. toExponential() Làm một số hiển thị ở dạng số mũ, ...

Debug trong JavaScript

Trong khi mã hóa chương trình, các nhà lập trình có thể tạo ra các lỗi. Một lỗi trong một chương trình hoặc một script được xem như là một bug . Tiến trình tìm kiếm và sửa các bug được gọi là dubugging và là một phần bình thường của tiến trình lập trình. Chương này giới thiệu một số công ...

Document Object Model (DOM) trong JavaScript

Mỗi trang web cư ngụ bên trong một cửa sổ trình duyệt mà có thể xem như là một đối tượng. Một đối tượng Document biểu diễn tài liệu HTML được hiển thị trong cửa sổ đó. Đối tượng Document có nhiều thuộc tính đa dạng như các đối tượng khác mà cho phép truy cập và chỉnh sửa nội dung tài liệu. ...

Đối tượng Boolean trong JavaScript

Miêu tả Đối tượng Boolean biểu diễn hai giá trị, hoặc "true" hoặc "false". Nếu tham số value bị bỏ qua hoặc là 0, -0, null, false, NaN , undefined, hoặc một chuỗi trống (""), đối tượng có một giá trị khởi tạo là false. Cú pháp Sử dụng cú pháp sau để tạo một đối tượng Boolean . ...

Đối tượng String trong JavaScript

Đối tượng String giúp bạn làm việc với một dãy các ký tự; nó giúp xử lý các kiểu dữ liệu chuỗi gốc trong JavaScript với một số phương thức giúp đỡ. Khi JavaScript tự động biến đổi giữa chuỗi gốc và các đối tượng String, bạn có thể gọi bất kỳ phương thức giúp đỡ nào của đối tượng String ...

Điều hướng trang (Redirect) trong JavaScript

Điều hướng lại trang là gì? Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang . Khái niệm này khác với: JavaScript – Refresh trang. Có nhiều lý do khác nhau để tại sao bạn muốn ...