JAVASCRIPT – REGULAR EXPRESSION

Tìm hiểu Regex

Regex là gì ?

RegEx (Regular Expression) là một “biểu thức chính quy” dùng để mô tả một mẫu chuỗi (String pattern) được sắp xếp theo một quy luật nhất định nào đó (ví dụ: địa chỉ email, số điện thọai, ngày tháng…).

Ví dụ: Khi bạn tìm 1 đoạn text, bạn có thể sử dụng một mẫu chuỗi để mô tả cái cần tìm.

• Một mẫu đơn giản có thể là một ký tự đơn.
• Mẫu phức tạp hơn có thể bao gồm nhiều ký tự, và có thể sử dụng để phân tích ngữ pháp, kiểm tra định dạng, thay thế và nhiều việc khác nữa.

Khái niệm về biểu thức?

Một biểu thức bao gồm các toán tử và các toán hạng:

Toán tử : các phép toán ( Ví dụ : cộng, trừ, nhân, chia, lặp, gộp, so sánh …)
Toán hạng: Biến, giá trị dùng để tính toán.

Tác dụng của Regex?

Regex được sử dụng trong việc xử lý chuỗi như: tìm kiếm, thay thế, bóc tách dữ liệu…
Regex được sử dụng nhiều trong việc kiểm tra tính hợp lệ đầu vào của dữ liệu, ví dụ: địa chỉ email có hợp lệ hay không? có đúng định dạng ngày tháng hay không? …
Cú pháp khai báo Regex trong Javascript

var patt = /pattern/modifiers;
hoặc
var patt = new RegExp(pattern, modifiers);

Trong đó :

pattern : mẫu chuỗi
modifiers : cách tìm. Có 3 cách tìm như sau :
i: thực hiện tìm không phân biệt ký tự hoa – thường ( case-insensitive matching )

g : lặp lại quá trình tìm kiếm cho đến khi kết thúc chuỗi (global matching). Ví dụ khi thực hiện phương thức replace(), giá trị này sẽ thay thế tất cả các cụm từ tìm thấy thay vì chỉ cụm từ đầu tiên.

**m **: hỗ trợ tìm kiếm nhiều dòng ( multiline matching )

Có thể kết hợp nhiều cách tìm với nhau, ví dụ :** gi**

Ví dụ 1: Tìm chuỗi “Framgia” trong chuỗi gốc mà không phân biệt chữ hoa, chữ thường

<script>
function myFunction() {
    var str = "Hello Framgia VIỆT NAM";
    var res = str.match(/framgia/i);
    document.getElementById("demo").innerHTML = res; //kết quả xuất: Framgia
}
</script>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

Ví dụ 2: Tìm và in ra tất cả các ký tự a có trong chuỗi str không phân biệt kỹ tự hoa – thường

<script>
function myFunction() {
    var str = "Hello Framgia VIỆT NAM";
    var res = str.match(/a/gi);
    document.getElementById("demo").innerHTML = res; //kết quả: a,a,A
}
</script>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

Ví dụ 3: Tìm và in ra tất cả các ký tự A có trong chuỗi str có phân biệt kỹ tự hoa – thường

<script>
function myFunction() {
    var str = "Hello Framgia VIỆT NAM";
    var res = str.match(/a/gi);
    document.getElementById("demo").innerHTML = res; //kết quả: A
}
</script>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

Một số phương thức có hỗ trợ regEx trong JavaScript

search(): Tìm kiếm chuỗi phù hợp với biểu thức và trả về vị trí của chuỗi đó

match(): Tìm kiếm chuỗi phù hợp với biểu thức và trả về mảng giá trị tìm thấy

replace(): Tìm kiếm chuỗi phù hợp với biểu thức và thay thế bằng một chuỗi khác

test(): Kiểm tra chuỗi có phù hợp với biểu thức hay không và trả về kết quả dạng
logic (true/false)

exec(): Tìm kiếm một chuỗi với một giá trị chỉ định và trả về text của giá trị tìm được. Nếu không tìm được giá trị phù hợp, nó sẽ trả về null.

Ví dụ 1: Kiểm tra trong chuỗi có ký tự “F” hay không ? Trả về true nếu có, false nếu không, k phân biệt chữ hoa – thường

<script>
function myFunction() {
    var str = "Framgia No.1";
    var patt = new RegExp("f",'gi'); // có thể khai báo: var patt = /f/gi;
    var res = patt.test(str);
    document.getElementById("demo").innerHTML = res; // kết quả: true
}
</script>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

Các phép toán tìm kiếm vị trí

^ : Trả về chuỗi kết quả trong trường hợp chuỗi này nằm ở đầu của chuỗi gốc

$ : Trả về chuỗi kết quả trong trường hợp chuỗi này nằm ở cuối của chuỗi gốc

 : Trả về chuỗi kết quả trong trường hợp chuỗi này nằm ở đầu hoặc cuối của một từ trong chuỗi gốc. (Tùy thuộc vào vị trí đặt  ở đầu hoặc cuối của chuỗi trong biểu thức Regex)

B : Ngược lại với . Trả về chuỗi kết quả trong trường hợp chuỗi này không nằm ở vị trí đầu hoặc cuối của một từ trong chuỗi gốc. (Tùy thuộc vào vị trí đặt B ở đầu hoặc cuối của chuỗi trong biểu thức Regex).

?= : Trả về chuỗi kết quả nếu theo sau chuỗi đó là một chuỗi nào đó được chỉ định trước

?! : Ngược lại với ?= . Trả về chuỗi kết quả nếu sau chuỗi đó không phải là một chuỗi nào đó được chỉ định trước
Sau đây chúng ta sẽ làm từng ví dụ một để hiểu rõ hơn:

