Embed Size (px)
Citation preview
Lớp đối tượng RegEx và cách validate các form bằng javascript
14 Mar
Như bài viết Thẻ iframe và những lưu ý đã đề cập, trong javascript có sẵn một lớp đối tượng hàm RegEx cho phép chúng ta kiểm tra các chuỗi ký tự và validate một cách nhanh chóng mà không cần viết thêm các hàm xử lý chuỗi. Trong bài này chúng ta sẽ cùng tìm hiểu cơ chế RegEx và một số ứng dụng validate dữ liệu.
Trước hết chúng ta thử chạy đoạn code html sau đây:
Khi chạy chúng ta sẽ thấy là nếu chúng ta nhập vào chữ số hoặc ký tự đặc biệt, java sẽ cảnh báo bằng lệnh alert ở dòng 10. còn nếu nhập đúng tên thì chúng ta sẽ thấy chương trình cho ra một câu chào. Cơ chế làm việc của RegEx ở đây cũng giống như với các hàm PCRE của PHP chỉ khác một chút về cách trình bày, còn quy ước về mẫu tìm kiếm, so sánh thì như nhau.
Với java, bạn chỉ cần tạo ra một biến ký tự, trong ví dụ trên là filter và gán bằng chuỗi mẫu filter=/[a-zA-z]+$/
Sau đó bạn dùng một trong các phương thức sẵn có của đối tượng biến vừa tạo. Đó là .search(), .match(), .replace() hoặc .test()
.match() và .test() là hai phương thức ngược nhau. .match là phương thức của chuỗi tìm kiếm còn
.test là phương thức của chuỗi mẫu (pattern). Hãy xem đoạn code dưới đây, so sánh với đoạn code trên thì bạn có thể tự rút ra kết luận:
Các điều kiện nằm ngoài / / của mẫu tìm kiếm cũng khá giống với PCRE, đó là:
i – tìm kiếm không phân biệt chữ hoa chữ thường g – tìm kiếm từ đầu chuỗi đến cuối chuỗi
Ví dụ đoạn code sau đây in ra 3 chữ T,t,t vì có điều kiện i,g
Các điều kiện nằm bên trong / / cũng vậy:
^ – trả về kết quả nếu chuỗi mẫu được tìm thấy ở đầu chuỗi gốc $ – trả về kết quả nếu chuỗi mẫu được tìm thấy ở cuối chuỗi gốc w – tìm ký tự là chữ cái, chữ số hoặc dấu gạch dưới d – tìm ký tự là chữ số
s – tìm ký tự là dấu cách
Chạy đoạn code sau đây bạn sẽ thấy rõ điều đó:
Chúng ta cũng có một số lệnh xác định số lần xuất hiện (lặp lại) của các ký tự tìm kiếm gần giống với PCRE
{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ụ minh họa dưới đây
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ụ sau đây dùng () để tìm các địa chỉ email trong một chuỗi
Cuối cùng chúng ta thử sử dụng phương thức .replace để thay thế một mẫu trong chuỗi bằng ví dụ sau:
Gửi mail với PHP
31 May
Một function cơ bản mà các website thường dùng là có một form liên hệ để người viếng thăm có thể gửi mail trực tiếp đến người quản trị website. Vậy các coder xử lý vấn đề này ra sao khi xây dựng website. Bài viết này sẽ giải thích về cơ chế làm việc của mail và ứng dụng gửi mail trong PHP.
Cơ chế làm việc của email
Bản chất của email là hai dịch vụ độc lập một gửi, một nhận và thường được cài đặt trên cùng một server. Có nhiều giao thức khác nhau cho việc gửi, nhận mail nhưng thông dụng nhất là POP3 cho việc nhận mail và SMTP cho việc gửi mail. Một SMTP server khi gửi mail đi thông thường không cần có account. Bất cứ khi nào nó nhận được yêu cầu từ một client nào đó tuân thủ theo đúng cấu trúc của nó, thường là mail header, mail subject, và mail content và receipient (địa chỉ email của người nhận) là nó sẽ lập tức tìm cách kết nối với POP server để gửi cái mail đó đi. Còn một POP server thì khác, nó quản lý cả một database các địa chỉ email và mật khẩu do người quản trị khởi tạo ra và cấp phát cho người dùng. Khi nhận được một email nó sẽ căn cứ theo địa chỉ người nhận để chuyển đến đúng hòm thư của người đó.
Một điểm lý thú là đa phần các hosting hiện nay đều có kèm theo các dịch vụ mail POP và SMTP, chẳng hạn như Cpanel và Direct admin dùng dịch vụ mail Dovecot. Do đó khi bạn mua hosting bạn có quyền tạo ra các email gắn luôn với tên miền của bạn chẳng hạn như [email protected]. Nhờ dịch vụ miễn phí này nên bạn hoàn toàn có thể dùng hàm mail() của PHP trên các hosting này để tạo ra các form liên hệ cho phép khách hàng viếng thăm website của bạn có thể gửi mail trực tiếp đi từ website.
Sử dụng hàm mail() của PHP.
Trước hết chúng ta viết đoạn code sau đây để tạo một form liên hệ và gọi đến hàm mail() để gửi mail đi sau khi nhấn SEND
Sau khi có đoạn code này nếu bạn upload lên một hosting thì nó sẽ chạy ngay lập tức. Vì như đã nói ở trên, hầu hết các hosting hiện nay đều hỗ trợ dịch vụ POP/SMTP. Lưu ý, trong code dòng 12 tôi để địa chỉ nhận email là [email protected], các bạn cần thay bằng địa chỉ email của mình để có thể test việc nhận mail này.
Tuy nhiên với những bạn không có hosting hoặc là đang phát triển trên môi trường local, sử dụng xamp hoặc wamp làm server thì đoạn code này chạy sẽ báo lỗi. Lý do là trên xamp và wamp không có kèm theo dịch vụ mail. Để vượt qua các lỗi này và test chúng ta làm như sau:
Bước một: tìm một website nào đó mà server ở đó chấp nhận việc gửi mail bằng giao thức SMTP mà không cần xác thực. Tôi đã tìm được một cái, đó là http://www.vnpec.com.vn các bạn có thể dùng tạm để test.
Bước hai: chỉnh sửa file php.ini trong wamp hoặc xamp với 3 dòng sau:
[mail function]SMTP = http://www.vnpec.com.vnsmtp_port = 25sendmail_from = [email protected]
Bước 3: Chạy test lại đoạn code trên ở local.
Khai báo header
Trong khi chạy đoạn code trên, các bạn sẽ thấy có một phiền toái nhỏ đó là email mà bạn dùng để gửi nhờ thư sẽ xuất hiện trong trường from. Như vậy sẽ không chuyên nghiệp lắm. Còn nếu bạn chạy trên hosting thì hòm mail này sẽ có tên là root@localhost hay bất cứ một cái email default nào đó của SMTP tạo ra. Điều này khiến bạn không reply cho người điền form được. Để khắc phục vấn đề này chúng ta dùng thêm tham số header cho hàm mail(). Hãy chèn đoạn mã sau đây vào trong code, thay thế cho dòng số 13$headers = ‘MIME-Version: 1.0′ . “\r\n”;$headers .= ‘Content-type: text/html; charset=utf-8′ . “\r\n”;$headers .= ‘From: ‘.$name.’ <’.$from.’>’ . “\r\n”;if(mail($to, $subject, $content, $headers))
Rồi chạy thử bạn sẽ thấy kết quả!
Kết luận:- Việc sử dụng mail() của PHP để gửi mail có thể tạo được các form liên hệ rất chuyên nghiệp- Tuy nhiên nó có rắc rối khi test thử với môi trường phát triển là PC- Có một chút rắc rối với trường from và được khắc phục bằng cách thay thế header của mail- Không dùng được với các SMTP server đòi hỏi phải xác thực user trước khi gửi mail
Bên cạnh hàm mail() chúng ta còn một công cụ khác cực mạnh là class phpmailer. PHPmailer sẽ giúp giải quyết tất cả các rắc rối trên trong code mà không thèm đụng đến PHP ini file. Tôi sẽ đề cập đến việc sử dụng công cụ này trong một bài viết khác
Hẹn gặp lạiTH
Bạn muốn tạo nút Like và Dislike giống như youtube mà không cần phải load lại trình duyệt. Bài viết sau sẽ giúp bạn làm được điều đó hết sức đơn giản sử dụng jQuery và Ajax.
I. DatabaseĐầu tiên tạo một cái db đã. Db này dùng để lưu Id, nội dung tin, và up – like, down – dislike.Với mỗi một lần click tương ứng thì giá trị sẽ cộng thêm 1
HTML:CREATE TABLE messages(id INT PRIMARY KEY AUTO_INCREMENT,message TEXT,up INT,down INT);
II.Index.phpFile này bao gồm mã PHP, Jquery, HTML.$(“.like”).click(function(){} là hàm xử lý sự kiện click nút có class là like. Ở đây chúng ta cho 2 nút up và down đều có class là like. Sau đó chúng ta lấy ra giá trị id và name của nó bằng $(this).attr(“id”);. Sau khi lấy được thành công thì truyền dữ liệu qua file rating.php sử dụng ajax. Nếu đang trong tiến trình xử lý thì #flash sẽ được hiện ra.Thành công sẽ cho hiện ra #content
HTML:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".like").click(function(){var id=$(this).attr("id");var name=$(this).attr("name");var dataString = 'id='+ id + '&name='+ name;$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax({type: "POST",url: "rating.php",data: dataString,cache: false,success: function(html){$("#flash").fadeOut("slow");
$("#content").html(html);} });});
// Close button action$(".close").click(function(){$("#votebox").slideUp("slow");});
});</script>//HTML Code<a href="#" class="like" id="1" name="up">Like</a>-- <a href="#" class="like" id="1" name="down">Dislike</a>
<div id="votebox"><span id='close'><a href="#" class="close">X</a></span><div id="flash">Loading........</div><div id="content"></div></div>
III. Rating.phpTrong file này chúng ta sẽ bắt request của user, và kiểm tra xem đó là like hay dislike để thực hiện update vào csdl. Sau đó thực hiện tính tổng số like và dislike, thực hiện lấy % để hiển thị ra vạch màu tương ứng. Việc dùng % để đảm bảo khi dữ liệu ngày càng tăng thì 2 vạch màu sẽ không thể kéo dài mãi được.PHP:<?phpinclude("db.php");if($_POST['id']){$id=mysql_escape_String($_POST['id']);$name=mysql_escape_String($_POST['name']);// Vote update mysql_query("update messages set $name=$name+1 where id='$id'");// Getting latest vote results$result=mysql_query("select up,down from messages where id='$id'");$row=mysql_fetch_array($result);$up_value=$row['up'];$down_value=$row['down'];$total=$up_value+$down_value; // Total votes $up_per=($up_value*100)/$total; // Up percentage $down_per=($down_value*100)/$total; // Down percentage//HTML outputecho '<b>Ratings for this blog</b> ( '.$total.' total)Like :'.$up_value.'<div id="greebar" style="width:'.$up_per.'%"></div>Dislike:'.$down_value.'<div id="redbar" style="width:'.$down_per.'%"></div>';}?>
Cuối cùng là mã CSS để cho nó đẹp, cái cuối cùng này là tùy bạn muốn nó hiển thị thế nào là do bạn design thôi. Code cơ bản để nó hoạt động tôi đã đưa bên trên hết rồi.
HTML:#votebox{border:solid 1px #dedede; padding:3px;display:none;padding:15px;width:700px;-moz-border-radius: 6px;-webkit-border-radius: 6px;}#greebar{float:left;background-color:#aada37;border:solid 1px #698a14;width:0px;height:12px;}#redbar{float:left;background-color:#cf362f;border:solid 1px #881811;width:0px;height:12px;}#close{float:right; font-weight:bold; padding:3px 5px 3px 5px; border:solid 1px #333;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
Chúc bạn thành công!Theo camnhan
Xử lý chuỗi bằng Javascript – Regular Expression
Published July 22, 2013 in Học Css - Javascript
Xử lý chuỗi bằng Javascript – Regular Expression
Hướng dẫn sử dụng Xử lý chuỗi bằng javascript Regular Expression kiểm tra email, kiểm tra chuỗi, kiểm tra ký tự
Phần 1: Lý thuyết
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: [email protected]ìđó: 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ạngToá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ú pháp khai báo regex trong JavaScript
Chúng ta có thể khai báo biến chứa regex như sau:
Mã:
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ấyS.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:
Mã:
<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:
HTML 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á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ụ:
HTML 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á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ụ:
HTML 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 hdocument.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,4document.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));//oidocument.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, 4document.write ("<BR>");// Tìm các dấu cách:document.write(str.match(/\s/g));//, , , , , , , , </script>
</body></html>
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ụ:
HTML 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 zdocument.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>
Gộp nhóm các biểu thứcChú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ụ:
HTML Code:
<html><body>
<script type="text/javascript">var str = "Email: [email protected], [email protected], [email protected]";
// Tim tat ca cac dia chi email trong chuoidocument.write (str.match(/([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+/gi));//Tim tat ca cac so trong chuoistr=" 12312 and 343 and 54q";document.write (str.match(/[0-9]+/g));// hoacdocument.write(str.match(/\d+/g));</script></body></html>
Phần 2: Một số trường hợp ứng dụng
Qua phần đó, các bạn hẳn đã hiểu được regex là cái gì, và bước đầu có thể đọc hiểu được ý nghĩa của một chuỗi regex. Bài này đi vào tìm hiểu một số ví dụ ứng dụng regex để xử lý các bài toán trong thực tiễn.
I. Tìm kiếm và thay thếHẳn các bạn đã biết, phương thức replace() trong Javascript nếu ở chế độ bình thường thì nó sẽ
chỉ tìm và thay thế được duy nhất chuỗi đầu tiên được tìm thấy.VD:
Code:<script language="javascript">var str="chuoi 1, chuoi 2, chuoi 3";document.write (str.replace ("chuoi","cam")); // Ket qua: cam 1, chuoi 2, chuoi 3</script>
Vậy làm thế nào để thay thế được tất cả các từ "chuoi" thành "cam"?
Ở đây, chúng ta có thể sử dụng các phép tìm kiếm lặp của regex:
HTML Code:
<script language="javascript">var str="chuoi 1, chuoi 2, chuoi 3";// Chuỗi cần tìm là 1 regex: /chuoi/gi, xác định tìm kiếm từ chuoi lặp lại cho đến cuối chuỗi gốc và không phân biệt hoa thườngdocument.write (str.replace (/chuoi/gi,"cam")); // Ket qua: cam 1, cam 2, cam 3 </script>
II. Hỗ trợ kiểm tra dữ liệu theo mẫu regex
Ở đây các bạn cần làm quen với một phương thức trong lớp RegExp của javascript, đó là phương thức test().
Cú pháp:biến_regex.test(chuỗi_gốc)
Phương thức này trả về true nếu như chuỗi gốc khớp với giá trị trả về của biến_regex. Ngược lại là false.
Ví dụ:
HTML Code:
<script language="javascript">// Khai báo 1 chuỗi thông thườngvar str="Hello world!";//Khai báo 1 chuỗi mẫu (biểu thức regex)var patt=/Hello/g;var result=patt.test(str);document.write("Ket qua: " + result); // Tra ve true vi tim thay tu Hello trong chuoi str//Một mẫu chuỗi khácpatt=/phpvn/g;
result=patt.test(str);document.write("<br />Ket qua: " + result); // Tra ve false vi khong thay chuoi phpvn trong chuoi str.</script>
a. Kiểm tra xem chuỗi nhập vào có phải là 1 số hay không?
Bình thường, chúng ta có thể sử dụng các hàm kết hợp như: isNaN, parseInt, parseFloat… để kiểm tra xem đó có phải là một số hay không? Ở đây tôi cung cấp một cách khác dùng regex:
Đoạn mã dưới đây sẽ chỉ kiểm tra xem đây có phải là 1 số nguyên dương hay không:
HTML Code:
<script language="javascript">function phpvn_isDigit(myString){ var reg = /^\d+$/; return (reg.test(myString));}document.write (phpvn_isDigit("12345"));</script>
Đoạn mã dưới đây sẽ kiểm tra xem có phải là đầu vào là 1 số nguyên hay ko (có thể có thêm dấu +/- ở trước):
HTML Code:
function phpvn_isInt(myString){ var reg= /^(\+|-)?\d+$/; return (reg.test(fData));}
Tiếp tục nâng cấp kiểm tra xem chuỗi đầu vào có phải là một số thực hay không.Một chuỗi được coi là 1 số thực nếu như nó bắt đầu bởi 1 chuỗi số, có 1 dấu chấm ở giữa và kết thúc bởi 1 chuỗi số:
HTML Code:
function phpvn_isFloat(myString){ var reg= /^(\+|-)?((\d+(\.\d+)?)|(\[0].\d+))$/; return (reg.test(myString));}
Nhưng mẫu chuỗi trên sẽ trả về false nếu người dùng gõ 1 chuỗi dạng 123,123,123.45
Nguồn: phpvn.org
Tags: Xử lý chuỗi bằng Javascript - Regular Expression
No Response to “X lý chu i b ng Javascript – Regular Expression”ử ỗ ằ
Comments are closed.
Sử dụng Regular Expression trong Javascript
Bắt đầu từ phiên bản Javascript 1.2 thì Regular Expression đã được tích hợp sẵn. Do đó từ trình duyệt Internet Explorer 4.0 trở về sau, Netcapse 4.0 trở về sau, tất cả các phiên bản của Mozilla Firefox, các trình duyệt phổ biến hiện nay như Chrome, Opera, Safari... đều sử dụng Javascript >= 1.2 do đó ta đều có thể sử dụng Regular Expression trên các trình duyệt vừa nêu.Khi có nhu cầu kiểm tra tính hợp lệ của dữ liệu, tìm kiếm hoặc thay thế các dữ liệu theo một nguyên tắc nào đó thì sử dụng Regular Expression sẽ giúp ta tiết kiệm được rất nhiều thời gian.
ECMA là viết tắt của tổ chức: "European Computer Manufacturers Association" được thành lập vào năm 1959. Truy cập ecma-internation.org để biết thêm thông tin.
Nói thêm về quá trình đưa Regular Expression vào Javascript. Bắt đầu từ phiên bản ECMA-262 thì Regular Expression được công nhận là một thành phần chuẩn trong ngôn ngữ. Do đó các ngôn ngữ lập trình phát triển trên yêu cầuđặc tả của bản ECMA-262 thì đều hổ trợ Regular Expression. Phiên bản Javascript 1.2 là phiên bản phát triển dựa trên bản đặc tả ECMA-262 do đó hổ trợ sẵn Regular Expression. Ngoài Javascript còn có rất nhiều ngôn ngữ khác phát triển trên yêu cầuđặc tả của ECMA-262 mà phổ biến nhất hiện nay là Action Script. Phiên bản Action Script 3.0 hổ trợ đầy đủ đặc tả ECMA-262 do đó từ bản này chúng ta có thể sử dụng Regular Expression hoàn toàn như trên Javascript.
Cách đ nh nghĩa Regular Expression trên Javascriptị
Sử dụng Javascript ta có thể viết theo cách như sau: /pattern/modifiers với pattern là mẫu mà ta cần sử dụng, modifiers là các tham số tùy chọn thêm. Lưu ý là pattern là chuỗi bắt buộc còn modifiers là tùy chọn. Cú pháp này dựa trên cú pháp của ngôn ngữ Perl. Dưới đây là một số từ khóa modifers mà Javascript hổ trợ:
/g bật chế độ tìm kiếm toàn cục ("global" match). Khi ta sử dụng các hàm như replace() thì ta dùng tham số này để thay thế hết tất cả các chuổi khớp với điều kiện, ngược lại không sử dụng thì chỉ thay thế cho chuổi đầu tiên khớp với điều kiện. (Nếu bạn đã sử dụng PHP thì khi có tham số /g trong Javascript tương ứng với bên PHP là hàm preg_match_all() còn không có tham số này thì tương ứng là hàm preg_match
/i bật chế độ tìm kiếm phân biệt hoa thường. /m bật chế độ tìm kiếm trên nhiều dòng. Mặc định Javascript chỉ tìm kiếm trên một dòng dù dữ
liệu ta sử dụng là nhiều dòng.
Chúng ta có thể viết gọn các tham số này. Thay vì /i/g/m ta có thể sử dụng /igm.
Một số lưu ý khi khai báo Regular Expression:
Không sử dụng \A và \Z để tìm ký tự đầu dòng và kết thúc dòng như Perl, chúng ta sử dụng ^ và $ để thay thế
Chưa hổ trợ tìm kiếm ngược đầy đủ, sẽ có bài nói kỹ hơn về vấn đề này. Hổ trợ đầy đủ tìm kiếm thuận
Không hổ trợ Unicode, trừ trường hợp ta tìm chính xác từng ký tự theo mã ví dụ như \uFFFF
Không hổ trợ điều kiện trong chuỗi "pattern" Không hổ trợ chú thích trong chuỗi "pattern". Để chú thích cho đoạn mẫu của chúng ta hãy sử
dụng // ở bên ngoài.
Chú thích thêm: Khi khai báo bằng cách này thực chất là chúng ta sử dụng cách viết tắt của Javascript. Cách viết này là thay thể cho cụm từ new RegExp() trong Javascript. Ví dụ về việc dùng đầy đủ như sau:
var test = /pattern/ tương đương với var test = new RegExp("pattern")
var test = /pattern/modifiers tương đương với var test = new RegExp("pattern", "modifiers")
M t s hàm x lý chu i s d ng Regular Expressionộ ố ử ỗ ử ụ
Cách đơn giản nhất là ta sử dụng hàm match() để kiểm tra. Ví dụ: if (myString.match(/regex/)) { /** Tìm thấy chuổi cần tìm **/ }
Để tìm và thay thế chuổi, ta sử dụng hàm replace() theo cú pháp: myString.replace(/replaceme/g, "replacement"); Chú ý lúc sử dụng hàm này ta nên sử dụng tham số /g để tìm và thay thế đầy đủ hết, tham số thứ 2 của hàm là một chuổi bình thường ta cần thay thế. Để sử dụng lại chính chuỗi ta tìm thấy để sử dụng lại trong lúc thay thế, ta sử dụng các ký tự từ $1 đến $9 để làm, với các con số chính là vị trí được tìm thấy của một cụm từ tương ứng với "pattern" mà ta đã nhập vào theo các điều kiện.
Cuối cùng, hàm split() cũng hổ trợ Regular Expression. Ví dụ: var myArray = myString.split(/,/);
Các hàm trong đ i t ng Regular Expressionố ượ
Khi khai báo một chuổi Regular Expression (Đa số chúng ta dùng cách rút gọn) thì chúng ta đã tạo ra một đối tượng RegExp, với các hàm được định nghĩa như sau:
test() Hàm này sẽ kiểm tra tham số truyền vào có trùng với chuỗi "pattern" mà ta đã định nghĩa hay không. Hàm trả về giá trị true nếu chuỗi nhập vào có mẫu ta cần tìm và false nếu tìm không thấy.
exec() Hàm này trả về một mảng chứa các đoạn trùng khớp với "pattern" chúng ta định nghĩa và trả về null nếu không tìm thấy.
Chúng ta còn có thể sử dụng rút gọn mà không cần khai báo chuổi Regular Expression. Ví dụ: /\d/.test(subject) là cách viết nhanh để kiểm tra xem trong chuỗi subject ta nhập vào có con số nào không.
Regular Expressions trong PHP [PHP] 1. Giới thiệu
Regular Expression là gì?+ Biểu thức chính quy.+ Hiểu nôm na là 1 chuỗi có quy tắc để mô tả những chuỗi(string) khác.
Làm việc với string thường rất vất vả và đòi hỏi độ chính xác cao. với Regular Expression trong PHP, công việc này được đơn giản đi rất nhiều. 1 dòng code trong PHP làm việc với string trong trường hợp này có thể sánh với hàng trang code trong các ngôn ngữ khác.
Ta có thể ứng dụng những đoạn code đơn giản ở trên vào các form đòi hỏi nhập dữ liệu, thông tin người dùng, ... hay dùng để lọc các biến được truyền.
2. Hàm preg_match trong PHP
Trong PHP có một hàm là preg_mathch(string pattern, string subject). Hàm này trả về 1 nếu đúng quy tắc so mẫu, trả về 0 nếu sai quy tắc so mẫu.
Với: string pattern: là biểu thức dùng để so mẫu. Các chuỗi được so mẫu phải tuân thủ quy tắc của biểu thức này.string subject: là chuỗi được so mẫu.
Một pattern (biểu thức so mẫu) có dạng:
$pattern = "/ thiết_lập quy_tắc_ở đây /";
Biểu thức so mẫu nằm giữa hai dấu "/", và hai dấu "/" này nằm trong cặp nháy đôi.
Để viết regular expression ta cần làm quen với những ký tự có ý nghĩa đặc biệt trong một regular expression đó là các Meta symbols
Meta Symbols Ý nghĩa
^ Bắt đầu dòng (string)
$ Kết thúc dòng (string)
. Đại diện cho một ký tự bất kỳ
+
Lặp lại ký tự hay cụm ký tự đứng trước nó (>=1)Ví dụ: a+ : nghĩa là lặp lại chữ a và phải có ít nhất là một chữ a. Do vậy mới ghi >=1 cho dễ hiểu.- 123a: 1(đúng)- 123aa: 1(đúng)- 123 : 0(sai). vì không có chữ a nào được lặp.
*
Cũng là lặp lại ký tự hay cụm ký tự đứng trước nó (>=0)Ví dụ: a* : nghĩa là lặp lại chữ a, nếu không có chữ a cũng không sao. Do vậy mà >=0-123a: (1)-123aaa: (1)-123: (1). Không có chữ a cũng không sao.
? Tồn tại hay không tồn tại ký tự hay cụm ký tự đứng trước nó
\ Dấu \ đi kèm với 1 meta symbol sẽ làm mất ý nghĩa của meta symbol đó - trả về symbol bình thường.
Ví dụ:
$patern = "/.../"; (trong dấu...ta thay các biểu thức sau)
^a : Bắt đầu của dòng là ký tự a. Dòng này có thể là abcd, aaaa, a4684,.... miến sao bắt đầu bằng ký tự a.
^string$ : Dòng này mang giá trị cứng là string vì nó bị chặn giữa ^ và $. Nghĩa là chỉ có chữ string mới đúng, còn lại thì sai hết.
Từ bây giờ thì ta sẽ sử dụng: $pattern = "/^...$/"; ^ :bắt đầu một dòng, $ :kết thúc một dòng
a. :có thể mang giá trị: ab, a1, au, af .Nhưng không thể là abc, ab1, vì dấu . chi đại diện cho một ký tự!
ax+ :biểu diễn cho dòng: ax, axx, axxxx - nhưng không thể là "a" vì + đại diện cho >=1 ký tự.
ay* :biểu diễn cho dòng: a, ay, ayy, ayyyyyyyyy,....
ab? :biểu diễn cho: a, ab (b có thể có hoặc không)
a\+b :biểu diễn cho dòng: "a+b"
Cách biểu diễn số và chữ cái
\d : Biểu diễn một con số bất kỳ.
Ví dụ:
$reg5="/^\d$/"; // chi co 1 chu so$reg5a="/^\d\d$/"; // chi co 2 chu so$reg5b = "/^10A\d\d\d\d\d\d$/"; // 10A123456
\D : Ký tự bất kỳ không phải là chữ số (ngược với \d)
Ví dụ:
$reg = "/^\D$/"; // bieu dien mot ky tu bat kỳ khong phai la so$reg ="/^\d\D\d\D$/"; bieu dien mọt chuoi co dang 1a2b. Với a,b là ký tự bất kỳ khong phai la so
\w - Ký tự từ a-z, A-Z, hoặc 0-9
Ví dụ:
$reg6 = "/^\w\w\w$/"; // chi gom 3 ky tu từ a->z, A->Z, 0->9. Khong co ky tu dac biet$reg7 ="/^\w+\@\w+\.\w+$/"; // kiem tra email [email protected]
\W - Ngược lại với \w (nghĩa là các ký tự không thuộc các khoảng: a-z, A-Z, hoặc 0-9)
Nghĩa là chỉ chứa các ký tự đặc biệt
Ví dụ:
$reg = "/^\W$/"; // chua mọt ký tu khong thuoc tù a-z , A-Z, 0-9
\s+ - Có nghĩa: có >=1 khoảng trắng.
Ví dụ:
$reg ="/^\w+\s\d+$/"; // bieu dien a 1, g 22, abc 123
Ý nghĩa các dấu ngoặc tròn, ngoặc nhọn, ngoặc vuông
Ngoặc tròn: () : dùng để gom các ký tự thành một nhóm
Ví dụ:
$reg = "/^\d(ab)+$/"; bieu dien 1ab, 1abab, 1ababab. Lặp lại ab vô hạn
Ngoặc nhọn {}: dùng để lặp ký tự hay cụm ký tự đứng trước nó với số lượng xác định+ {3}: lặp lại chỉ 3 lần.+ {3,}: lặp lại >=3.+ {3,10}: lặp lại từ 3 đến 10 lần.
Ví dụ:
$reg8 = "/^\d{3}$/"; // lap chi 3 so$reg8a = "/^\d{3,}$/"; // lap >=3$reg9 = "/^a(xy){2,}$/"; // lap xy toi thieu tu 2 lan tro len$reg9a = "/^a(xy|12){2,}$/"; // lap xy hoac 12 toi thieu 2 lan tro len
Dấu gạch thẳng đứng để lựa chọn hoặc cái này hoặc cái kia
Ví dụ:
$reg16 = "/^[a-zA-Z0-9]+\.(jpg|png|gif|jpeg|JPG|PNG|GIF|JPEG)$/"; // kiem tra file hinh co duoi khac nhau
Dấu ngoặc vuông để chỉ đoạn ký tự cho phép+ [a-z] : chỉ các chữ từ a đến z+ [A-Z] : chỉ các chữ từ A đến Z
+ [0-9] : chỉ các số từ 0-9+ [a-zA-z0-9] : các chữ từ a-z, A-Z, 0-9
Ví dụ:
$reg13 = "/^[3-7]$/"; // chi co 1 so trong khoang tu 3 den 7
3. Hàm preg_replace trong PHP
Hàm này dùng để tìm một string theo quy tắc và thay thế string đó theo mình muốn.
Cú pháp:
preg_replace(mixed regex, mixed replace, mixed subject);
mixed regex: biểu thức so mẫumixed replace: mẫu thay thế.mixed: chuỗi mẹ
Ví dụ:
preg_replace("/(\d{3})/","<u>$1</u>","abc 123 efg");
Tìm chuỗi 123 và gạch dưới nó. Kết quả abc 123 efg
Chú ý:
- Cứ 1 nhóm trong dấu ngoặc tròn được đại diện bằng các biến $ là được đánh dấu lần lượt từ trái sang phải, bắt đầu là $1, tiếp theo là $2 , $3...
- Nếu thay thế nó bằng một cái khác thì không có $1, $2, $3...Còn nếu chỉ thay đổi nó thì dùng $1, $2, $3.. như ví dụ ở trên.
Ví dụ
preg_replace("/^\<div(\s+)(id\=\'teo\')?\>(\s+)?(.*)(\s+)?\<\/div\>$/","<b><u>$4</u></b>","<div id='teo'> Nguyen Van Teo </div>");
Tìm <div id='teo'> Nguyen Van Teo </div> và thay đổi nó thành <b><u>Nguyen Van Teo</u></b>
Lưu ý:
Biểu thức so mẫu viết liền, không khoảng trắng. Nếu chuỗi mẹ có khoảng trắng thì mình thêm vào biểu thức so mẫu là (\s+). Khi đó nhớ đếm cụm dấu ngoặc để xác định biến $ cho chính xác.
4. Hàm preg_split trong PHP
Hàm này có tác dụng cắt chuỗi giống như hàm explore, nhưng hàm explore phải kiếm đúng theo ký tự, còn hàm này kiếm theo quy tắc
Cú pháp:
preg_split(string pattern, string subject);
string pattern: biểu thức so mẫustring subject: chuỗi mẹ
Chú ý: hàm này trả về một mảng
Ví dụ:
$macth = preg_split("/\#/","abc#123#efg");print_r($macth);
