JavaScript Regex

Trong hướng dẫn này, bạn sẽ tìm hiểu về biểu thức chính quy JavaScript (Regex) với sự trợ giúp của các ví dụ.

Trong JavaScript, một báo chí Reg ular Ex (RegEx) là một đối tượng mô tả một chuỗi các ký tự được sử dụng để xác định một mẫu tìm kiếm. Ví dụ,

 / a… s $ /

Đoạn mã trên xác định một mẫu RegEx. Mẫu là: chuỗi năm chữ cái bất kỳ bắt đầu bằng a và kết thúc bằng s .

Một mẫu được xác định bằng RegEx có thể được sử dụng để so khớp với một chuỗi.

Biểu hiện Chuỗi Phù hợp?
/^a… s$/ abs Không có trận đấu
alias Trận đấu
abyss Trận đấu
Alias Không có trận đấu
An abacus Không có trận đấu

Tạo RegEx

Có hai cách bạn có thể tạo một biểu thức chính quy trong JavaScript.

  1. Sử dụng cụm từ thông dụng:
    Biểu thức chính quy bao gồm một mẫu nằm giữa các dấu gạch chéo /. Ví dụ, 
     cost regularExp = /abc/;
    Đây, /abc/là một biểu thức chính quy.
  2. Sử dụng RegExp() hàm tạo :
    Bạn cũng có thể tạo một biểu thức chính quy bằng cách gọi RegExp()hàm tạo. Ví dụ, 
     const reguarExp = new RegExp('abc');

Ví dụ,

 const regex = new RegExp(/^a… s$/); console.log(regex.test('alias')); // true

Trong ví dụ trên, chuỗi aliaskhớp với mẫu RegEx /^a… s$/. Ở đây, test()phương thức được sử dụng để kiểm tra xem chuỗi có khớp với mẫu hay không.

Có một số phương pháp khác có sẵn để sử dụng với JavaScript RegEx. Trước khi khám phá chúng, chúng ta hãy tìm hiểu về biểu thức chính quy.

Nếu bạn đã biết những kiến ​​thức cơ bản về RegEx, hãy chuyển đến Phương thức RegEx của JavaScript.

Chỉ định mẫu bằng RegEx

Để chỉ định biểu thức chính quy, ký tự siêu được sử dụng. Trong ví dụ trên ( /^a… s$/), ^và $là siêu ký tự.

MetaCharacters

Metacharacters là các ký tự được công cụ RegEx diễn giải theo một cách đặc biệt. Đây là danh sách các siêu ký tự:

(). $ * +? () () |

() - Dấu ngoặc vuông

Dấu ngoặc vuông chỉ định một tập hợp các ký tự bạn muốn so khớp.

Biểu hiện Chuỗi Phù hợp?
(abc) a 1 trận đấu
ac 2 trận đấu
Hey Jude Không có trận đấu
abc de ca 5 trận đấu

Ở đây, (abc)sẽ phù hợp nếu chuỗi bạn đang cố gắng để phù hợp chứa bất kỳ a, bhoặc c.

Bạn cũng có thể chỉ định một loạt các ký tự bằng cách sử dụng -bên trong dấu ngoặc vuông.

(a-e)giống như (abcde).

(1-4)giống như (1234).

(0-39)giống như (01239).

Bạn có thể bổ sung (đảo ngược) bộ ký tự bằng cách sử dụng ^biểu tượng dấu mũ ở đầu dấu ngoặc vuông.

(^abc)có nghĩa là bất kỳ ký tự nào ngoại trừ ahoặc bhoặc c.

(^0-9) có nghĩa là bất kỳ ký tự không phải chữ số nào.

. - Giai đoạn = Stage

Dấu chấm khớp với bất kỳ ký tự đơn nào (ngoại trừ dòng mới '').

Biểu hiện Chuỗi Phù hợp?
… a Không có trận đấu
ac 1 trận đấu
acd 1 trận đấu
acde 2 trận đấu (chứa 4 ký tự)

^ - Con mũ

Biểu tượng dấu mũ ^được sử dụng để kiểm tra xem một chuỗi có bắt đầu bằng một ký tự nhất định hay không.

Biểu hiện Chuỗi Phù hợp?
^a a 1 trận đấu
abc 1 trận đấu
bac Không có trận đấu
^ab abc 1 trận đấu
acb Không khớp (bắt đầu bằng anhưng không theo sau b)

