---------
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]
-----------
Xem thêm:
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (23) - Căn bản JavaScript (6)_Global_OOP
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (23) - Căn bản JavaScript (6)_Global_OOP