Ngu ngơ học làm web (22) - Căn bản JavaScript (5)_Regexp

tiếp theo của: Ngu ngơ học làm web (21) - Căn bản JavaScript (4)_Math_Boolean_Date
---------

Phần 22.       Căn bản JavaScript (5)_Regexp

Clip 37, 38, 39. Biểu thức chính quy


Biểu thức chính quy (tiếng Anh: regular expression, viết tắt là regexp, regex, hay regxp) là một chuỗi miêu tả một bộ (hoặc một mẫu) các chuỗi khác, theo những quy tắc cú pháp nhất định. Để tiện trình bày sẽ gọi tắt là RE.

Hoặc nói ngắn gọn: biểu thức chính quy là các mẫu dùng để tìm kiếm các bộ kí tự được kết hợp với nhau trong các chuỗi kí tự.

Đọc thêm về biểu thức chính quy tại đây: 


Một bộ (hoặc một mẫu) là các chuỗi văn bản tuân theo một quy tắc chung. Ví dụ: mẫu gmail sẽ là *@gmail.com; mẫu tập tin pdf là *.pdf; mẫu ngày tháng là dd/mm/yyyy.

Trong xử lý chuỗi, nếu áp dụng RE sẽ giúp việc lập trình đơn giản và ngắn gọn hơn.

Các tình huống thường sử dụng RE:

– Kiểm tra tính hợp lệ của dữ liệu khi người dùng nhập vào form

– Bóc tách thông tin văn bản, thay đổi nội dung, loại bỏ kí tự

Để học về RE cần tải phần mềm (ví dụ: Rad Software Regular Expression Designer) hoặc sử dụng các trang web (ví dụ: https://regex101.com/) có chức năng xử lý một biểu thức chính quy.

Biểu thức chính quy được đặt trong cặp dấu //.

Các kí tự đặc biệt trong biểu thức chính quy

Kí tự (kí hiệu/cờ)
Ý nghĩa
\
Tìm với luật dưới đây. Chuyển kí tự đặc biệt thành kí tự thường và chuyển một kí tự thường thành đặc biệt. Ví dụ: \w khớp với chữ, số và _; \$ khớp với kí tự $
^
Khớp các kí tự đứng đầu một chuỗi. Tuy nhiên, ý nghĩa của ‘^’ sẽ thay đổi khi nó xuất hiện như một kí tự đầu tiên trong lớp kí tự, ví dụ [^abc] là lớp kí tự phủ định.
$
Khớp ở cuối chuỗi. Nếu có cờ đa dòng (multiline), nó sẽ khớp ngay trước kí tự xuống dòng.
.
Khớp với mọi kí tự đơn, trừ kí tự xuống dòng
[abc]
Lớp kí tự. Dùng để so khớp với một kí tự bất kì trong dấu ngoặc vuông. Có thể sử dụng dấu gạch nối (-) để thay cho một dãy kí tự liên tục, ví dụ mẫu [abcd] tương đương [a-d].
[^abc]
Phủ định lớp kí tự. Dùng để khớp với mọi kí tự khác “a”, “b”, và “c”.
(ab|ac)
Khớp với chuỗi “ab” hoặc “ac”.
*
Kí hiệu phía trước “*” xuất hiện không hoặc nhiều lần
+
Kí hiệu phía trước “+” xuất hiện một hoặc nhiều lần
?
Kí hiệu phía trước “?” xuất hiện không hoặc một lần
{n}
Kí hiệu đứng trước phải xuất hiện “n” lần
{n,m}
Kí hiệu đứng trước phải xuất hiện từ “n” đến “m” lần, n <= m.
\w
Khớp với mọi kí tự, kí số và _, tương đương [a-zA-Z0-9_]
\W
Khớp với mọi kí tự không phải là chữ (phủ định của \w)
\s
Khớp với một kí tự khoảng trắng (space, tab, phân trang, phân dòng)
\S
Khớp với một kí tự không phải khoảng trắng

Clip 35. Cờ (modifiers)


Cờ (modifiers) của biểu thức chính quy: được sử dụng để kết hợp với biểu thức chính quy trong quá trình so khớp.

Cờ (modifiers)
Mô tả
g
(global) tìm kiếm toàn bộ (mặc định chỉ trả về kết quả khớp đầu tiên)
i
(insensitive) tìm kiếm không phân biệt hoa thường
m
(multi line) tìm đa dòng

Clip 36. Thuộc tính và phương thức của đối tượng Regexp.


Sử dụng các thuộc tính: global, insensitive, lastIndex, multiline, source để kiểm tra các giá trị của cờ và nội dung của pattern (source).

Một số phương thức sử dụng biểu thức chính quy:

Phương thức
Mô tả
Exec
Tìm chuỗi khớp với mẫu (trả về mảng khớp)
Test
Kiểm tra xem chuỗi có khớp với mẫu không
Match
Tìm chuỗi khớp với mẫu (trả về mảng khớp)
Search
Tìm chuỗi khớp với mẫu (trả về vị trí của chuỗi khớp)
Replace
Tìm và thay thế chuỗi khớp với mẫu
Split
Tách chuỗi thành mảng các chuỗi con dựa theo mẫu

Clip 40. Bài tập về Regexp.


Bài 1. Loạt bỏ các khoảng trắng thừa trong một chuỗi bằng regexp.

Ví dụ chuỗi nhập vào là “      học         JavaScript      ” xuất ra chuỗi “học JavaScript”.

Mã nguồn tham khảo:

<script>
        let str = "    hoc      JavaScript     ";
        function xoaTrai(string) {
            string = string.replace(/^\s+/img,"");
            return string;
        }
        function xoaPhai(string) {
            string = string.replace(/\s+$/img,"");
            return string;
        }
        function xoaGiua(string) {
            string = string.replace(/\s+/img," ");
            return string;
        }
        console.log("Chuoi nhap:" + str);
        str = xoaTrai(str);
        console.log("Xoa trai:" + str);
        str =  xoaPhai(str);
        console.log("Xoa phai:" + str);
        str =  xoaGiua(str);
        console.log("Xoa giua:" + str);
    </script>

Bài 2. Nhập họ tên người dùng. Tách thành họ, tên lót và tên.

Mã nguồn tham khảo :

    <style>
        #container { width: 300px; height: 300px;margin: 0 auto;border: 2px solid #D8D8D8;           padding: 10px;
        }
    </style>
