Hướng dẫn regex href javascript - regex href javascript

Bài viết được sự cho phép của tác giả Lưu Bình An

Giới thiệu

Regular Expression (hay gọi tắt là regex – đọc là ghi-ríc-cờ-sờ) là một string với format đặc biệt, với nó chúng ta có thểregex – đọc là ghi-ríc-cờ-sờ) là một string với format đặc biệt, với nó chúng ta có thể

• Tìm text trong string
• Thay thế substring trong string
• Trích xuất thông tin từ một string

Tất cả các ngôn ngữ đều có hỗ trợ regex. Có thể mỗi ngôn ngữ có đôi chổ khác nhau, tuy nhiên nhìn chung thì nó được áp dụng giống nhau cho hầu hết.

Regex có thể nói là rất khó học, khó viết, khó nhớ, khó sửa. Tuy nhiên có những việc chỉ có thể thực hiện được với regex.

Ví dụ, kiểm tra một 

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

4 có kết thúc bằng 

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

5, 

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

6 hay không

"google.com" → true
"www.vietnam.football" → true
"google.foobar" → false

regex cho yêu cầu đó

/(\.com|\.football)$/i

Khai báo regex

Phân tách cái regex ở trên cái regex ở trên

• regex1.test('football');
  // => true
  regex1.test('blablabla football blablabla');
  // => true
  regex2.test('footba');
  // => false
  regex2.test('blab foot ballabla');
  // => false

  7 đặt trước các ký tự đặc biệt, dấu 

  regex1.test('football');
  // => true
  regex1.test('blablabla football blablabla');
  // => true
  regex2.test('footba');
  // => false
  regex2.test('blab foot ballabla');
  // => false

  8 là một ký tự đặc biệt

• regex1.test('football');
  // => true
  regex1.test('blablabla football blablabla');
  // => true
  regex2.test('footba');
  // => false
  regex2.test('blab foot ballabla');
  // => false

  9 là câu điều kiện oror

• /^football/.test('football')     //✅
  /^football/.test('bla football') //❌

  0 là điều kiện phải xuất hiện ở cuối string
• Đoạn nằm giữa 

  /^football/.test('football')     //✅
  /^football/.test('bla football') //❌

  1, là chổ chúng ta viết các điều kiện. Đoạn-nằm-giữa có tên tiếng mỹ là pattern
• Chữ 

  /^football/.test('football')     //✅
  /^football/.test('bla football') //❌

  2 ở cuối, phía sau 

  /^football/.test('football')     //✅
  /^football/.test('bla football') //❌

  3 là một dạng setting, 

  /^football/.test('football')     //✅
  /^football/.test('bla football') //❌

  2 là điều kiện chỉ hợp lệ nếu xuất hiện đúng một lần duy nhất. Có nhiều dạng setting khác nữa, phía dưới sẽ đề cập.setting, 

  /^football/.test('football')     //✅
  /^football/.test('bla football') //❌

  2 là điều kiện chỉ hợp lệ nếu xuất hiện đúng một lần duy nhất. Có nhiều dạng setting khác nữa, phía dưới sẽ đề cập.

Trong javascript, regex là một object, có thể định nghĩa bằng 2 cách

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

Kiểm tra regex

Regex ở trên chúng ta đang tìm string 

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

5, không giới hạn gì cả, chữ 

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

5 nằm ở đâu không quan trọng.

Kiểm tra regex bằng 

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

7, sẽ trả về giá trị 

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

8

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

Một số điều kiện có sẵn

Đã khó rồi, các bạn còn đề nghị một số kiểu viết tắt cho bắt anh em căng não ra học

• /^football/.test('football')     //✅
  /^football/.test('bla football') //❌

  9 tương tự như 

  /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  0, chỉ là các giá trị số

• /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  1 tương tự như 

  /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  2, không chưa các ký tự số

• /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  3 tương tự như 

  /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  4, bao gồm ký tự chữ và số

• /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  5 tương tự như 

  /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  6, không chứa ký tự chữ và số

• /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  7 chứa các ký tự khoản trống như: space, tab, newline

