PHPVN.org
Welcome, Guest. Please login or register.
May 24, 2012, 05:48:16 am
 17050 Posts in 3760 Topics by 15404 Members
Latest Member: hung5s
PHPVN.org  |  PHP Programming  |  HTML, Java Script và CSS  |  Xử lý mẫu chuỗi (RegEx) trong JavaScript - Phần 1: Lý thuyết 0 Members and 8 Guests are viewing this topic. « previous next »
Pages: [1]
Author Topic: Xử lý mẫu chuỗi (RegEx) trong JavaScript - Phần 1: Lý thuyết  (Read 7066 times)
CMXQ
Administrator
PHP Intermediate
*****
Posts: 1327


View Profile Email
« on: January 29, 2010, 06:40:57 pm »
1. RegEx là gì?

RegEx (Regular Expression) là một biểu thức thường được dùng để mô tả một mẫu chuỗi (string pattern).

2. Vậy, mẫu chuỗi là gì?

Mẫu chuỗi, diễn giải thô ra có nghĩa là các chuỗi văn bản tuân thủ theo một quy luật sắp xếp (mẫu) nào đó.

Ví dụ:
- Một số được viết dưới dạng một chuỗi với các chữ số, có thể có chứa tối đa 1 dấu phẩy ở giữa.
- Dữ liệu kiểu ngày tháng: Thường được viết theu mẫu: dd/mm/yyyy: Hai chữ số đầu tiên xác định ngày, tiếp theo là dấu gạch chéo, tiếp đến là 2 chữ số xác định tháng, tiếp theo là dấu gạch chéo và kết thúc bởi bốn chữ số xác định năm.
- Địa chỉ email: xxx@yyy.zz.gìđó: Bao gồm 1 chuỗi văn bản được chia thành 2 phần: Phần user name và phần domain, 2 phần này cách nhau bởi dấu @. Phần domain có luật riêng theo cách đặt tên của domain...
...

3. 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 (VD: cộng, trừ, nhân, chia, lặp, gộp, so sánh…)
Toán hạng: Biến, giá trị được dùng để tính toán.

4. Vậy regex được dùng để làm gì và nó có tác dụng gì?

Trong các kỹ thuật xử lý chuỗi (VD: Tìm kiếm, thay thế...) thông thường, chúng ta cần phải xác định các chuỗi tường minh để tìm kiếm. Các chuỗi này được gọi là từ khoá.

Tuy nhiên, trong một số trường hợp ngoại lệ khác, chúng ta không thể chỉ định rõ chuỗi từ khoá đó, mà chỉ có thể mô tả được quy luật để sinh ra chuỗi từ khoá đó.

VD: Làm thế nào để lấy được toàn bộ địa chỉ email trong một văn bản?
Rõ ràng với câu hỏi này, bằng mắt thừong thì ta có thể lấy được, còn bằng con đường lập trình thông thường theo kiểu tìm kiếm bằng từ khoá là các địa chỉ email thì chúng ta ... bó tay.

Nhưng nếu có regex, chúng ta có thể thiết lập ra quy luật của một địa chỉ email và yêu cầu chương trinh tìm kiếm theo luật đó.

(còn tiếp)
« Last Edit: February 04, 2010, 12:53:54 am by cmxq » Logged
Trở về phpvn.org
CMXQ
Administrator
PHP Intermediate
*****
Posts: 1327


View Profile Email
« Reply #1 on: January 29, 2010, 07:01:43 pm »
Cú pháp khai báo regex trong JavaScript

Chúng ta có thể khai báo biến chứa regex như sau:

Code:
var tên_biến= /mẫu_chuỗi/cách_tìm;

Tham số cách_tìm xác định cách thức tìm kiếm mẫu chuỗi, nó có thể chứa các giá trị sau đây:
g: ("global" matching): Lặp lại quá trình tìm kiếm cho đến khi kết thúc chuỗi. Khi sử dụng 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.
i: so sánh không phân biệt hoa thường.
m: so sánh ở chế độ đa dòng.
Có thể phối hợp nhiều cách_tìm. VD: gi. Cũng có thể không cần đưa tham số này vào

Các phương thức có hỗ trợ regEx trong JavaScript:

Giả sử có một biến chuỗi S:
S.search(): Tìm chuỗi phù hợp với biểu thức đã cho và trả về vị trí của chuỗi đó
S.match(): Tìm chuỗi theo mẫu và trả về một mảng  các giá trị tìm thấy
S.replace() Thay thế chuỗi bằng chuỗi khác phù hợp với mẫu tìm kiếm.
...
Các bạn có thể tìm hiểu cách sử dụng các hàm này trên mạng, ở đây tôi chỉ sử dụng hàm match để demo cách sử dụng regex. Nên nhớ, hàm match() này trả về một mảng các giá trị phù hợp với mẫu chuỗi cần tìm.

Ví dụ đơn giản đầu tiên về regex:

Đoạn mã dưới đây trả về mảng các chuỗi có chứa chữ thu:

Code:
<html>
<body>
<script type="text/javascript">
var str = "Ngoai hien giot mua thu thanh thot roi";
var patt1 = /thu/; // Mẫu chuỗi xác định một chữ thu
var result = str.match(patt1);
document.write(result); // In ra chữ thu
</script>
</body>
</html>

