Phạm vi hoặc trong biểu thức chính quy Regexp

Chào các bạn

Cũng như mọi khi. Trong bài viết này mình sẽ nói phạm vi hoặc |.

Phạm vi

Phạm vi hoặc | cũng là một ký tự đặc biệt mà cũng bắt buộc chúng ta phải nhớ để làm việc với đối tượng Regexp một cách hiệu quả nhất.

Cú pháp

1let str = "0123456789";
2
3let reg = /1|7/;

Trong ví dụ trên trận đấu /1|7/ có ý nghĩa là. Một hoặc Bảy. Nó cũng tương đương với dấu hoặc || trong javascript thôi. Nhưng trong đối tượng Regexp thì chỉ có một dấu hoặc |

1let str = "0123456789";
2
3let reg = /1|7/;
4
5let ketQua = reg.exec(str);
6
7console.log(ketQua); // ['1', index: 1, input: '0123456789', groups: undefined]

Như các bạn thấy khi chúng ta chạy reg.exec(str) thì bây giờ chúng ta đã có một mảng kết quả. Cái chúng ta quan tâm là kết quả ngay vị trí 0 thôi nhé. Đó chính là chuỗi số "1".

Bây giờ chúng ta thay đổi chuổi nguồn của chúng ta bằng cách xóa ký tự số 1 đi thì xem kết quả thế nào nhé.

1let str = "023456789"; // Bỏ số 1 đi
2
3let reg = /1|7/;
4
5let ketQua = reg.exec(str);
6
7console.log(ketQua); // ['7', index: 6, input: '023456789', groups: undefined]

Lưu Ý: Cuộc gọi chức năng bây giờ khác nhé. Bình thường mấy bài trước mình hay dùng match() nhưng bài này dùng exec(). Để giúp các bạn làm quen nó.

• Chức năng match()
  • str chấm . chức năng match() truyền vào reg. Thành str.match(reg)
• Chức năng exec()
  • reg chấm . chức năng exec() truyền vào str. Thành reg.exec(str)

Ngay bây giờ đầu ra nó đã khác. Vậy cách chạy nó thế nào. Cũng không có gì khó cả. Chỉ hình dung tí là ra thôi.

1// 023456789
2// 1 so sánh 0 => false
3// 7 so sánh 0 => false
4// 1 so sánh 2 => false
5// 7 so sánh 2 => false
6// ...
7// 1 so sánh 7 => false
8// 7 so sánh 7 => true
9// 7

Đó là cách ví dụ nó so sánh thôi nhé các bạn. Chứ thuật toán nó viết viết thì mình làm sao mà biết được.

Đơn nhiên không chỉ có một cái dấu hoặc | được. Mà chúng ta có thể thêm nhiều tùy ý. Đơn nhiên đi cùng với đó độ phức tạp sẽ tăng lên.

1let str = "0234567891"; // Bỏ số 1 đi
2
3let reg = /1|7|4|3|8/;
4
5let ketQua = reg.exec(str);
6
7console.log(ketQua); // ['3', index: 2, input: '0234567891', groups: undefined]

Bây giờ đầu ra cũng đả khác. Các bạn nhìn trên ví dụ là thấy. Cuối cùng thì chúng ta nên thay đổi trận đấu và chuỗi nguồn lại thì hay hơn. Chứ nó đơn giản vậy lấy cái gì mà gải thích.

1let str = "02345 67891 53562 53456"; 
2
3let reg = /3\d?2|\d4?5/;
4
5let ketQua = reg.exec(str);
6
7console.log(ketQua); // ['345', index: 2, input: '02345 67891 53562 53456', groups: undefined]

Bây giờ mình đã thay đổi chuỗi nguồn cũng như trận đấu. Ngay bây giờ các trận đấu của chúng ta có ý nghĩa như sau.

