Regular Expression trong javascript

Regular Expression trong javascript chỉ bạn code javascript để đánh giá, tìm, trích xuất dữ liệu từ các chuỗi dựa trên 1 pattern cho trước.

A. Regular Expression là gì

Regular Expression (biểu thức chính quy) – viết tắt là regexp – là một chuỗi diễn tả một mẫu ký tự dùng để so khớp với 1 chuỗi khác. RexExp thường dùng trong các bài toán tìm kiếm và xử lý theo mẫu (trừu tượng) chứ không dựa vào những chuỗi ký tự cố định (rõ ràng), ví dụ:

  • So khớp các giá trị nhập trong form với mẫu cho trước (dùng khi validate form)
  • Tách chuỗi theo các mẫu cho trước
  • Tìm kiếm chuỗi con theo công thức nào đó (ví dụ tìm chuỗi có 3 ký tự bắt đầu bằng T)
  • Thay thế đoạn ký tự

B. Sử dụng regular expression trong javascript   

Bạn có hai cách để dùng Regular expression trong javascript, đó là dùng regular expression literal và cách dùng đối tượng regexp.

1. Dùng Regular expression Literal (RexpExp thuần)

Cú pháp sử dụng như sau: pattern.test(string) Trong đó pattern là mẫu kiểm tra, còn string là chuỗi cần kiểm tra. Ví dụ:

<script>
   pat =/^PS/;
   masv = "PD1975327"; 
   kq = pat.test(masv); console.log(kq); //false

   masv = "PS19327"; 
   kq = pat.test(masv); console.log(kq); //true
</script>

2. Dùng đối tượng RegExp

Bạn tạo biểu thức Regular Expression bằng lện new RegExp

<script>
   p = new RegExp("^PS");
   masv = "ps1975327"; kq = p.test(masv); console.log(kq); //false
   masv = "PS1975327"; kq = p.test(masv); console.log(kq); //true
</script>

C. Sử dụng modifier cho RegExp

Bạn có thể chỉ định 1 số thay đổi (modifier) về cách hoạt động cho biểu thức regexp. Các modifier khai báo phía sau regexp (dùng nhiều modifier kết hợp nhau cũng được). Cú pháp dùng là thế này:   /pattern/modifiers . Sau đây là các modifiers thường dùng :

  • i : không phân biệt chữ hoa thường.
  • g: tìm toàn chuỗi
  • m: có xử lý ký tự xuống dòng khi so khớp
<script>
   str = "Cơ tắc Xan hề khốn tắc miên"; 
   mau = /xan/; kq = mau.test(str); console.log(kq); //false
   mau = /xan/i; kq = mau.test(str); console.log(kq); //true
</script>
<script>
   str = "Đời Đẹp Lắm";
   p = new RegExp("đẹp");  kq = p.test(str); console.log(kq); //false
   p2 = new RegExp('đẹp','i'); kq = p2.test(str); console.log(kq); //true
</script>
<script>
   str = "Đời dep \nlam";   console.log(str);  
   mau =/^lam/; kq = mau.test(str); console.log(kq); //false
   mau =/^lam/m; kq = mau.test(str); console.log(kq); //true
</script>

D. Các hàm dùng khi so khớp

Để thực hiện so khớp một mẫu với một chuỗi nào đó, bạn sẽ dùng các hàm

  • test()  : Kiểm tra chuỗi có thõa mãn với mẫu không, kết quả true/false
  • exec() : Trả về 1 mảng chứa thông tin của kết quả đầu tiên tìm được.
  • match(): Đây là hàm trong chuỗi, trả về 1 mảng tất cả các giá trị khớp với mẫu
  • search() : Đây là hàm trong chuỗi, trả về vị trí khớp với mẫu.
  • replace() : Đây là hàm trong chuỗi, giúp tìm và thay thế
  • split(): Đây là hàm trong chuỗi, giúp tách chuỗi thành mảng
<script>
    str = "15, 290, 4683, 574, 78"; 
    mau =/\d{3,4}/; kq = mau.test(str); console.log(kq); //true
 
    mau =/\d{3,4}/; kq = mau.exec(str); console.log(kq); 
    //["290",index: 4,input:"15,290,4683,574,78",groups: undefined]
 
    mau =/\d{3,4}/g; kq = str.match(mau); 
    console.log(kq); //["290", "4683", "574"]

    str="Nói từ từ nhưng phải suy nghĩ nhanh";
    arr = str.split(/\s/);
    console.log(arr); 
    //['Nói','từ','từ','nhưng','phải','suy','nghĩ','nhanh']

    str="C&am ( on doi * moi som mai ? thuc day";
    newstr = str.replace(/[^a-zA-Z0-9\s]/g,"");
    console.log(newstr); 
    //Cam  on doi  moi som mai  thuc day
 </script>

E. Ý nghĩa một số ký tự đặc biệt trong mẫu

