Hướng dẫn regex javascript example

Regular Expression [RegEx] à? Nghe quen quen.

Đã bao giờ bạn ở vào các tính huống sau đây?

Bạn cần xử lý validate [kiểm tra tính hợp lệ] các trường dữ liệu nhập vào ô Text

Bạn cần copy và paste rất nhiều text từ chỗ này sang chỗ kia

Ví dụ từ XML sang C#

hoặc CSV, Excel sang C#

Tìm kiếm một chuỗi nằm ở nhiều dòng trong Visual Studio hoặc Notepad++

Ví dụ tôi cần tìm và xóa bỏ [replace all] các comment như thế này ở code cũ.

Kiểm tra bằng câu lệnh SQL xem đã insert đủ các trường vào DB hay chưa?

Bạn cần bóc tách dữ liệu của một trang web.

Ví dụ extract [crawling] tách lấy dữ liệu từ một trang web để lưu lại vào cơ sở dữ liệu của bạn

Cơn ác mộng đọc một chuỗi string từ DB và cố gắng chuyển đổi nó sang DateTime

Chuỗi ngày tháng lưu vào CSDL rất đa dạng. Rất khó để dùng hàm DateTime.TryParse[] để tự động chuyển đổi một chuỗi thành Datetime ngon lành cành đào.

Tìm kiếm một chuỗi, lưu chuỗi đó lại và lấy chuỗi đã lưu chèn vào chỗ nào đó

Hay nói cách khác, ta cần thay một chuỗi bằng một chuỗi khác, trong chuỗi mới đó lại có chứa cả chuỗi vừa bị thay thế. Như ví dụ dưới đây sẽ cho các bạn thấy. Ta cần tìm ra ClassName, nhưng không phải thay thế ClassName đó bằng Class khác mà ta sẽ nhét nó vào 2 vị trí thay vì chỉ có 1 vị trí như hiện tại.

Vậy RegEx có thể giúp gì cho chúng ta trong các trường hợp trên?

Regular Expression sinh ra là để giúp cho cuộc đời của bạn bớt khổ. Hãy tưởng tượng xem bạn phải nai lưng ra copy-paste bao nhiêu code. Bạn hoàn toàn có thể download các tool về để replace giúp bạn. Nhưng bạn cần bao nhiêu tool cho đủ đây.

Thay vào đó, bạn hãy thử học RegEx. Bộ cú pháp này sẽ giúp cho bạn thao tác với chuỗi như dao chém chuối. Như ta thấy các ví dụ bên trên, tất cả đều là XỬ LÝ CHUỖI ví dụ Cut Copy Paste hoặc Replace chuỗi. RegEx là ngôn ngữ giúp xử lý chuỗi rất mạnh.

RegEx không phải là một ngôn ngữ lập trình. Nó chỉ là một BỘ CÚ PHÁP dùng để bắt chuỗi. Nhưng nó cực kỳ phổ biến và bất kỳ ngôn ngữ lập trình nào cũng hỗ trợ. Nó có cả trăm ngàn ứng dụng và công cụ ăn theo.

Hãy lần lượt xem qua các ví dụ sau đây để học cách sử dụng Regular Expression nhé.

Bắt đầu sử dụng Regular Expression

Để bắt đầu sử dụng và học cách dùng RegEx, mình hay dùng trang web //regex101.com/. Giao diện như sau:

Trước hết các bạn hãy đọc qua một lượt các quy tắc bắt chuỗi [matching] đơn giản nhất của RegEx