$ - Đô la

Biểu tượng đô la $được sử dụng để kiểm tra xem một chuỗi có kết thúc bằng một ký tự nhất định hay không.

Biểu hiện Chuỗi Phù hợp?
a$ a 1 trận đấu
formula 1 trận đấu
cab Không có trận đấu

* - Ngôi sao

Biểu tượng ngôi sao *khớp với không hoặc nhiều lần xuất hiện của mẫu còn lại.

Biểu hiện Chuỗi Phù hợp?
ma*n mn 1 trận đấu
man 1 trận đấu
mann 1 trận đấu
main Không phù hợp ( akhông theo sau n)
woman 1 trận đấu

+ - Thêm

The plus symbol + matches one or more occurrences of the pattern left to it.

Expression String Matched?
ma+n mn No match (no a character)
man 1 match
mann 1 match
main No match (a is not followed by n)
woman 1 match

? - Question Mark

The question mark symbol ? matches zero or one occurrence of the pattern left to it.

Expression String Matched?
ma?n mn 1 match
man 1 match
mann No match (more than one n character)
main No match (a is not followed by n)
woman 1 match

() - Braces

Consider this code: (n,m). This means at least n, and at most m repetitions of the pattern left to it.

Expression String Matched?
a(2,3) abc dat No match
abc daat 1 match (at daat)
aabc daaat 2 matches (at aabc and daaat)
aabc daaaat 2 matches (at aabc and daaaat)

Let's try one more example. This RegEx (0-9)(2, 4) matches at least 2 digits but not more than 4 digits.

Expression String Matched?
(0-9)(2,4) ab123csde 1 match (match at ab123csde)
12 and 345673 3 matches (12, 3456, 73)
1 and 2 No match

| - Alternation

Vertical bar | is used for alternation (or operator).

Expression String Matched?
a|b cde No match
ade 1 match (match at ade)
acdbea 3 matches (at acdbea)

Here, a|b match any string that contains either a or b

() - Group

Parentheses () is used to group sub-patterns. For example, (a|b|c)xz match any string that matches either a or b or c followed by xz

Expression String Matched?
(a|b|c)xz ab xz No match
abxz 1 match (match at abxz)
axz cabxz 2 matches (at axzbc cabxz)

- Backslash

Backslash is used to escape various characters including all metacharacters. For example,

$a match if a string contains $ followed by a. Here, $ is not interpreted by a RegEx engine in a special way.

If you are unsure if a character has special meaning or not, you can put in front of it. This makes sure the character is not treated in a special way.

Special Sequences

Special sequences make commonly used patterns easier to write. Here's a list of special sequences:

A - Matches if the specified characters are at the start of a string.

Expression String Matched?
Athe the sun Match
In the sun No match

 - Matches if the specified characters are at the beginning or end of a word.

Expression String Matched?
foo football Match
a football Match
foo a football No match
the foo Match
the afoo test Match
the afootest No match

B - Opposite of . Matches if the specified characters are not at the beginning or end of a word.

Expression String Matched?
Bfoo football No match
a football No match
fooB a football Match
the foo No match
the afoo test No match
the afootest Match

d - Matches any decimal digit. Equivalent to (0-9)

Expression String Matched?
d 12abc3 3 matches (at 12abc3)
JavaScript No match

D - Matches any non-decimal digit. Equivalent to (^0-9)

Expression String Matched?
D 1ab34"50 3 matches (at 1ab34"50)
1345 No match

s - Matches where a string contains any whitespace character. Equivalent to ( fv).

Expression String Matched?
s JavaScript RegEx 1 match
JavaScriptRegEx No match

S - Matches where a string contains any non-whitespace character. Equivalent to (fv).

Expression String Matched?
S a b 2 matches (at a b)
No match

w - Matches any alphanumeric character (digits and alphabets). Equivalent to (a-zA-Z0-9_). By the way, underscore _ is also considered an alphanumeric character.

Expression String Matched?
w 12&": ;c 3 matches (at 12&": ;c)
%"> ! No match

W - Matches any non-alphanumeric character. Equivalent to (^a-zA-Z0-9_)

Expression String Matched?
W 1a2%c 1 match (at 1a2%c)
JavaScript No match

 - Matches if the specified characters are at the end of a string.

Expression String Matched?
JavaScript I like JavaScript 1 match
I like JavaScript Programming No match
JavaScript is fun No match

