Khắc sâu kiến thức về biểu thức chính quy trong JavaScript

Biểu thức chính quy là công cụ mạnh mẽ giúp xác định mẫu trong chuỗi. Nhiều người gặp khó khăn khi học lại vì thiếu thực hành. Hôm nay chúng ta sẽ ôn lại các khái niệm cốt lõi và ví dụ thực tế.

Mục đích của biểu thức chính quy là tạo quy tắc để máy tính nhận diện dữ liệu theo yêu cầu. Ví dụ như kiểm tra định dạng email, tìm kiếm nội dung, v.v.

Khởi tạo biểu thức chính quy:

 1 var regex = new RegExp("a");  // Sử dụng đối tượng RegExp
 2 var regex = /a/;   // Cách viết ngắn gọn, hiệu suất cao hơn

Các phương thức thường dùng:

1. test(): Kiểm tra chuỗi có phù hợp với mẫu không, trả về boolean.

Ví dụ: Kiểm tra chuỗi có phải toàn số hay không

var chuoi = '374829348791';
var regex = /\D/;      // \D đại diện cho ký tự không phải số
if( regex.test(chuoi) ){   // Nếu có ký tự không phải số
    alert('Không phải toàn số');
}else{
    alert('Toàn số');
}

Các ký tự đặc biệt:

• \s: Khoảng trắng
• \S: Không phải khoảng trắng
• \d: Số
• \D: Không phải số
• \w: Ký tự (chữ cái, số, dấu gạch dưới)
• \W: Không phải ký tự

2. search(): Tìm vị trí đầu tiên phù hợp với mẫu, trả về index.

Ví dụ: Tìm chữ 'b' không phân biệt hoa thường

var chuoi = 'abcdef';
var regex = /B/i;
alert( chuoi.search(regex) ); // 1

3. match(): Trả về mảng các kết quả khớp, null nếu không tìm thấy.

Ví dụ: Lấy tất cả các số trong chuỗi

var chuoi = 'haj123sdk54hask33dkhalsd879';
var regex = /\d+/g;   
alert( chuoi.match(regex) );   // [123, 54, 33, 879]

4. replace(): Thay thế các phần khớp với mẫu.

Ví dụ: Thay thế từ ngữ nhạy cảm

var chuoi = "Tôi yêu Bắc Kinh Thiên An Môn, Thiên An Môn trên mặt trời mọc.";
var regex = /Bắc Kinh|Thiên An Môn/g;  
var ketQua = chuoi.replace(regex, function(match) {
    return '*'.repeat(match.length);
});
alert(ketQua);  // Tôi yêu *****, *** trên mặt trời mọc

Phân nhóm ( ): Tạo nhóm con trong biểu thức

var chuoi = '2013-6-7';
var regex1 = /\d-/g;  // Kết quả: 3-, 6-
var regex2 = /(\d-)/g;   // Kết quả: 2013-, 6-
var regex3 = /(\d+)(-)/g;   // Kết quả: 2013-, 6-

Ví dụ: Thay thế dấu '-' bằng dấu '.'

var chuoi = '2013-6-7';
var regex = /(\d+)(-)/g;
chuoi = chuoi.replace(regex, function($0, $1, $2) {
    return $1 + '.';
});
alert(chuoi);   // 2013.6.7

match() với nhóm con:

var chuoi = 'abc';
var regex = /(a)(b)(c)/;
alert( chuoi.match(regex) );  // [abc, a, b, c]

exec(): Trả về mảng kết quả khớp, hỗ trợ lấy nhóm con.

Ví dụ: Lấy thông tin từ chuỗi

var testStr = "now test001 test002";   
var regex = /test(\d+)/; 
var ketQua = regex.exec(testStr);
alert(ketQua[0]);   // test001
alert(ketQua[1]);  // 001

Mẫu ký tự [ ]: Xác định tập hợp ký tự

var regex = /<[^>]+>/g; //匹配HTML标签
var regex = /<[\w\W]+>/g; //匹配任意内容

Ký tự thoát:

• \s, \S, \d, \D, \w, \W
• .: Bất kỳ ký tự nào
• .: Dấu chấm thực sự
• \b: Giới hạn từ
• \B: Không phải giới hạn từ

Ví dụ: Kiểm tra từ riêng biệt

var chuoi = 'onetwo';
var chuoi2 = "one two";
var regex = /one\b/;
alert( regex.test(chuoi) ); // false
alert( regex.test(chuoi2) );// true  

Hàm lấy phần tử theo class:

function getByClass(parent, className){
    if(parent.getElementsByClassName){ 
        return parent.getElementsByClassName(className);
    }else{
        var arr = [];
        var elements = parent.getElementsByTagName('*');
        var regex = new RegExp('\\b' + className + '\\b');
        for(var i = 0; i < elements.length; i++){
            if(regex.test(elements[i].className)){
                arr.push(elements[i]);
            }
        }
        return arr;
    }    
}

Lặp lại nhóm con: Sử dụng \1, \2...

/ (a) (b) (c) \1/-----匹配 abca
/ (a) (b) (c) \2/------匹配 abcb

Ví dụ: Đếm ký tự lặp nhiều nhất

var chuoi = 'assssjdssskssalsssdkjsssdss';
var mang = chuoi.split('');
chuoi = mang.sort().join('');
var giaTri = '';
var chieuDai = 0;
var regex = /(\w)\1+/g;
chuoi.replace(regex, function($0, $1) {
    if(chieuDai < $0.length){
        chieuDai = $0.length;
        giaTri = $1;
    }
}); 
alert('Ký tự lặp nhiều nhất: '+giaTri+', số lần: '+chieuDai);  // s, 17

Lượng tử: Xác định số lần xuất hiện

• {n,m}: Từ n đến m lần
• {n,}: Ít nhất n lần
• *: Bất kỳ lần nào
• ?: 0 hoặc 1 lần
• +: 1 hoặc nhiều lần
• {n}: Chính xác n lần

Ví dụ: Kiểm tra định dạng số QQ

var regex = /^[1-9]\d{4,11}$/; // Bắt đầu không phải 0, 5-12 chữ số

Ví dụ: Xóa khoảng trắng đầu cuối

function trim(chuoi){
   var regex = /^\s+|\s+$/g; 
  return chuoi.replace(regex, '');
}

Các mẫu kiểm tra thường dùng:

• Họ tên: [\u4e00-\u9fa5]
• Khoảng trắng đầu/cuối: ^\s*|\s*$
• Email: ^\w+@[a-z0-9]+(.[a-z]+){1,3}$
• URL: [a-zA-Z]+://[^\s]*
• Mã bưu chính: [1-9]\d{5}
• CCCD: [1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x

Định nghĩa mẫu:

var regex = {  
email : /^\\w+@\[a-z0-9\]+(\\.\[a-z\]+){1,3}$/,  
so : /\\d+/  
};