• /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  8 không chứa ký tự khoản trống

• /football$/.test('football')     //✅
  /football$/.test('bla football') //✅
  /football$/.test('football you') //❌

  9 chứa ký tự null

• /^football$/.test('football') //✅

  0 chứa ký tự xuống dòng (newline)

• /^football$/.test('football') //✅

  1 chứ ký tự tab

Các điều kiện chúng ta hay sử dụng

Phải xuất hiện ở đầu câu: 

/^football$/.test('football') //✅

2

Nếu muốn thêm điều kiện chữ 

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

5 phải ở đầu câu đầu câu

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

Phải xuất hiện ở cuối câu: 

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

0

Điều kiện chữ 

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

5 nằm ở cuốicuối

/football$/.test('football')     //✅
/football$/.test('bla football') //✅
/football$/.test('football you') //❌

Nếu kết hợp cả 2 cú pháp trên, ta có câu điều kiện chỉ được phép có đúng chữ 

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

5

/^football$/.test('football') //✅

Phải bắt đầu bằng bằng 1 pattern và kết thúc bằng 1 pattern khác: 

/^football$/.test('football') //✅

7

Bắt đầu bằng chữ 

/^football$/.test('football') //✅

8 và có kết thúc bằng chữ 

/^football$/.test('football') //✅

9

/^hey.*joe$/.test('hey joe')             //✅
/^hey.*joe$/.test('heyjoe')              //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!')            //❌

Phải nằm trong khoản: 

/^hey.*joe$/.test('hey joe')             //✅
/^hey.*joe$/.test('heyjoe')              //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!')            //❌

0

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

/[a-z]/.test('a')  //✅
/[a-z]/.test('1')  //❌
/[a-z]/.test('A')  //❌

/[a-c]/.test('d')  //❌
/[a-c]/.test('dc') //✅

Hợp thể

/(\.com|\.football)$/i

0

/(\.com|\.football)$/i

1

Chỉ được phép xuất hiện 1 lần: kết hợp 

/^hey.*joe$/.test('hey joe')             //✅
/^hey.*joe$/.test('heyjoe')              //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!')            //❌

1, 

/^football$/.test('football') //✅

2, 

/^football/.test('football')     //✅
/^football/.test('bla football') //❌

0

/(\.com|\.football)$/i

2

Đảo ngược kết quả: 

/^hey.*joe$/.test('hey joe')             //✅
/^hey.*joe$/.test('heyjoe')              //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!')            //❌

4

/(\.com|\.football)$/i

3

Điều kiện hoặc: 

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

9hoặc: 

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

9

/(\.com|\.football)$/i

4

Xuất hiện ít nhất một lần: 

/^hey.*joe$/.test('hey joe')             //✅
/^hey.*joe$/.test('heyjoe')              //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!')            //❌

6

/(\.com|\.football)$/i

5

Chỉ đúng hoặc sai, không có thể cả đúng và sai: 

/^hey.*joe$/.test('hey joe')             //✅
/^hey.*joe$/.test('heyjoe')              //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!')            //❌

7

Nói vậy hơi khó hiểu, để giải thích rõ hơn nè, ví dụ yêu cầu phải là số từ 0-9, nếu kiểm tra 

/^hey.*joe$/.test('hey joe')             //✅
/^hey.*joe$/.test('heyjoe')              //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!')            //❌

8 => false vì nó có 1 là đúng, 

/^hey.*joe$/.test('hey joe')             //✅
/^hey.*joe$/.test('heyjoe')              //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!')            //❌

9 là sai, còn 

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

0 vì nó chỉ có sai không có đúng

/(\.com|\.football)$/i

6

Đúng n lần: 

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

1

/(\.com|\.football)$/i

7

Đúng từ n đến m lần: 

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

2

/(\.com|\.football)$/i

8

Nếu không đưa vào giá trị 

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

3 thì thõa từ 

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

4 đến bao nhiêu cũng được

/(\.com|\.football)$/i

9

Điều kiện đó không bắt buộc: 

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

5

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

0

Nhóm điều kiện

Để nhóm các điều kiện lại, đặt giữa 

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