Giả sử ta có chuỗi

var str = "welcome to Framgia Việt Nam"

Ví dụ

 // ví dụ ^
 document.write(str.match(/^Welcome/gi)); // trả về Welcome, vì Welcome đứng đầu chuỗi
// ví dụ $
 document.write(str.match(/nam$/gi));  // kết quả: Nam , vì "Nam" ở cuối chuỗi
 document.write(str.match(/Framgia$/gi));  // kết quả: Null, vì k tìm thấy "framgia" ở cuối chuỗi str
//ví dụ 
document.write(str.match(/fr/gi)); // trả về Fr

Brackets (dấu ngoặc) trong Regex

[abc] : Tìm tất cả các ký tự nằm trong tập ký tự giữa cặp dấu ngoặc vuông

[^abc]: Tìm tất cả các ký tự không nằm trong tập ký tự giữa cặp dấu ngoặc vuông

[0-9]: Tìm tất cả các chữ số từ 0 đến 9

[A-Z]: Tìm tất cả các ký tự nằm trong khoảng từ A hoa đến Z hoa

[a-z]: Tìm tất cả các ký tự nằm trong khoảng từ a thường đến z thường

[A-z]: Tìm tất cả các ký tự nằm trong khoảng từ A hoa đến z thường

(red|blue|green): Tìm tất cả các ký tự là một trong các giá trị red, blue, green

Ví dụ

    // ta có chuỗi sau
    var str = "Welcome to Framgia VIET NAM";
    // tìm tất cả các ký tự là ea
    document.write(str.match(/[ea]/gi)); // Kết quả : e,e,a,a,A
    // tìm tất cả các ký tự k phải là ea và dấu khoảng trắng " "
    document.write(str.match(/[^ea ]/gi));
    //kết quả: W,l,c,o,m,t,o,F,r,m,g,i,V,I,T,N,M

Metacharacters (Siêu ký tự) trong Regex

. : Tìm một ký tự đơn ( bao gồm cả khoảng trắng, dấu phẩy, …) , ngoại trừ ký tự xuống dòng hoặc kết thúc dòng

**w **: Tìm một ký tự word (không bao gồm khoảng trắng, dấu phẩy, …)

W: Ngược lại với w. Tìm một ký tự không phải word

d: Tìm một ký tự là chữ số

D: Tìm một ký tự không phải là chữ số

s: Tìm một ký tự là khoảng trắng

S: Tìm một ký tự không là khoảng trắng
: Tìm một ký tự NULL

: Tìm một ký tự xuống dòng

f : Find a form feed character

: Find a carriage return character

: Tìm một ký tự tab

v : Find a vertical tab character

xxx : Tìm một ký tự Latin được chỉ định bởi 1 số xxx dạng bát phân (octal)

**xdd **: Tìm một ký tự được chỉ định bởi 1 số xdd dạng hexa

**uxxxx **: Tìm một ký tự Unicode được chỉ định bởi 1 số xxxx dạng hexa
Ví dụ

    var str = "Welcome to Framgia VIET NAM";
   // Ví dụ . :
    document.write(str.match(/./g));  // Kết quả : W,e,l,c,o,m,e, ,t,o, ,F,r,a,m,g,i,a, ,V,I,E,T, ,N,A,M
   // Ví dụ w :
    document.write(str.match(/w/g)); // kết quả : W,e,l,c,o,m,e,t,o,F,r,a,m,g,i,a,V,I,E,T,N,A,M
    // Ví dụ W :
    document.write(str.match(/W/g)); // kết quả: , , ,

Phép lặp trong Regex

+ : Lặp một ký tự hoặc một biểu thức con trước đó >=1 lần

***** : Lặp một ký tự hoặc một biểu thức con trước đó >=0 lần

? : Lặp một ký tự hoặc một biểu thức con trước đó 0 hoặc 1 lần

{X} : Lặp một ký tự hoặc một biểu thức con trước đó X lần

{X,Y} :Lặp một ký tự hoặc một biểu thức con trước đó từ X đến Y lần

{X,} : Lặp một ký tự hoặc một biểu thức con trước đó >= X lần
Gộp nhóm các biểu thức :

() : Tìm kiếm một nhóm các ký tự bên trong cặp dấu ngoặc và lưu vào chuỗi kết quả

(?: ) : Tìm kiếm chuỗi kết quả không chứa tập ký tự nằm trong cặp dấu ngoặc

| : Phép toán hoặc, được sử dụng để kết hợp các mệnh đề với nhau vào chung một biểu thức.
Một vài ví dụ :

Sử dụng replace() cùng với Reguler Expression

<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML;
    var txt = str.replace(/Microsoft/i,"Framgia");
    document.getElementById("demo").innerHTML = txt; // kết quả Please visit Framgia
}
</script>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>

Check Email

<script language="javascript">
function checkEmail(inputvalue){
    var pattern=/^([a-zA-Z0-9_.-])[email protected]([a-zA-Z0-9_.-])+.([a-zA-Z])+([a-zA-Z])+/;
    if(pattern.test(inputvalue)){
        alert("true");
    }else{
        alert("false");
    }
}
</script>
<form name="signupform">
Input your email: <input name="email" type="text" class="inputs" id="email_address"
 value="[email protected]" size="35" maxlength="255">
<input name="summit" type="submit" value="Check" onClick="checkEmail(document.signupform.email.value)">
</form>

Tham khảo thêm regular expression

• regular expression http://www.w3schools.com/js/js_regexp.asp
• match(): http://www.w3schools.com/jsref/jsref_match.asp
• test(): http://www.w3schools.com/jsref/jsref_regexp_test.asp
• replace(): http://www.w3schools.com/jsref/jsref_replace.asp