Tip: To build and test regular expressions, you can use RegEx tester tools such as regex101. This tool not only helps you in creating regular expressions, but it also helps you learn it.

Now you understand the basics of RegEx, let's discuss how to use RegEx in your JavaScript code.

JavaScript Regular Expression Methods

As mentioned above, you can either use RegExp() or regular expression literal to create a RegEx in JavaScript.

 const regex1 = /^ab/; const regex2 = new Regexp('/^ab/');

In JavaScript, you can use regular expressions with RegExp() methods: test() and exec().

There are also some string methods that allow you to pass RegEx as its parameter. They are: match(), replace(), search(), and split().

Method Description
exec() Executes a search for a match in a string and returns an array of information. It returns null on a mismatch.
test() Tests for a match in a string and returns true or false.
match() Returns an array containing all the matches. It returns null on a mismatch.
matchAll() Returns an iterator containing all of the matches.
search() Tests for a match in a string and returns the index of the match. It returns -1 if the search fails.
replace() Tìm kiếm kết quả phù hợp trong một chuỗi và thay thế chuỗi con đã khớp bằng một chuỗi con thay thế.
split() Ngắt một chuỗi thành một mảng các chuỗi con.

Ví dụ 1: Biểu thức chính quy

 const string = 'Find me'; const pattern = /me/; // search if the pattern is in string variable const result1 = string.search(pattern); console.log(result1); // 5 // replace the character with another character const string1 = 'Find me'; string1.replace(pattern, 'found you'); // Find found you // splitting strings into array elements const regex1 = /(s,)+/; const result2 = 'Hello world! '.split(regex1); console.log(result2); // ("I", "am", "learning", "JavaScript", "RegEx") // searching the phone number pattern const regex2 = /(d(3))D(d(3))-(d(4))/g; const result3 = regex2.exec('My phone number is: 555 123-4567.'); console.log(result3); // ("555 123-4567", "555", "123", "4567")

Cờ biểu thức chính quy

Cờ được sử dụng với các cụm từ thông dụng cho phép các tùy chọn khác nhau như tìm kiếm toàn cục, tìm kiếm không phân biệt chữ hoa chữ thường, v.v. Chúng có thể được sử dụng riêng biệt hoặc cùng nhau.

Cờ Sự miêu tả
g Thực hiện đối sánh toàn cầu (tìm tất cả các kết quả phù hợp)
m Thực hiện đối sánh nhiều dòng
i Thực hiện đối sánh không phân biệt chữ hoa chữ thường

Ví dụ 2: Công cụ sửa đổi biểu thức chính quy

 const string = 'Hello hello hello'; // performing a replacement const result1 = string.replace(/hello/, 'world'); console.log(result1); // Hello world hello // performing global replacement const result2 = string.replace(/hello/g, 'world'); console.log(result2); // Hello world world // performing case-insensitive replacement const result3 = string.replace(/hello/i, 'world'); console.log(result3); // world hello hello // performing global case-insensitive replacement const result4 = string.replace(/hello/gi, 'world'); console.log(result4); // world world world

Ví dụ 3: Xác thực số điện thoại

 // program to validate the phone number function validatePhone(num) ( // regex pattern for phone number const re = /^(?((0-9)(3)))?(-. )?((0-9)(3))(-. )?((0-9)(4))$/g; // check if the phone number is valid let result = num.match(re); if (result) ( console.log('The number is valid.'); ) else ( let num = prompt('Enter number in XXX-XXX-XXXX format:'); validatePhone(num); ) ) // take input let number = prompt('Enter a number XXX-XXX-XXXX'); validatePhone(number);

Đầu ra

 Nhập số XXX-XXX-XXXX: 2343223432 Nhập số ở định dạng XXX-XXX-XXXX: 234-322-3432 Số hợp lệ

Ví dụ 4: Xác thực địa chỉ email

 // program to validate the email address function validateEmail(email) ( // regex pattern for email const re = /S+@S+.S+/g; // check if the email is valid let result = re.test(email); if (result) ( console.log('The email is valid.'); ) else ( let newEmail = prompt('Enter a valid email:'); validateEmail(newEmail); ) ) // take input let email = prompt('Enter an email: '); validateEmail(email);

Đầu ra

 Nhập email: hellohello Nhập email hợp lệ: [email protected] Email hợp lệ.

thú vị bài viết...