• Trận đấu /3\d?2|\d4?5/ này có 3 ý nghĩa.
  1. 3\d?2 Bắt đầu bằng số 3 tiếp đến có Không hoặc Một số \d? tiếp đến là số 2
     • Khớp với 32 302 đến 392
  2. \d4?5Bắt đầu bằng số \d tiếp theo Không hoặc Một số 4 tiếp theo là số 5
     • Khớp với 05 đến 95 hoặc 045 đến 945
  3. | Bây giờ thì phạm vi hoặc sẻ hỏi một trong 2 điều kiện ở trên.
     • 3\d?2 Nếu đúng thì kết quả của trận đấu này trả về hoặc nó sẻ hỏi tiếp
     • \d4?5 Nếu đúng thì kết quả này sẻ trả về. Nếu không thì null sẻ trả về. Cái này tùy thuộc phương pháp ta đang dùng

Ví dụ null trả về.

1let str = ""; // Chuỗi nguồn để rỗng test cho dể
2
3let reg = /3\d?2|\d4?5/;
4
5let ketQua = reg.exec(str);
6
7console.log(ketQua); // null

Ở tất cả các ví dụ trên chúng ta dùng trận đấu nhưng không có cờ g. Bây giờ chúng ta thêm cờ g cho nó nhé.

1let str = "02345 67891 23421 53562 53456"; 
2
3let reg = /3\d?2|\d4?5/g; // Đả thêm cờ g
4
5let ketQua = reg.exec(str);
6
7console.log(ketQua); // ['345', index: 2, input: '02345 67891 23421 53562 53456', groups: undefined]

Bây giờ mình đã thêm cờ g. Nhưng tại sao kết quả trận đấu của chúng ta vẫn không có gì thay đổi. Lý do là do phương pháp exec() này nhé các bạn.

Vậy muốn xem được hết tất cả các kết quả thì chúng ta phải lặp qua nó.

1let str = "02345 67891 23421 53562 53456";
2
3let reg = /3\d?2|\d4?5/g; // Đả thêm cờ g
4
5while (true) {
6    let ketQua = reg.exec(str);
7    if (ketQua === null) {
8        break;
9    }
10    console.log(ketQua); 
11    // ['345', index: 2, input: '02345 67891 23421 53562 53456', groups: undefined]
12    // ['342', index: 13, input: '02345 67891 23421 53562 53456', groups: undefined]
13    // ['35', index: 19, input: '02345 67891 23421 53562 53456', groups: undefined]
14    // ['345', index: 25, input: '02345 67891 23421 53562 53456', groups: undefined]
15}

Bây giờ thì toàn bộ kết quả của chúng ta đã xuất ra như dự tính. Nếu bạn không thích kết quả có nhiều thứ không cần thiết như thế. Thì chúng ta có thể dùng phương pháp khác.

1let str = "02345 67891 23421 53562 53456"; 
2
3let reg = /3\d?2|\d4?5/g; 
4
5let ketQua = str.match(reg)
6
7console.log(ketQua); // ['345', '342', '35', '345']

Ở ví dụ trên mình dùng phương pháp match(). Đơn nhiên chúng ta cũng có thể dùng phương pháp matchAll()

1let str = "02345 67891 23421 53562 53456";
2
3let reg = /3\d?2|\d4?5/g;
4
5let iterable = str.matchAll(reg);
6
7let ketQua = [...iterable];
8
9console.log(ketQua);
10
11// [
12// ['345', index: 2, input: '02345 67891 23421 53562 53456', groups: undefined]
13// ['342', index: 13, input: '02345 67891 23421 53562 53456', groups: undefined]
14// ['35', index: 19, input: '02345 67891 23421 53562 53456', groups: undefined]
15// ['345', index: 25, input: '02345 67891 23421 53562 53456', groups: undefined]
16// ]

Đơn nhiên chúng ta cũng có thể lặp bằng vòng lặp for of. Vì nó là một đối tượng iterable cái mà vòng lặp for of cần.

Tổng kết

Trong bài viết này mình đã nói qua ý nghĩa của phạm vi hoặc |. Ý nghĩa của nó đơn giàn là Hoặc a Hoặc b Hoặc c Hoặc n cái gì đó thôi.