1. Hãy dành vài giây Đăng nhập hoặc Đăng ký tài khoản để truy cập và sử dụng TBit hiệu quả nhất.
    Ẩn thông báo
  2. Bạn hãy like trang Facebook của TBit để nhận được tin tức công nghệ nhanh nhất từ chúng tôi.
    Ẩn thông báo

Cách sử dụng Regular Expressions trong JavaScript

Thảo luận trong 'JavaScript' bắt đầu bởi Admin, 23/11/19.

0/5, 0 phiếu

    1. Admin Founder

      1. Giới thiệu về Regex
      regular-expression-in-javascript.png
      Regex (Regular Expressions) tạm dịch là “biểu thức chính quy” là một cách hiệu quả để làm việc với dữ liệu dạng xâu kí tự, hay còn gọi là chuỗi (string). Bằng cách tạo một regex, bạn có thể làm một số việc như:
      • Tìm kiếm một đoạn văn bản
      • Trích rút một đoạn văn bản
      • Thay thế một đoạn văn bản bằng một đoạn văn bản khác
      Hầu hết các ngôn ngữ lập trình đều sử dụng được regex. Bài này sẽ nói về regex với ngôn ngữ cụ thể là JavaScript.

      Cú pháp chung:
      Mã (Javascript):
      1. /pattern/modifiers
      trong đó:
      • pattern là chuỗi regex
      • modifiers (có thể có hoặc không) là options so khớp, bao gồm:
      [​IMG]
      Ví dụ

      Để tạo một regex trong js thì bạn có thể dùng 2 cách
      • Cách 1: tạo 1 object RegExp
      Mã (Javascript):
      1. const reg = new RegExp('hello', 'i');
      • Cách 2: sử dụng cú pháp //
      Mã (Javascript):
      1. const reg = /hello/i;

      Đây là một ví dụ đơn giản. Biểu thức reg được định nghĩa dùng để tìm kiếm các đoạn văn bản có chứa chuỗi hello, không phân biệt chữ hoa chữ thường. Bạn có thể dùng hàm RegExp.test(String) để kiểm tra xem đoạn văn bản đang xét có chứa reg mà bạn định nghĩa hay không.

      Mã (Javascript):
      1. reg.test('Hello');           // true
      2. reg.test('haiha hello you');   // true
      3.  
      4. reg.test('he');             // false
      5. reg.test('haiha');           // false

      2. Một vài systax cần nhớ

      Brackets


      [​IMG]
      Metacharacters

      [​IMG]
      Quantifiers

      [​IMG]
      Ví dụ

      • Kí hiệu ^, khớp chuỗi bắt đầu bằng hello

      Mã (Javascript):
      1. /^hello/.test('hello');          // true
      2. /^hello/.test('ahihi hello ahihi'); // false
      • Kí hiệu $, khớp chuỗi kết thúc bằng hello

      Mã (Javascript):
      1. /hello$/.test('hey, guy ... hello');     // true
      2. /hello$/.test('hello you');           // false
      • Và khi chúng ta kết hợp ^ và $ chúng ta sẽ có 1 yêu cầu khớp chuỗi chính xác với từ hello:
      Mã (Javascript):
      1. /^hello$/.test('hello'); // true<code class="language-js">
      • Kí hiệu *, dùng để khớp với bất kì kí tự nào xuất hiện 0 lần trở lên ???

      Mã (Javascript):
      1. /^hey.*joe$/.test('hey joe');            // true (khớp dấu cách)
      2. /^hey.*joe$/.test('heyjoe');              // true (khớp với trường hợp 0 có kí tự nào)
      3. /^hey.*joe$/.test('hey how are you joe'); // true (khớp với chuỗi văn bản con)
      4. /^hey.*joe$/.test('hey joe!');          // false (kết thúc chuỗi là `!`)
      • Kí hiệu |, dùng để khớp với 2 hoặc nhiều chuỗi khác nhau

      Mã (Javascript):
      1. /hey|ho/.test('hey'); // true
      2. /hey|ho/.test('ho');  // true
      • Kí hiệu +, so khớp 1 kí tự xuất hiện nhiều hơn 1 lần

      Mã (Text):
      1. /^\d+$/.test('144343'); //true (các chữ số xuất hiện nhiều lần)
      2. /^\d+$/.test('ahihi');  //false (không có chữ số nào trong chuỗi)
      nhưng nếu là *, ta sẽ có true, true nhé

      Mã (Javascript):
      1. /^\d+$/.test('144343'); //true
      2. /^\d+$/.test('ahihi');  //true
      • KÍ hiệu ?, lại so khớp cho kí hiệu không xuất hiện hoặc xuất hiện duy nhất 1 lần
      Mã (Javascript):
      1. /^\d{3}\w?$/.test('123');   // true (chứa 0 chữ cái)
      2. /^\d{3}\w?$/.test('123a');  // true (chứa 1 chữ cái)
      3. /^\d{3}\w?$/.test('123ab'); // false (chứa 2 chữ cái)
      • {n}, khớp chuỗi có kí tự xuất hiện đúng n lần:

      Mã (Javascript):
      1. /^\d{3}$/.test('123');  // true
      2. /^\d{3}$/.test('12');   // false
      3. /^\d{3}$/.test('1234'); // false
      4.  
      5. /^[A-Za-z0-9]{3}$/.test('Abc'); // true
      • {m,n}, cái này thì là xuất hiện từ m đến n lần, không ít hơn m lần và không nhiều quá n lần
      Mã (Javascript):
      1. /^\d{3,5}$/.test('123');    // true
      2. /^\d{3,5}$/.test('1234');   // true
      3. /^\d{3,5}$/.test('12345');  // true
      4. /^\d{3,5}$/.test('123456'); // false
      • Dấu ngoặc tròn (...), để tạo các nhóm kí tự. Bằng cách này bạn có thể quy ước số lần lặp lại của một chuỗi thay vì một kí tự.
      Mã (Javascript):
      1. /^(\d{2})+$/.test('12');   // true
      2. /^(\d{2})+$/.test('123');  // false
      3. /^(\d{2})+$/.test('1234'); // true
      3. Các hàm js regex bạn nên biết

      [​IMG]
      Ví dụ

      • String.match(RegExp) và RegExp.exec(String)
      Hai hàm khớp chuỗi này sẽ trả về mảng (Array) các chuỗi con khớp với mẫu regex. Trường hợp không có chuỗi khớp, hàm sẽ trả về kết quả null

      Mã (Javascript):
      1. '123s'.match(/^(\d{3})(\w+)$/);
      2. //Array [ "123s", "123", "s" ]
      3.  
      4. /^(\d{3})(\w+)$/.exec('123s');
      5. //Array [ "123s", "123", "s" ]
      6.  
      7. 'hey'.match(/(hey|ho)/);
      8. //Array [ "hey", "hey" ]
      9.  
      10. /(hey|ho)/.exec('hey');
      11. //Array [ "hey", "hey" ]
      12.  
      13. /(hey|ho)/.exec('ha!');
      14. //null
      • String.replace(RegExp, closure): Đây là một hàm khá hay ho nè.
      Bình thường bạn có hay dùng String.replace(String s1, String s2)? và truyền vào 2 string để thay thế những đoạn văn bản s1 xuất hiện trong chuỗi bằng đoạn văn bản s2
      Mã (Javascript):
      1. "Hello world!".replace('world', 'you'); //Hello you!
      2. "My dog is a good dog!".replace('dog', 'cat'); //My cat is a good dog!
      nhưng bạn cũng có thể truyền regex để thay thế cácđoạn văn bản có cấu trúc như regex bạn định nghĩa, để thay thế các các đoạn văn bản đó bằng một chuỗi khác.
      Mã (Javascript):
      1. "My dog is a good dog!".replace(/dog/g, 'cat'); //My cat is a good cat!
      hoặc truyền 1 closure để xử lý tại mỗi vị trí có đoạn văn bản cần sửa đổi. Hàm này cho phép bạn kết hợp hàm match() và replace().

      Mã (Javascript):
      1. "Hello, world!".replace(/(\w+), (\w+)!/, (matchedString, first, second) => {
      2.   console.log(first);
      3.   console.log(second);
      4.  
      5.   return `${second.toUpperCase()}: ${first}!!!`
      6. })
      7. //"WORLD: Hello!!!"
       
      Đang tải...

Chia sẻ trang này

Đang tải...