Đoạn ví dụ thứ 2 chỉ tìm kiếm các mẫu chuỗi chứa duy nhất chữ t:

Code:
<html>
<head>
<script>
var s="Thu mot ti, thu hai Ti";
//regex: t/g xác định việc tìm kiếm tất cả các chuỗi là chữ t,
//và tiến hành tìm từ đầu đến cuối chuỗi nhờ tham số cách tìm /g.  
document.write(s.match(/t/g)); //Kết quả: t,t,t
//regex: t/gi xác định việc tìm kiếm tất cả các chuỗi là chữ t,
//và tiến hành tìm từ đầu đến cuối chuỗi không phân biệt chữ hoa, chữ thường nhờ tham số cách tìm /gi.  
document.write(s.match(/t/gi)); //Kết quả: T,t,t,t,T
</script>
</head>
</html>

(Còn tiếp)
« Last Edit: January 29, 2010, 07:10:12 pm by cmxq » Logged
Trở về phpvn.org
CMXQ
Administrator
PHP Intermediate
*****
Posts: 1327


View Profile Email
« Reply #2 on: January 29, 2010, 07:23:29 pm »
Các phép toán tìm kiếm theo vị trí

^: Trả về chuỗi kết quả trong trường hợp chuỗi này nằm ở vị trí đầ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 ở vị trí cuối của chuỗi gốc
\b: Trả về chuỗi kết quả trong trường hợp chuỗi này nằm ở vị trí đầu của một từ trong chuỗi gốc. Nếu cần so sánh ở vị trí cuối từ, hãy đặt biểu thức \b ở vị trí cuối từ.
\B: Trả về chuỗi kết quả trong trường hợp chuỗi này không nằm ở vị trí đầu của một từ trong chuỗi gốc. (tuỳ thuộc vào vị trí đặt \B ở đầu hoặc cuối một từ)
?=: 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
?!: 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

Ví dụ:

Code:
<html>
<head>
   <script>
     var s="Thu mot ti, thu hai Ti";
     document.write(s.match(/^Thu/i)); //Kết quả: Thu, vì chữ Thu nằm ở đầu chuỗi s
     document.write(s.match(/t$/gi));  //Kết quả: null, vì ko tìm thấy chữ t nằm ở cuối chuỗi s
     document.write(s.match(/ti$/gi)); //Kết quả: Ti, vì chữ Ti nằm ở vị trí cuối chuỗi s và thoả mãn điều kiện tìm kiếm /gi (tìm toàn cục ko phân biệt chữ hoa, chữ thường)
     document.write ("<BR>");
     document.write(s.match(/\bti/gi));//Kết quả: ti,Ti vì 2 chữ này nằm ở vị trí đầu của 2 từ ti, Ti trong chuỗi s
     document.write ("<BR>");
     document.write(s.match(/\Bai/gi));//Kết quả: ai, vì chữ này nằm ở phía cuối của chữ hai trong chuỗi s
     document.write ("<BR>");
     document.write(s.match(/th(?=u)/gi));//Kết quả: Th,th, vì 2 chữ này có theo sau (?=) là u, là 2 chữ Thu, thu trong chuỗi gốc.
     document.write ("<BR>");
     document.write(s.match(/t(?!h)/gi));//Kết quả: t,t,T, vì 3 chữ này không theo sau (?!) bởi chữ h, tương ứng với t , ti, Ti trong chuỗi gốc.
   </script>
</head>
</html>

(Còn tiếp, nhưng tớ đi chơi đã)
Logged
Trở về phpvn.org
CMXQ
Administrator
PHP Intermediate
*****
Posts: 1327


View Profile Email
« Reply #3 on: January 29, 2010, 11:14:45 pm »
Các lớp ký tự trong regex:

[xyz]: Tìm một ký tự bất kỳ nằm trong tập ký tự giữa cặp dấu ngoặc vuông
[x-z]: Tìm một ký tự bất kỳ nằm trong tập ký tự từ x đến z
[^xyz]: Tìm một ký tự bất kỳ không thuộc tập ký tự giữa cặp dấu ngoặc vuông.
.: Tìm bất kỳ một ký tự nào không phải là ký tự xuống dòng mới (new line) hoặc ký tự kết thúc dòng (line terminator).
\w: Tìm một ký tự dạng a-Z, 0-9 và dấu gạch dưới.
\W: Ngược lại với \w
\d: Tìm một ký tự thuộc tập ký tự từ 0 đến 9
\D: Ngược lại với \d: Tìm một ký tự không nằm trong tập ký tự từ 0 đến 9
\s: Tìm ký tự cách (dấu cách)
\S:Tìm một ký tự không phải là dấu cách

Ví dụ:
Code:
<html>
<body>