</head>
<body>

    <div id="container">
        <input type="text" id="fullname">
        <input type="button" value="Tách" onclick="tach();" >
        <div id="ketqua"></div>
    </div>
 
    <script>
        String.prototype.tachTen = function() {
            let result = [];
            let firstSpace = this.indexOf(" ");
            let lastSpace = this.lastIndexOf(" ");
            // Tên nhiều hơn 2 chữ
            if (firstSpace > 0 && lastSpace > 0 && lastSpace > firstSpace) {
                result[0] = this.slice(0, firstSpace);
                result[1] = this.slice(firstSpace + 1, lastSpace);
                result[2] = this.slice(lastSpace + 1);
            } else if (firstSpace > 0 && lastSpace > 0 && lastSpace == firstSpace) { // tên gồm 2 chữ
                result[0] = this.slice(0, firstSpace);
                result[1] = this.slice(firstSpace + 1);
            } else { // tên gồm 1 chữ
                result[0] = this;
            }
            return result;
        }
        function tach() {
            let fullname = new String();
            let xhtml;
            fullname = document.getElementById("fullname").value;
            let result = fullname.tachTen();
            if (result.length > 0) {
                if (result.length == 1) {
                    xhtml = "<p>Tên: " + result[0] + "</p>";   
                }
                if (result.length == 2) {
                    xhtml = "<p>Họ: " + result[0] + "</p>";
                    xhtml += "<p>Tên: " + result[1] + "</p>";   
                }
                if (result.length == 3) {
                    xhtml = "<p>Họ: " + result[0] + "</p>";
                    xhtml += "<p>Tên lót: " + result[1] + "</p>";
                    xhtml += "<p>Tên: " + result[2] + "</p>";   
                }
            } else {
                xhtml = "<p>Dữ liệu không hợp lệ!</p>";
            }
            document.getElementById("ketqua").innerHTML = xhtml;
        }
    </script>
</body>  

Bài 3. Nhúng liên kết cho văn bản.

Mã nguồn tham khảo:

<p id="text">Đây là trang w3schools</p>
    <script>
        let pattern = /w3schools/img;
        let str = document.getElementById("text").innerHTML;
        str = str.replace(pattern, '<a href="http://www.w3schools.com">w3schools</a>');
        document.getElementById("text").innerHTML = str;
    </script>

Bài 4. Kiểm tra một email có hợp lệ hay không?

Mã nguồn tham khảo:

<script>
        let email = "nvteo@gmail.com";
        let pattern = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/i;
        if (pattern.test(email) == true) {
            console.log("Email hợp lệ!");
        } else {
            console.log("Email không hợp lệ!");
        }

    </script>

-----------
Cập nhật [3/9/2020]
-----------