[xyz] Tìm và so sánh tất cả ký tự nằm trong dấu ngoặc vuông và trùng khớp với 1 ký tự trong dấu ngoặc vuông. Ví dụ: [31] sẽ trùng khớp với 3 hoặc 1, [0123456789] sẽ trùng khớp với bất kỳ một ký tự nào trong khoảng từ 0 đến 9.
[a-z] So sánh và trùng khớp với một ký tự nằm trong khoảng chỉ định. Ví dụ: [a-z] sẽ trùng khớp với một ký tự trong khoảng từ a đến z nằm trong chuỗi cần test. [0-9] sẽ trùng khớp với bất kỳ một ký tự nào trong khoảng từ 0 đến 9.
[^xyz] So sánh và không trùng khớp với những ký tự nằm trong khoảng chỉ định. Dấu ^ [dấu mũ] nằm trong dấu ngoặc vuông là một dấu phủ định. Ví dụ: [^a-z] sẽ không trùng khớp với tất cả các ký tự nằm trong khoảng từ a đến z.
^ Trùng khớp với phần đầu của chuỗi đích. Ví dụ: ^a sẽ trùng khớp với chữ a trong chuỗi abc, ^\w+ sẽ trùng khớp với chữ đầu tiên – chữ "the" của chuỗi "The quick brown fox jumps over the lazy dog".
$ Trùng khớp với phần cuối của chuỗi đích. Ví dụ: c$ sẽ trùng khớp với chữ c trong chuỗi abc, \w+$ sẽ trùng khớp với chữ cuối – chữ "dog" của chuỗi "The quick brown fox jumps over the lazy dog".
+ Trùng khớp với 1 hoặc nhiều lần ký tự đứng trước nó. Ví dụ \d+ sẽ chỉ trùng với chuỗi có từ 1 con số trở lên.
* Trùng khớp với 0 hoặc nhiều lần ký tự đứng trước nó. Ví dụ \d* sẽ trùng với chuỗi có chứa 1 chữ số hoặc k có chữ số nào cũng đc.
? Trùng khớp với 0 hoặc 1 lần ký tự đứng trước nó. Tương tự như * nhưng nó lại chỉ nhân lên 1 lần. * thì nhân lên nhiều lần.
. Trùng khớp với 1 ký tự đơn bất kỳ ngoại trừ ký tự ngắt dòng [line-break] và cũng không lấy được ký tự có dấu [unicode]. Ví dụ: . sẽ trùng khớp với ký tự a hoặc b hoặc c trong chuỗi abc. Nhưng . sẽ không bắt được các chữ ă hoặc ê.
x{n} Trùng khớp đúng với n lần ký tự đứng trước nó. n là một số không âm. Ví dụ \d{2} sẽ bắt đc các số có 2 chữ số đứng liền nhau.
x{n,} Trùng khớp với ít nhất n lần ký tự đứng trước nó. n là một số không âm.Ví dụ \d{2,} sẽ bắt đc các số có từ 2 chữ số trở lên đứng liền nhau.

x{n,m} Trùng khớp với ít nhất n lần và nhiều nhất là m lần ký tự đứng trước nó. n và m là một số không âm và n Vektoren [Länge eines Vektors] GCFA CDN ist das Maß einer Menge sozu…

Tìm cách loại bỏ toàn bộ COMMENT trong đoạn code sau:

var sample = 0; 
var my_string = "Hello World!"; 
// This is a comment! 
function do_stuff[]{ 
// This is another comment! 
alert[‘somethings’];
/* this is a multiline
     comment */
}

Tìm cách lấy ra chuỗi tiếng Nhật trong chuỗi sau: “

This is a demo story　前に来た時は北側からで、当時の光景はいまでも思い出せる。And it is true.

Lấy ra những file ảnh và độ phân giải của ảnh từ chuỗi sau:

.bash_profile
workspace.doc
img0912.jpg [1280x720]
updated_img0912.png [1024x768]
documentation.html
favicon.gif 
img0912.jpg [1920x1600]
access.htaccess

Đọc nội dung từ trang tin rss sau: //rss.cnn.com/rss/edition.rss Lấy ra các Tiêu đề, ngày giờ đăng, nội dung tin vắn

Đáp án các bạn post vào phần comment và cùng trao đổi nhé.

Nếu các bài tập trên đây vẫn chưa đủ, các bạn hãy làm thêm các bài tập tại trang //regexone.com nhé, rất nhiều ví dụ hay.

Kết bài

Hi vọng bài viết nhỏ này đã giúp bạn học được cú pháp viết RegEx và áp dụng vào công việc thường ngày. Mình dùng Regex rất nhiều và nó là trợ thủ đắc lực trong quá trình code.

Các bạn thì sao? bạn đã dùng Regex vào những việc gì? Hãy kể tên bên dưới comment để mình cùng học hỏi với nhé.

Thanks các bạn đã đọc, hãy comment, upvote và share bạn bè thật nhiều nhé!

Update v2.2: Thêm các bài tập để các bạn luyện thêm [theo yêu cầu của nhiều bạn, nhớ tự làm trước khi dòm đáp án nhé ^^!]

BTU1. Tìm ra các chuỗi là số điện thoại trong chuỗi sau. Chú ý một số loại ra một số chuỗi không phải là số điện thoại

Positive:
+42 555.123.4567
+1-[800]-123-4567
+7 555 1234567
+7[926]1234567