<script type="text/javascript">
var str = "1 voi 1 la 2, 2 them 2 la 4";
// trả về mảng chứa các ký tự trong đoạn từ e tới h
document.write(str.match(/[e-h]/gi));//Kết quả: h,e, với h,e nằm trong chữ them.
document.write ("<BR>");
// Trả về mảng các ký tự không thuộc tập các ký tự từ a-m và ký tự u:
document.write(str.match(/[^a-mu ]/gi));//Kết quả: 1,v,o,1,2,,,2,t,2,4
document.write ("<BR>");
// Tìm các chuỗi con bắt đầu bởi chữ oi, tiếp theo sau đó là 1 ký tự thuộc lớp \W:
document.write(str.match(/oi\W/gi));//oi
document.write ("<BR>");
// Tìm các ký tự là các chữ số:
document.write(str.match(/\d/gi));//1,1,2,2,2,4
document.write ("<BR>");
// Tìm các chuỗi bắt đầu bởi 1 ký tự thuộc lớp \D, sau đó là 1 ký tự không thuộc nhóm từ b-t:
document.write(str.match(/\D[^b-t ]/g));//v, 1,la, 2, 2, 2,la, 4
document.write ("<BR>");
// Tìm các dấu cách:
document.write(str.match(/\s/g));//, , , , , , , ,
</script>

</body>
</html>
Logged
Trở về phpvn.org
CMXQ
Administrator
PHP Intermediate
*****
Posts: 1327


View Profile Email
« Reply #4 on: January 30, 2010, 04:20:38 am »
Các phép lặp trong regex

RegEx cho phép tìm kiếm lặp bên trong biểu thức:
{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
?: Lặp một ký tự hoặc một biểu thức con trước đó 0 hoặ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 đó >=1 lần

Ví dụ:

Code:
<html>
<body>

<script type="text/javascript">
var str = "Ai mua xoi deeeeee";
// Tìm một chuỗi bao gồm các chữ cái d hoặc e (lớp [de], lặp lại 3 lần:
document.write (str.match(/[de]{3}/g));//dee,eee
// Tìm một chuỗi bao gồm các chữ cái d hoặc e, lặp lại >=3 lần:
document.write (str.match(/[de]{3,}/g));//deeeeee
// Tìm một chuỗi bao gồm các chữ cái d hoặc e, lặp lại từ 3 đến 5 lần:
document.write (str.match(/[de]{3,5}/g))//deeee
// Tim chu d, sau chu d la 0 hoac 1 chu e
document.write (str.match(/de?/g));
// Tim chu d, sau chu d la 0 hoac n chu e
document.write (str.match(/de*/g));
// Tim chu d, sau chu d la 1 hoac n chu e
document.write (str.match(/de+/g));
//Tim tat ca cac tu bao gom cac chu cai tu a den z
document.write (str.match(/[a-z]*/gi));
//Tim tat ca cac tu bao gom cac chu cai tu a den z, sau tu la mot dau cach:
document.write (str.match(/[a-z]* +/gi));
</script>
</body>
</html>
Logged
Trở về phpvn.org
CMXQ
Administrator
PHP Intermediate
*****
Posts: 1327


View Profile Email
« Reply #5 on: January 30, 2010, 04:27:13 am »
Gộp nhóm các biểu thức
Chúng ta có thể sử dụng các dấu ngoặc tròn () để gộp nhóm như trong các biểu thức toán học thông thường.

(): 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

Ví dụ:

Code:
<html>
<body>

<script type="text/javascript">
var str = "Email: mail@ttt.com, test@ttt.com.vn,  sinhln@hnue.edu.vn";

// Tim tat ca cac dia chi email trong chuoi
document.write (str.match(/([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+/gi));
//Tim tat ca cac so trong chuoi
str=" 12312 and 343 and 54q";
document.write (str.match(/[0-9]+/g));
// hoac
document.write(str.match(/\d+/g));
</script>
</body>
</html>
Logged
Trở về phpvn.org
CMXQ
Administrator
PHP Intermediate
*****
Posts: 1327


View Profile Email
« Reply #6 on: January 30, 2010, 04:28:00 am »
Cuối cùng, đố các bạn biết cái regex này có ý nghĩa gì và có thể được dùng để làm gì? Cheesy

/^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/(19|20)\d\d$/
Logged
Trở về phpvn.org
PHP Kungfu
Administrator
PHP Starter
*****
Posts: 5



View Profile
« Reply #7 on: January 30, 2010, 10:19:02 pm »
kiểm tra giá trị so với format ngày tháng năm:

dd/mm/yyyy

Hai cái yy cuối cùng viết vậy ví dụ chưa hay Tongue nhưng mà cũng hiếm khi viết nên chả biết JS nó có cho \d{2} không nữa :">
Logged
CMXQ
Administrator
PHP Intermediate
*****
Posts: 1327


View Profile Email
« Reply #8 on: February 01, 2010, 06:50:20 pm »
Được ông ạ Cheesy
Logged
Trở về phpvn.org
Pages: [1]
PHPVN.org  |  PHP Programming  |  HTML, Java Script và CSS  |  Xử lý mẫu chuỗi (RegEx) trong JavaScript - Phần 1: Lý thuyết « previous next »
    Jump to:  


    Powered by MySQL Powered by PHP Powered by SMF 1.1.16 | SMF © 2011, Simple Machines Valid XHTML 1.0! Valid CSS!