-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (143 loc) · 9.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Regular Expression Tutorial" />
<meta name="author" content="Pham Ngoc Vinh" />
<title>Regex 101</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/icon.svg" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="./index.html">Regex 101</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="./index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./pages/quick-start.html">Quick Start</a></li>
<li class="nav-item"><a class="nav-link" href="./pages/tutorial.html">Tutorial</a></li>
<li class="nav-item"><a class="nav-link" href="./pages/examples.html">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="./pages/about.html">About</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page content-->
<div class="container mt-5">
<div class="row">
<!-- Side widgets-->
<div class="col-lg-3">
<!-- Categories widget-->
<div class="card mb-4">
<div class="card-header">Contents</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6 full-width">
<ul class="list-unstyled mb-0">
<li><a href="#introduce">Giới thiệu Regex</a></li>
<li><a href="#quick-start">Tham khảo nhanh</a></li>
<li><a href="#tutorial">Huớng dẫn hoàn chỉnh</a></li>
<li><a href="#for-everyone">Regex cho mọi nguời</a></li>
<li><a href="#examples">Mẫu câu Regex</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<!-- Post content-->
<article>
<!-- Post header-->
<header class="mb-4">
<!-- Post title-->
<a id="introduce">
<h1 class="fw-bolder mb-1">Chào mừng các bạn đến với Regex 101!</h1>
</a>
</header>
<!-- Preview image figure-->
<figure class="mb-4"><img class="img-fluid rounded"
src="https://dummyimage.com/900x400/3B4252/eceff4.jpg&text=Regular+Expression" alt="..." />
</figure>
<!-- Post content-->
<section class="mb-5">
<p class="fs-5 mb-4">Regular Expression (Biểu Thức Chính Quy) hay gọi tắt là Regex, là một chuỗi
kí tự đặc biệt dùng để mô tả một quy tắc tìm kiếm. Nếu bạn từng biết đến wildcard như là
<mark class="orange">*.txt</mark> để tìm kiếm tất cả file text, thì tuơng ứng với đó ở regex
sẽ là <mark class="blue">^.*\.txt$</mark>.
</p>
<p class="fs-5 mb-4">Bạn có thể ứng dụng regular expression với nhiều mục đích khác. Ví dụ bạn
có thể sử dụng biểu thức <mark class="blue">^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$</mark>
để tìm kiếm hoặc xác thực
bất kì địa chỉ email nào mà nguời dùng nhập vào có chính xác hay không. Bạn cũng có thể sử
dụng
regex vào phần mềm <a href="https://phamngocvinh.github.io/automatic-engine/"
target="_blank">Automatic Engine</a> để đổi tên hàng loạt file theo ý muốn. Regex có thể
đuợc
sử dụng trong nhiều ngôn ngữ khác nhau như Perl, PHP, Java, .NET và nhiều hơn nữa.</p>
<a id="quick-start">
<h2 class="fw-bolder mb-4 mt-5">Regex
Quick Start</h2>
</a>
<p class="fs-5 mb-4">Nếu muốn sử dụng ngay regex, bạn có thể tham khảo <a
href="./pages/quick-start.html">Trang tóm tắt
nhanh regex</a>. Ở đó sẽ khái
quát nhanh những khái niệm regex cần biết để bạn có thể viết một câu biểu thức regex đơn
giản, nhưng ở đó sẽ không có những thông tin chi tiết để bạn có thể thành thạo về regex.</p>
<p class="fs-5 mb-4">Ở mỗi phần của trang tóm tắt này đều sẽ có link trực tiếp đến trang chi
tiết của phần đó trong
truờng hợp bạn muốn tham khảo chi tiết hơn.</p>
<a id="tutorial">
<h2 class="fw-bolder mb-4 mt-5">Huớng dẫn Regex
hoàn chỉnh
</h2>
</a>
<p class="fs-5 mb-4">Nếu bạn không thể hiểu câu biểu thức ở trên là gì thì cũng đừng lo lắng.
Bất kì câu regex nào cũng sẽ khó hiểu với những nguời mới bắt đầu. Nhưng chỉ cần một ít cố
gắng và luyện tập bạn sẽ tự tin viết thành thục câu regex cho riêng mình. <a
href="./pages/tutorial.html">Trang
huớng dẫn
Regex hoàn chỉnh</a> sẽ giúp bạn đi qua từng giai đoạn từ cơ bản đến nâng cao.</p>
<a id="for-everyone">
<h2 class="fw-bolder mb-4 mt-5"><u>Không chỉ cho lập trình viên</u>
</h2>
</a>
<p class="fs-5 mb-4">Nếu bạn không phải là lập trình viên, bạn vẫn có thể sử dụng regex trong
nhiều tình huống khác nhau. Regex giúp bạn tìm kiếm thông tin dễ dàng hơn nhiều. Bạn có thể
sử dụng <a href="https://phamngocvinh.github.io/automatic-engine/" target="_blank">Automatic
Engine</a> để đổi tên hàng loại file cùng một lúc với chỉ 1 câu biểu thức
regex. Bạn có thể tìm kiếm thông tin trong một file tài liệu kể cả khi bạn không biết chính
xác về thông tin đó.</p>
<a id="examples">
<h2 class="fw-bolder mb-4 mt-5"><u>Những mẫu câu Regex</u>
</h2>
</a>
<p class="fs-5 mb-4">Trường hợp bạn chưa muốn học nhưng vẫn muốn sử dụng Regex thì ở trang <a
href="./pages/examples.html">Mẫu câu Regex</a> sẽ có những câu Regex thường hay được sử
dụng. Những mẫu câu này còn có thể giúp bạn tiết kiệm thời gian khi viết biểu thức Regex
mới, bạn chỉ cần copy và chỉnh sửa lại theo nhu cầu sử dụng của mình.</p>
</section>
</article>
</div>
</div>
</div>
<!-- Footer-->
<footer class="py-3 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Regex 101 by <a href="https://github.com/phamngocvinh"
target="_blank">Pham Ngoc Vinh</a></p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>