+79261234567
926 1234567
9261234567
1234567
123-4567
123-89-01
495 1234567
469 123 45 67
89261234567
8 
926.123.4567
415-555-1234
650-555-2345
[416]555-3456
202 555 4567
4035555678
1 416 555 9292
11234567890
123-456-7890
[123] 456-7890
1 [123] 456-7890
123 456 7890
1 123 456 7890
123.456.7890
1 123.456.7890
1.123.456.7890
+1 123.456.7890
+91 [123] 456-7890
+1-[800]-555-2468
1-234-567-8912
+22-432-359-3687

Negative:
926 3 4
8 800 600-APPLE

Lời giải //regexr.com/38pvb

BTU2. Tìm ra chuỗi là địa chỉ email trong chuỗi sau, chú ý loại bỏ các chuỗi k phải địa chỉ emai thực sự.

Acceptable
---------------











Non-Acceptable
---------------
abc@@insta.com.com.com

abc@insta%.com
abc@insta/.com
abc@insta\\.com
 





abc+@insta.com

abc%@insta.com
abc\\@insta.com
abc/@insta.com

.com.com

Lời giải: //regexr.com/3bcrb

BTU3. Tìm cách lấy ra và ngăn cách chuỗi số sau thành có phần trăm phần nghìn.

12345678

Toi muon no tro thanh 12,345,678

Lời giải: regexr.com/4409r

BTU4. Lấy ra các chuỗi ngăn cách bởi dấu phẩy theo định dạng của một file CSV như sau [chú ý là chuỗi bị xuống dòng]:

12,\"Hello, my name is Borislav.\",\"\"\"Welc
ome\"\"\",\"welcome\",   what\'s up!
new entry

Lời giải: //regexr.com/3apuc

BTU5. Tìm và xóa đi toàn bộ các thẻ HTML trong đoạn text dưới đây:

Welcome to RegExr v2.0 by gskinner.com!
 Welcome
Edit the Expression & Text to see matches. Roll over matches or the expression for details. Undo mistakes with ctrl-z. Save & Share expressions with friends or the Community. A full Reference & Help is available in the Library, or watch the video Tutorial.

Sample text for testing:
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
xyz
xy
xy
xy
xy
0123456789 _+-.,!@#$%^&*[];\\/|\"\'
12345 -98.7 3.141 .6180 9,000 +42
555.123.4567	+1-[800]-555-2468
	
www.demo.com	//foo.co.uk/
//regexr.com/foo.html?q=bar


	
		< title> My website 
		
	
	
		 Hello World 
		 goodbye world
	




  
    
    
    
    How Long You Life?
    
    
    
  
  
    
      How much you have to live?
      Days Hours Min Sec

Lời giải: //regexr.com/3cak1

BTU6. Tìm cách loại bỏ các chuỗi console.log[] do lập trình viên viết để test ra khỏi code trước khi bàn giao