6

Ví dụ bên dưới, điều kiện thõa khi có đúng 3 ký tự số và theo sau đó là ký tự số hoặc chữ

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

1

Nếu đặt dấu 

/^hey.*joe$/.test('hey joe')             //✅
/^hey.*joe$/.test('heyjoe')              //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!')            //❌

6 phía sau 

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

6

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

2

Lấy giá trị của 1 Group

Thay vì sử dụng 

/[a-z]/ // có các ký tự a,b,c....x,y,z
/[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
/[a-c]/ // có các ký tự a,b,c
/[0-9]/ // 0,1,2...8,9

9 để trả về boolean, sử dụng

• /[a-z]/.test('a')  //✅
  /[a-z]/.test('1')  //❌
  /[a-z]/.test('A')  //❌
  
  /[a-c]/.test('d')  //❌
  /[a-c]/.test('dc') //✅

  0

• /[a-z]/.test('a')  //✅
  /[a-z]/.test('1')  //❌
  /[a-z]/.test('A')  //❌
  
  /[a-c]/.test('d')  //❌
  /[a-c]/.test('dc') //✅

  1

Sẽ return một Array với những string thõa điều kiện

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

3

Trường hợp group đó thõa điều kiện nhiều lần, chỉ trả về giá trị cuối cùng

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

4

Setting

• /[a-z]/.test('a')  //✅
  /[a-z]/.test('1')  //❌
  /[a-z]/.test('A')  //❌
  
  /[a-c]/.test('d')  //❌
  /[a-c]/.test('dc') //✅

  2: kiểm tra điều kiện nhiều lần

• /^football/.test('football')     //✅
  /^football/.test('bla football') //❌

  2: không phân biệt hoa thường

• /[a-z]/ // có các ký tự a,b,c....x,y,z
  /[A-Z]/ // có các ký tự A,B,C,...X,Y,Z
  /[a-c]/ // có các ký tự a,b,c
  /[0-9]/ // 0,1,2...8,9

  3: cho phép kiểm tra xuống dòng

• /[a-z]/.test('a')  //✅
  /[a-z]/.test('1')  //❌
  /[a-z]/.test('A')  //❌
  
  /[a-c]/.test('d')  //❌
  /[a-c]/.test('dc') //✅

  5: bật hỗ trợ unicode

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

5

Thay thế chuỗi

Hàm 

/[a-z]/.test('a')  //✅
/[a-z]/.test('1')  //❌
/[a-z]/.test('A')  //❌

/[a-c]/.test('d')  //❌
/[a-c]/.test('dc') //✅

6 của String Object

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

6

Có thể truyền vào tham số đầu là một Regex

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

7

Thêm 

/[a-z]/.test('a')  //✅
/[a-z]/.test('1')  //❌
/[a-z]/.test('A')  //❌

/[a-c]/.test('d')  //❌
/[a-c]/.test('dc') //✅

2 để thay thế nhiều lần

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

8

Sử dụng Group để di chuyển các phần text trong string

// tạo 1 object mới
const regex1 = new RegExp('football');

// dùng regular expression literal 
const regex2 = /football/

9

Lấy số từ String

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

0

Kiểm tra email

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

1

Lấy đoạn test nằm giữa dấu /[a-z]/.test('a') //✅ /[a-z]/.test('1') //❌ /[a-z]/.test('A') //❌ /[a-c]/.test('d') //❌ /[a-c]/.test('dc') //✅8

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

2

Lấy nội dung ở giữa html tag

regex1.test('football');
// => true
regex1.test('blablabla football blablabla');
// => true
regex2.test('footba');
// => false
regex2.test('blab foot ballabla');
// => false

3

Bài viết gốc được đăng tải tại vuilaptrinh.com

Có thể bạn quan tâm:

• 20 công cụ và tài liệu hay ho dành cho Front-end
• Hướng dẫn code game Flappy Bird bằng JavaScript
• Hướng dẫn code chức năng đổi màu nền ngẫu nhiên với JavaScript

Xem thêm các vị trí tuyển Javascript hấp dẫn tại TopDev