Sử dụng Regular Expression trong Javascript

Sau khi bạn đã hiểu Regex là gì cũng như cú pháp của Regex, điều quan trọng tiếp theo là sử dụng Regex như thế nào trong các ngôn ngữ lập trình. Thực ra thì cú pháp của Regex đều như nhau trong các ngôn ngữ lập trình nhưng mỗi ngôn ngữ lập trình lại cung cấp các hàm và cách xử lý khác nhau đối với Regex.

Trong bài viết này, Passionery sẽ trình bày cho bạn về cách sử dụng của Regex trong Javascript và một số hàm cần nắm để xử lý các mẫu (pattern) của Regex trong Javascript.

Trong Javascript, các mẫu (pattern) của Regular expression được khai báo bằng 2 cách:

  1. Khai báo bằng 2 dấu / ở đầu và cuối của mẫu
  2. Khai báo thông qua đối tượng RegExp

#1 Khai báo Regex bằng 2 dấu /

Cú pháp của cách khai báo này như sau:

[code type="JavaScript"]var value = /pattern/flag;[/code]

Trong đó pattern là mẫu chuỗi của Regex và flag là một ký tự dùng để xác định cách tìm kiếm của mẫu chuỗi đó. Tham số flag bao gồm 3 giá trị sau:

  • g (global): thực hiện tìm kiếm toàn bộ chuỗi, trùng khớp với tất cả các chuỗi hợp với mẫu.
  • i (case-insensitive): thực hiện tìm kiếm chuỗi nhưng không phân biệt chữ hoa, chữ thường
  • m (multiline): thực hiện tìm kiếm ở chế độ đa dòng.

Ví dụ:

[code type="JavaScript"]var myRegExp = /[a-zA-z]+/g;[/code]

#2 Khai báo Regex thông qua đối tượng RegExp

Cú pháp của cách khai báo này như sau:

[code type="JavaScript"]var value = new RegExp(pattern, flag);[/code]

Ví dụ:

[code type="JavaScript"]var myRegExp = new RegExp("[a-zA-z]+", "g");[/code]

Đối tượng RegExp có cung cấp các phương thức như test, exec để giúp bạn xử lý mẫu chuỗi

Phương thức test

Phương thức test là một phương thức thuộc về đối tượng RegExp dùng để kiểm tra mẫu chuỗi, nó trả về một giá trị boolean, true nếu chuỗi đích khớp với mẫu chuỗi của bạn và false nếu như không khớp.

Cú pháp:

[code type="JavaScript"]var regex = new RegExp(pattern, flag); // khởi tạo đối tượng RegExp regex.test(str); // gọi phượng thức test để kiểm tra chuỗi[/code]

hoặc có thể khai báo như sau

[code type="JavaScript"]/pattern/.test(str);[/code]
  • pattern: mẫu chuỗi của Regular Expression
  • flag: xác định cách tìm
  • str: chuỗi ký tự mà ta cần kiểm tra trùng khớp

Sau đây là ví dụ về cách sử dụng hàm test:

[code type="JavaScript"]<p id="fox">The quick brown fox jumps over the lazy dog</p> <button onclick="func()">Demo</button> <p id="demo"></p> <script> function func() { // khởi tạo đối tượng RegExp với pattern là /fox/ - tìm kiếm trên toàn bộ chuỗi và ko phân biệt chữ hoa chữ thường // có thể khai báo tắt như sau: var regex = /fox/gi var regex = new RegExp("fox", "gi"); text = document.getElementById("fox").innerHTML; // gọi hàm test để kiểm tra chuỗi - trả về true hoặc false document.getElementById("demo").innerHTML = regex.test(text); } </script>[/code]

Khi bạn chạy đoạn code ở trên, nó sẽ trả về true vì mẫu chuỗi fox trùng khớp với chữ khớp trong chuỗi "The quick brown fox jumps over the lazy dog"

Phương thức exec

Phương thức exec cũng là một phương thức thuộc về đối tượng RegExp nhưng không giống với phương thức test là chỉ trả về true hoặc false. Phương thức exec sẽ thực hiện tìm kiếm các chuỗi ký tự với một mẫu chuỗi xác định và sẽ trả về một mảng (array) chứa các ký tự trùng khớp với mẫu chuỗi, nếu không tìm thấy ký tự trùng khớp, hàm exec sẽ trả về giá trị null.

Cú pháp:

[code type="JavaScript"]var regex = new RegExp(pattern, flag); regex.exec(str);[/code]

hoặc có thể khai báo như sau

[code type="JavaScript"]/pattern/.exec(str);[/code]
  • pattern: mẫu chuỗi của Regular Expression
  • flag: xác định cách tìm
  • str: chuỗi ký tự mà ta cần kiểm tra trùng khớp

Sau đây là ví dụ về cách sử dụng hàm exec:

[code type="JavaScript"]<p id="fox">The quick brown fox jumps over the lazy dog</p> <button onclick="func()">Demo</button> <p id="demo"></p> <script> function func() { // lấy nội dung của chuỗi với id = fox text = document.getElementById("fox").innerHTML; // gọi hàm exec để kiểm tra chuỗi - trả về mảng chứa ký tự trùng khớp document.getElementById("demo").innerHTML = /quick/.exec(text); } </script>[/code]

Khi chạy đoạn code trên, nó sẽ trả về chữ quick vì hàm exec tìm thấy sự trùng khớp giữa mẫu chuỗi quick và chữ quick trong chuỗi "The quick brown fox jumps over the lazy dog"

No comments:

Powered by Blogger.