Biểu thức chính quy Regular trong javascript

Chào các bạn

Trong bài viết này chúng ta cùng nhau tìm hiểu về đối tượng Regexp

Cú pháp

1let reg = new RegExp(pattern, flags);

hoặc Slashes dấu /

1let reg = /abc/; // Không có cờ

Tạo biểu thức Regexp

Để tạo biểu thức tìm kiếm các bạn có thể sử dụng 1 trong 2 cách trên.

new Regexp()

1let str = "Hồ Quang Trí";
2
3let reg1 = new RegExp("Quang");     // không có cờ
4let reg2 = new RegExp(/trí/, "i"); // Có cờ là i
5
6console.log(typeof reg1); // object

Slashes dấu /

1let str = "Hồ Quang Trí";
2
3let reg1 = /Quang/; // không có cờ
4let reg2 = /trí/i;  // Có cờ là i
5
6console.log(typeof reg1); // object

Thông thường thì dấu / được sử dụng thường xuyên hơn. Còn new RegExp() thực hiện điều gì đó mà tùy biến hơn.

1let str = "Hồ Quang Trí";
2
3let input = prompt("Nhập vào thứ bạn tìm");
4let reg = new RegExp(input, "i");
5
6let ketQua = str.match(reg); 
7
8console.log(ketQua); // ['T', index: 9, input: 'Hồ Quang Trí', groups: undefined]

Ví dụ ở trên là đầu vào do người dùng nhập. Nếu mình nhập t thì đầu ra sẽ như trên. Nó tùy biến cao hơn dấu /

Cờ

Cờ của biểu thức regexp có thể ảnh hưởng đến kết quả tìm kiếm của chúng ta.

1. i

   • Nó giúp chúng ta tìm kiếm trong chuỗi không phân biệt ký tự HOA hoặc thường.

2. g

   • Nó giúp chúng ta tìm kiếm toàn bộ trong chuỗi. Nếu không có cờ g thì chỉ có một kết quả đầu tiên được trả về.

3. m

   • Nó giúp chúng ta tìm kiếm trên nhiều dòng khác nhau.

4. s

   • Nó giúp cho chế độ dấu chấm . khớp với \n

5. y

   • Nó giúp chúng ta tìm kiếm chính xác vị trí trong chuỗi.

6. u

   • Cho phép hỗ trợ Unicode đầy đủ.

Trước mắt là vậy đã ở đây chúng ta nói ra lý thuyết trước. Sau đó từng bài sau mình sẻ đi từ từ từng cái mới giải thích hết được.

Phương pháp

Để thực hiện tìm kiếm trong chuỗi. Đối tượng Regexp có rất nhiều phương pháp

exec()

Ví dụ:

1let str = "Hồ Quang Trí";
2
3let ketQua = /Quang/.exec(str);
4
5console.log(ketQua); // ['Quang', index: 3, input: 'Hồ Quang Trí', groups: undefined]

• /Quang/ Trận đấu tìm kiếm
• str Chuổi nguồn

test()

Ví dụ:

1let str = "Hồ Quang Trí";
2
3let ketQua = /quang/i.test(str);
4
5console.log(ketQua); // true

• /quang/i Trận đấu cần kiểm tra
• str Chuỗi nguồn

Ở ví dụ trên mình đã tinh chỉnh hành vi của trận đấu bằng cờ i. Ngay bây giờ nó sẽ không phân biệt hoa hay thường. Tất cả đều bình đẳng.

search()

Ví dụ:

1let str = "Hồ Quang Trí";
2
3let ketQua = str.search(/Quang/);
4
5console.log(ketQua); // 3

match()

Ví dụ:

Không có cờ g

1let str = "Hồ Quang Trí Hồ Quang Trí";
2
3let ketQua = str.match(/Quang/);
4
5console.log(ketQua); // ['Quang', index: 3, input: 'Hồ Quang Trí', groups: undefined]

Có cờ g

1let str = "Hồ Quang Trí Hồ Quang Trí";
2
3let ketQua = str.match(/Quang/g);
4
5console.log(ketQua); // ['Quang', 'Quang']

matchAll()

Ví dụ:

1let str = "Hồ Quang Trí Hồ Quang Trí";
2
3let iterable = str.matchAll(/Quang/g); // Cờ g là bắt buộc
4
5console.log(iterable.next()); // {value: ['Quang', index: 3, input: 'Hồ Quang Trí Hồ Quang Trí', groups: undefined, done: false}

Lưu ý: Nếu ví dụ trên ko có cờ g thì sẽ văng lỗi

1let str = "Hồ Quang Trí Hồ Quang Trí";
2
3let iterable = str.matchAll(/Quang/); // Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument

split()

Ví dụ:

1let str = "Hồ Quang Trí";
2
3let ketQua = str.split(/\s/);
4
5console.log(ketQua); // ['Hồ', 'Quang', 'Trí']

\s ở trên là một lớp ký tự đặt biệt. Ở đây thì ý mình cắt chuỗi theo 1 kí tự khoảng trắng. Nhưng vì khó nhìn quá nên mình dùng \s cho bạn dể hình dung.

replace()

Ví dụ:

Không có cờ g

1let str = "Hồ Quang Trí";
2
3let ketQua = str.replace(/\s/, '-'); // Thay thế ký tự khoảng trắng thành ký tự -
4
5console.log(ketQua); // Hồ-Quang Trí

Có cờ g

1let str = "Hồ Quang Trí";
2
3let ketQua = str.replace(/\s/g, '-'); // Thay thế ký tự khoảng trắng thành ký tự -
4
5console.log(ketQua); // Hồ-Quang-Trí

replaceAll()

Ví dụ:

1let str = "Hồ Quang Trí";
2
3let ketQua = str.replaceAll(/\s/g, '-'); // Thay thế ký tự khoảng trắng thành ký tự -
4
5console.log(ketQua); // Hồ-Quang-Trí

Phương pháp này thì thật ra cũng không khác gì phương pháp replace() mà có cờ g cả.

Có vẽ nhiều và phức tạp phải không các bạn. Đơn nhiên chúng ta cũng phải từ từ mới hiểu được.

Lưu Ý: Tất cả ví dụ trên là mình chỉ demo cho các bạn xem cách sử dụng như thế nào thôi. Thật ra còn rất rất nhiều thứ nữa. Chúng ta sẽ tìm hiểu từ từ cách nó chạy sau.

Tổng kết

Trong bài viết này mình đã giới thiệu sơ lượt qua về đối tượng Regexp.

Ở đây cũng chỉ là khởi đầu nhỏ thôi. Còn rất rất là nhiều thứ phức tạp đằng sau nữa.