Trong mẫu, bạn có thể dùng số ký tự đặc biệt sau

  • [abc] : Kiểm tra chuỗi có chứa 1 trong các ký tự trong ngoặc vuông không
  • [^abc] : Tìm các ký tự không phải là các ký tự trong ngoặc vuông
  • [0-9] : diễn tả 1 ký số
  • [a-z] : 1 ký tự thường
  • [A-Z]: diễn tả 1 ký tự hoa
  • (x|y) : tìm chuỗi khớp với x hoặc y]
  • \d : diễn tả 1 ký số
  • \D : diễn tả không phải ký số
  • \s: diễn tả 1 khoảng trắng
  • \w: diễn tả 1 word character (chữ cái), gồm a-z, A-Z, 0-9, _
  • \W: diễn tả 1 non-word character (không phải chữ cái). Ví dụ các ký tự %, $, ! …
  • \b: diễn tả dò tìm ở bắt đầu hoặc kết thúc 1 từ trong chuỗi. Ví dụ với mẫu \bLO tìm chữ LO nằm ở ví trí bắt đầu của các từ trong chuỗi, còn mẫu LO\b sẽ tìm chữ LO ở cuối các từ trong chuỗi. Tham khảo ví dụ ở đây : https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_regexp_boundary
<script>
str="Trước đèn xem chuyện Tây Minh. Ngẫm cười hai chữ nhân tình éo le";
mau=/[i\s]nh/g; 
kq = str.match(mau); 
console.log(kq); // ["inh", " nh"]
</script>
<script>
   str = "Nghề IT giàu"; 
   mau =/[^\sIT]/g; kq = str.match(mau); 
   console.log(kq); // ["N", "g", "h", "ề", "g", "i", "à", "u"]
</script>
  • n+ : quét qua chuỗi để tìm chuỗi con n, số lượng ký tự n thể ít nhất 1
<script>
   str = "Google.com"; 
   kq = str.match(/o+/g); console.log(kq); // ["oo", "o"]
</script>
  • n* : quét qua chuỗi và tìm chuỗi con là n với độ dài có thể là 0
<script>
    str = "tttha.th"; 
    kq = str.match(/t*/g); 
    console.log(kq); // ["ttt", "", "", "", "t", "", ""]
</script>
  • n? Quét qua từng ký tự của chuỗi gốc, kiểm tra các ký tự n xem có không
<script>
str = "Vuii Điii Nhé"; 
kq = str.match(/i?/g); 
console.log(kq); //["", "", "i", "i", "", "", "", "", "i", "", "", "", "", ""]
</script>
  • n$: kiểm tra chuỗi có phải kết thúc bằng n không
<script>
    domain1 = "longnv.name.vn"; domain2 = "google.com";
    kq = /vn$/.test(domain1); console.log(kq); // true
    kq = /vn$/.test(domain2); console.log(kq); // false
</script>
  • ^n: Kiểm tra chuỗi có phải bắt đầu bằng n không
<script>
    url1= "https://longnv.name.vn"; url2 = "https://google.com";
    kq = /^https/.test(url1); console.log(kq); // true
    kq = /^http:\/\//.test(url2); console.log(kq); // false
</script>
  • n{x}: tìm chuỗi con chứa x ký tự n
<script>
svRot = "Lại Thi Hoài PS16742 Phạm Kỷ Luật PS18243 ";
arr_MaSV = svRot.match(/\d{5}/g); 
console.log(arr_MaSV); // ["16742", "18243"]
</script>
  • n{x,y}:  tìm chuỗi con chứa từ x đến y ký tự n
<script>
sotrang = "Bỉ Vỏ 238 Lĩnh Nam 1245 Bố già 305 Số Đỏ 98 ";
kq = sotrang.match(/\d{3,4}/g); 
console.log(kq); // ["238", "1245", "305"]
</script>

Mời bạn thực hiện : Code như mẫu dưới, trong sự kiện onblur của input hãy thực hiện validate dữ liệu mà user đã gõ. Kiểm tra dữ liệu đó có phải định dạng số điện thoại hay không? Biết rằng số điện thoại bắt đầu bằng các đầu số: 09, 03 và có 10 chữ số

<div>
    <label>Số điện thoại</label>
    <input id="phonenum">
    <span style="color:red" id="msgPhoneNum"></span>
</div>
<script>
    inputPhoneNum = document.querySelector("#phonenum");
    msgPhoneNum = document.querySelector("#msgPhoneNum");
    inputPhoneNum.onblur=function(){
        v = this.value;
        pattern = /(09|03)+([0-9]{8}\b)/g;
        if (pattern.test(v)==false){
            msgPhoneNum.innerText="Bạn nhập không đúng số điện thoại";
        }
        else {
            msgPhoneNum.innerText="";
        }
    }
</script>

Regular Expression trong javascript vẫn chưa hết và nó có rất nhiều ứng dụng trong thực tế để xử lý chuỗi. Các em chịu khó thực tập nhé, tham khảo thêm tài liệu ở đây nè https://www.w3schools.com/jsref/jsref_obj_regexp.asp