function[window,document, this] {
console.log[\"This should be only in debug mode];
anotherCode[];
console.log[\"this
too\" + var +
\" =]\"];
var variable;
console.
log[\"debug mode\"];
do[foo];
console.
log[\"this was\" +
\" formatted\" +
 \" by \" + ideFormatter];
 
}[window, console, this]];

Lời giải: //regexr.com/3fi66

BTU7. Loại bỏ toàn bộ các đoạn comment code trong đoạn code sau đây:

var sample    = 0;
var new       = 1;
var my_string = \"Hello World!\";

// This is a comment!

function do_stuff[]{
	alert[my_string];//another comment
}

/* This is
 * a multiline
 * comment!
 */

var something;

/* programs/applications 16/*[4*2]=2 */

if[sample > new]{
  do_stuff[/* arguments here */];
}

//

/**/

Lời giải: //regexr.com/3aeb7

BTU8. Lấy ra các chuỗi là các URL đầy đủ trong đoạn text dưới đây:

Welcome to RegExr 0.3b, an intuitive tool for learning, writing, and testing Regular Expressions. Key features include: 
www.google.com
* real time results: shows results as you type 
* code hinting: roll over your expression to see info on specific elements 
* detailed results: roll over a match to see details & view group info below 
* built in regex guide: double click entries to insert them into your expression 
* online & desktop: regexr.com or download the desktop version for Mac, Windows, or Linux 
* save your expressions: My Saved expressions are saved locally 
* search Comm //google.us.edi?34535/534534?dfg=g&fg unity expressions and add your own 
* create Share Links to send your expressions to co-workers or link to them on Twitter or your blog [ex. //RegExr.com?2rjl6] 

Built by gskinner.com with Flex 3 [adobe.com/go/flex] and Spelling Plus Library for text highlighting [gskinner.com/products/spl].

Lời giải: //regexr.com/39nr7

BTU9. Lấy ra toàn bộ các URL của một video Youtube từ đoạn text test sau đây

video complex
//www.youtube.com/watch?feature=something&v=videoid1&embed=something
//www.youtube.com/watch?feature=something&v=videoid2&embed=something
www.youtube.com/watch?feature=something&v=videoid3&embed=something
youtube.com/watch?feature=something&v=videoid4&embed=something

video
//www.youtube.com/watch?v=videoid1
//www.youtube.com/watch?v=videoid2
www.youtube.com/watch?v=videoid3
youtube.com/watch?v=videoid4

other video
//www.youtube.com/v/videoid1
//www.youtube.com/v/videoid2
www.youtube.com/v/videoid3
youtube.com/v/videoid4

channel
//www.youtube.com/channel/channelid1
//www.youtube.com/channel/channelid2
www.youtube.com/channel/channelid3
youtube.com/channel/channelid4

user
//www.youtube.com/user/username1
//www.youtube.com/user/username2
www.youtube.com/user/username3
youtube.com/user/username4

search
//www.youtube.com/results?search_query=search+query1
//www.youtube.com/results?search_query=search+query2
www.youtube.com/results?search_query=search+query3
youtube.com/results?search_query=search+query4

Youtu.be video
//youtu.be/videoid1
//youtu.be/videoid2
youtu.be/videoid3

normal youtube link
//www.youtube.com
//www.youtube.com
www.youtube.com
youtube.com

Youtu.be link
//youtu.be
//youtu.be
youtu.be

Lời giải: //regexr.com/3akf5

BTU10. Lấy ra các đoạn text là giá trị màu RBG

Should match 3 ou 6 digits hexadecimal numbers
#fff #FFF #Fff #ff004B
All numerical values can have leading zeros. Percentages can have decimals.
White spaces are allowed before and after values.
Should match rgb[] colors with 3 values all between 0 and 255
rgb[0,0,0] RGB[124, 100, 0] rgb[255,255,255] Rgb[ 0255, 00001, 02]
Should match rgb[] colors using percentages all between 0 and 100
rgb[10%,10%,10%] rgb[100.0%, 2.5%, 0%] rgb[00010%, 0002%, 001%]
Should match rgba[] colors with 3 values between 0 and 255 plus 1 decimal value between 0 and 1
rgba[255 , 0 , 0, 0.5 ] rgba[1,1,1,0.255] rgba[0,0,0,0]
Should match rgba[] colors using 3 percentage values between 0 and 100 plus 1 decimal value between 0 and 1
rgba[10%,10% , 10%, 0.2] rgba[10%, 0025.2%, 1%, 0.0001]
Should match hsl[] colors with first value between 0 and 360 and 2 more percentage values between 0 and 100
hsl[0,20%,100%] HsL[360,10% , 0.2% ] hsl[000350, 002%, 0004.1%]
Should match hsl[] colors with first value between 0 and 360 and 2 more percentage values between 0 and 100 plus 1 decimal value between 0 and 1
hsla[140,2%,50%,0.2] hsla[0,0%,0%,0] hsla[001,002%,00001.2%,0000.254]

Should NOT match hexadecimal numbers with not exactly 3 or 6 digits
#f #ff #ffff #fffff #fffffff
Should NOT match invalid hexadecimal values
#ffg #fffffg
Should NOT allow space between function and opening parenthesis
rgb [0,0,0] rgba [0,0,0,0] rgb [0%,0%,0%] rgba [0%,0%,0%,0] hsl [0,0%,0%] hsla [0,0%,0%,0]
Should NOT match rgb[] nor hsl[] colors with more or less than 3 values
rgb[0,0,0,0] rgb[0,0] hsl[0,0%,0%,0] hsl[0,0%]
Should NOT match rgba[] nor hsla[] colors with more or less than 4 values
rgba[0,0,0] rgba[0,0,0,0,0] hsla[0,0%,0%] hsla[0,0%,0%,0,0]
Should NOT allow rgb values over 255, nor rgb values with decimals
rgb[256,0,0] rgb[100.2,0,0]
Should NOT allow percentages over 100
rgb[120%,10%,1%] hsl[200, 101%, 10%]
Should NOT allow alpha values over 1
rgba[0,0,0,1.2] hsla[120, 50%, 50%, 1.3]
Should NOT allow hue values over 360
hsl[361,50%,50%] hsla[361,50%,50%,0.5]
Should NOT match invalid hsl format
hsl[1%,2%,3%] hsl[5,6,7]
Should NOT match rgb[] colors with mixed percentages and integers
rgb[255, 10%, 0] rgb[10%, 255, 0] rgba[10%, 255, 0, 0.3]

Lời giải: //regexr.com/38lmo