Hướng dẫn nhanh và đơn giản về Biểu thức chính quy JavaScript

Quan tâm đến việc học JavaScript? Nhận ebook miễn phí của tôi tại jshandbook.com

Giới thiệu về biểu thức chính quy

Một biểu thức chính quy (còn gọi là regex viết tắt) là một cách nhanh chóng để làm việc với các chuỗi văn bản.

Bằng cách tạo biểu thức chính quy với một cú pháp đặc biệt, bạn có thể:

  • tìm kiếm văn bản trong một chuỗi
  • thay thế chuỗi con trong một chuỗi
  • và trích xuất thông tin từ một chuỗi

Hầu như mọi ngôn ngữ lập trình đều có một số cách thực hiện các biểu thức chính quy. Có sự khác biệt nhỏ giữa mỗi lần thực hiện, nhưng các khái niệm chung áp dụng hầu hết mọi nơi.

Biểu thức chính quy có từ những năm 1950, khi chúng được chính thức hóa như một mẫu tìm kiếm khái niệm cho các thuật toán xử lý chuỗi.

Được triển khai trong các công cụ UNIX như grep, sed và trong các trình soạn thảo văn bản phổ biến, regexes đã trở nên phổ biến. Chúng được đưa vào ngôn ngữ lập trình Perl, và sau đó vào nhiều ngôn ngữ khác.

JavaScript, cùng với Perl, là một trong những ngôn ngữ lập trình có hỗ trợ cho các biểu thức chính quy được tích hợp trực tiếp vào ngôn ngữ.

Khó nhưng hữu ích

Các biểu thức thông thường có vẻ như vô nghĩa đối với người mới bắt đầu và nhiều lần đối với nhà phát triển chuyên nghiệp, nếu bạn không đầu tư thời gian cần thiết để hiểu chúng.

Các biểu thức chính quy khó hiểu là khó viết, khó đọc và khó duy trì / sửa đổi.

Nhưng đôi khi một biểu thức chính quy là cách duy nhất để thực hiện một số thao tác chuỗi, do đó, nó là một công cụ rất có giá trị trong túi của bạn.

Hướng dẫn này nhằm giới thiệu cho bạn về Biểu thức chính quy JavaScript một cách đơn giản và cung cấp cho bạn tất cả thông tin để đọc và tạo biểu thức chính quy.

Nguyên tắc chung là các biểu thức chính quy đơn giản rất đơn giản để đọc và viết, trong khi các biểu thức chính quy phức tạp có thể nhanh chóng biến thành một mớ hỗn độn nếu bạn không nắm bắt sâu sắc những điều cơ bản.

Biểu thức chính quy trông như thế nào?

Trong JavaScript, một biểu thức chính quy là một đối tượng, có thể được định nghĩa theo hai cách.

Đầu tiên là bằng cách khởi tạo một đối tượng RegExp mới bằng cách sử dụng hàm tạo:

const re1 = RegExp mới ('hey')

Thứ hai là sử dụng dạng biểu thức chính quy:

const re1 = / hey /

Bạn biết rằng JavaScript có các đối tượng bằng chữ và mảng bằng chữ? Nó cũng có regex nghĩa đen.

Trong ví dụ trên, hey được gọi là mẫu. Ở dạng chữ, nó được phân định bởi các dấu gạch chéo về phía trước, trong khi với hàm tạo đối tượng, nó không có.

Đây là sự khác biệt quan trọng đầu tiên giữa hai hình thức, nhưng chúng tôi sẽ gặp những người khác sau.

Làm thế nào nó hoạt động?

Biểu thức chính quy chúng tôi định nghĩa là re1 ở trên là một biểu thức rất đơn giản. Nó tìm kiếm chuỗi hey, mà không có bất kỳ giới hạn. Chuỗi có thể chứa nhiều văn bản, và hey ở giữa, và regex được thỏa mãn. Nó cũng có thể chứa chỉ hey, và regex cũng sẽ được thỏa mãn.

Điều đó khá đơn giản.

Bạn có thể kiểm tra regex bằng RegExp.test (String), trả về boolean:

re1.test ('hey') //
re1.test ('blablabla hey blablabla') //
re1.test ('anh ấy') //
re1.test ('blablabla') //

Trong ví dụ trên, chúng tôi chỉ kiểm tra xem "hey" có thỏa mãn mẫu biểu thức chính quy được lưu trữ trong re1 không.

Đây là cách đơn giản nhất có thể, nhưng bây giờ bạn đã biết rất nhiều khái niệm về regexes.

Neo

/Chào/

phù hợp với bất cứ nơi nào nó được đặt trong chuỗi.

Nếu bạn muốn khớp các chuỗi bắt đầu bằng hey, hãy sử dụng toán tử ^:

/ ^ ney /.test ('' '' '
/ ^ ney /.test ('bla hey') // 

Nếu bạn muốn khớp các chuỗi kết thúc bằng hey, hãy sử dụng toán tử $:

/hey$/.test('hey ') // 
/hey$/.test('bla hey ') // 
/hey$/.test('hey you ') // 

Kết hợp các chuỗi đó và khớp các chuỗi khớp chính xác với hey và chuỗi đó:

/ ^ ney$ /.test ('hey') // 

Để khớp với một chuỗi bắt đầu bằng một chuỗi con và kết thúc bằng một chuỗi khác, bạn có thể sử dụng. *, Khớp với bất kỳ ký tự nào được lặp lại 0 lần trở lên:

/ ^ hey.*joe$/.test('hey joe ') //
/ ^ ney.*joe$ /.test ('heyjoe') //
/ ^ hey.*joe$/.test('hey bạn có khỏe không ') //
/ ^ ney.*joe$ /.test ('jey joe!') //

Kết hợp các mục trong phạm vi

Thay vì khớp một chuỗi cụ thể, bạn có thể chọn khớp bất kỳ ký tự nào trong một phạm vi, như:

/ [a-z] / // a, b, c, ..., x, y, z
/ [A-Z] / // A, B, C, ..., X, Y, Z
/ [a-c] / // a, b, c
/ [0-9] / // 0, 1, 2, 3, ..., 8, 9

Các biểu thức chính này khớp với các chuỗi chứa ít nhất một trong các ký tự trong các phạm vi đó:

/[a-z[/.test('a ') // 
/[a-z[/.test('1 ') // 
/[a-z[/.test('A ') // 
/[a-c[/.test('d ') // 
/[a-c[/.test('dc ') // 

Phạm vi có thể được kết hợp:

/ [A-Za-z0-9] /
/[A-Za-z0-9THER/.test('a ') // 
/[A-Za-z0-9THER/.test('1 ') //
/[A-Za-z0-9THER/.test('A ') // 

Phù hợp với một mục phạm vi nhiều lần

Bạn có thể kiểm tra xem một chuỗi có chứa một và chỉ một ký tự trong một phạm vi hay không bằng cách sử dụng - char:

/ ^ [A-Za-z0-9] $ /
/ ^ [A-Za-z0-9 [$ / .test ('') //
/ ^ [A-Za-z0-9 [$ / .test ('A') //

Phủ định một mô hình

Ký tự ^ ở đầu một mẫu neo nó vào đầu chuỗi.

Được sử dụng trong một phạm vi, nó phủ nhận nó, vì vậy:

/ [^ ^ A-Za-z0-9THER /.test ('a') // 
/ [^ ^ A-Za-z0-9THER / .test ('1') //
/ [^ ^ A-Za-z0-9THER / .test ('') //
/ [^ ^ A-Za-z0-9THER /.test ('@ ') //
  • \ d khớp với bất kỳ chữ số nào, tương đương với [0-9]
  • \ D khớp với bất kỳ ký tự nào mà không phải là chữ số, tương đương với [^ 0-9]
  • \ w khớp với bất kỳ ký tự chữ và số nào, tương đương với [A-Za-z0-9]
  • \ W khớp với bất kỳ ký tự không chữ và số nào, tương đương với [^ A-Za-z0-9]
  • \ s khớp với bất kỳ ký tự khoảng trắng nào: khoảng trắng, tab, dòng mới và khoảng trắng Unicode
  • \ S phù hợp với bất kỳ nhân vật nào mà không phải là khoảng trắng
  • \ 0 khớp với null
  • \ n khớp với một ký tự dòng mới
  • \ t khớp với một ký tự tab
  • \ uXXXX khớp với một ký tự unicode có mã XXXX (yêu cầu cờ u)
  • . khớp với bất kỳ ký tự nào không phải là char mới (ví dụ: \ n) (trừ khi bạn sử dụng cờ s, được giải thích sau)
  • [^] phù hợp với bất kỳ ký tự nào, kể cả các ký tự dòng mới. Nó rất hữu ích trên các chuỗi đa dòng.

Lựa chọn biểu thức chính quy

Nếu bạn muốn tìm kiếm một chuỗi hoặc một chuỗi khác, sử dụng | nhà điều hành.

/hey|ho/.test('hey ') // 
/hey|ho/.test('ho ') // 

Bộ định lượng

Giả sử bạn có biểu thức chính này để kiểm tra xem một chuỗi có một chữ số trong đó không và không có gì khác:

/ ^ \ d $ /

Bạn có thể dùng ? bộ định lượng để làm cho nó tùy chọn, do đó yêu cầu không hoặc một:

/ ^ \ d? $ /

Nhưng nếu bạn muốn khớp nhiều chữ số thì sao?

Bạn có thể làm theo 4 cách, sử dụng +, *, {n} và {n, m}. Hãy cùng xem xét từng cái một.

+

Khớp một hoặc nhiều (> = 1) mục

/ ^ \ d + $ /
/ ^ \ d +$ /.test ('12') // 
/ ^ \ d +$ /.test ('14') // 
/ ^ \ d +$ /.test ('14244') // 
/ ^ \ d + $ /. test ('') // 
/ ^ \ d +$ /.test ('1a') // 

*

Khớp 0 hoặc nhiều hơn (> = 0) mục

/ ^ \ d + $ /
/ ^ \ \ * * / .test ('12 ') // 
/ ^ \ \ * * / .test ('14') // 
/ ^ \ \ * * / .test ('144343 ') // 
/ ^ \ d * $ /. test ('') // 
/ ^ \ \ * * / .test ('1a ') // 

{viết sai rồi}

Khớp chính xác n mục

/ ^ \ d {3} $ /
/ ^ \ n / 33$$ /.test ('123') // 
/ ^ \ nd33$$/.test('12 ') // 
/ ^ \ nd33$$/.test('1234 ') // 
/ ^ [[A-Za-z0-9 [BA3spl$ /.test ('bc') // 

{n, m}

Khớp giữa n và m lần:

/ ^ \ d {3,5} $ /
/ ^ \ n / 3/3 Bolog$ /.test ('123') // 
/ ^ \ n / 3/3 Bolog$ /.test ('1234') //
/ ^ \ n / 3/3 Bolog$ /.test ('12345') //
/ ^ \ n / 3/3 Bolog$ /.test ('123456') //

m có thể được bỏ qua để có một kết thúc mở, vì vậy bạn có ít nhất n mục:

/ ^ \ d {3,} $ /
/ ^ \ n / 3, Bolog$ /.test ('12') // 
/ ^ \ n / 3, Bolog$ /.test ('123') // 
/ ^ \ n / 3, Bolog$ /.test ('12345') // 
/ ^ \ n / 3, Bolog$ /.test ('123456789') // 

Các mặt hàng tùy chọn

Theo dõi một mục với? làm cho nó tùy chọn:

/ ^ \ d {3} \ w? $ /
/ ^ \ nd33\\w ?$/.test('123 ') // 
/ ^ \ nd33\\w ?$/.test('123a ') // 
/ ^ \ nd33\\w?$/.test('123ab ') // 

Các nhóm

Sử dụng dấu ngoặc đơn, bạn có thể tạo các nhóm ký tự: (...)

Ví dụ này khớp chính xác 3 chữ số theo sau bởi một hoặc nhiều ký tự chữ và số:

/ ^ (\ d {3}) (\ w +) $ /
/ ^ ^ / nd33spl)(\w+)$/.test('123 ') // 
/ ^ ^ / nd33spl)(\w+)$/.test('123s ') // 
/ ^ ^ / nd33spl)(\w+)$/.test('123s Something ') // 
/ ^ ^ / nd33spl)(\w+)$/.test('1234 ') // 

Các ký tự lặp lại được đặt sau một dấu ngoặc đơn đóng nhóm tham chiếu đến toàn bộ nhóm:

/ ^ (\ d {2}) + $ /
/ ^ (\ d / 2 Bolog) + $ / test ('12') //
/ ^ (\ d / 2spl)+$ /.test ('123') //
/ ^ (\ d / 2spl) + $ / test ('1234') //

Nhóm bắt

Cho đến nay, chúng tôi đã thấy cách kiểm tra các chuỗi và kiểm tra xem chúng có chứa một mẫu nhất định không.

Một tính năng rất hay của các biểu thức thông thường là khả năng chụp các phần của chuỗi và đặt chúng vào một mảng.

Bạn có thể làm như vậy bằng cách sử dụng Nhóm và cụ thể là Chụp nhóm.

Theo mặc định, Nhóm là Nhóm Chụp. Bây giờ, thay vì sử dụng RegExp.test (String), chỉ trả về boolean nếu mẫu được thỏa mãn, chúng tôi sử dụng String.match (RegExp) hoặc RegExp.exec (String).

Chúng giống hệt nhau và trả về một Mảng với toàn bộ chuỗi khớp trong mục đầu tiên, sau đó từng nội dung nhóm phù hợp.

Nếu không có kết quả khớp, nó trả về null:

'123s'.match (/ ^ (\ d {3}) (\ w +) $ /)
// Mảng ["123s", "123", "s"]
/ ^ ^ / nd33spl)(\w+)$/.exec('123s ')
// Mảng ["123s", "123", "s"]
'hey'.match (/ (hey | ho) /)
// Mảng ["hey", "hey"]
/(hey|ho)/.exec('hey ')
// Mảng ["hey", "hey"]
/(hey|ho)/.exec('ha! ')
//vô giá trị

Khi một nhóm được khớp nhiều lần, chỉ có trận đấu cuối cùng được đưa vào mảng kết quả:

'123456789'.match (/ (\ d) + /)
// Mảng ["123456789", "9"]

Nhóm tùy chọn

Một nhóm chụp có thể được tạo tùy chọn bằng cách sử dụng (...)?. Nếu không tìm thấy nó, thì mảng mảng kết quả sẽ chứa không xác định:

/ ^ ^ / nd33spl)(\s)?(\w+)$/.exec('123 s ')
// Mảng ["123 s", "123", "", "s"]
/ ^ ^ / nd
// Mảng ["123s", "123", không xác định, "s"]

Tham khảo nhóm phù hợp

Mỗi nhóm mà phù hợp với nhau được gán một số. $ 1 đề cập đến cái đầu tiên, $ 2 đến cái thứ hai, v.v. Điều này sẽ hữu ích khi chúng ta nói về việc thay thế các phần của chuỗi.

Các nhóm bắt giữ được đặt tên

Đây là một tính năng ES2018 mới.

Một nhóm có thể được gán cho một tên, thay vì chỉ được gán một vị trí trong mảng kết quả:

const re = / (?  \ d {4}) - (?  \ d {2}) - (?  \ d {2}) /
const result = re.exec ('2015-01 / 02')
// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';

Sử dụng kết hợp và thực thi mà không có nhóm

Có một sự khác biệt giữa việc sử dụng khớp và thực thi mà không có nhóm: mục đầu tiên trong mảng không phải là toàn bộ chuỗi khớp, mà là khớp trực tiếp:

/hey|ho/.exec('hey ')
// [ "Chào" ]
/(hey).(ho)/.exec('hey ho ')
// ["hey ho", "hey", "ho"]

Các nhóm không tẩy chay

Vì theo nhóm mặc định là Nhóm bắt, bạn cần một cách để bỏ qua một số nhóm trong mảng kết quả. Điều này có thể sử dụng Nhóm Không tẩy rửa, bắt đầu bằng (?: ...)

'123s'.match (/ ^ (\ d {3}) (?: \ S) (\ w +) $ /)
//vô giá trị
'123 s'.match (/ ^ (\ d {3}) (?: \ S) (\ w +) $ /)
// Mảng ["123 s", "123", "s"]

Cờ

Bạn có thể sử dụng các cờ sau trên bất kỳ biểu thức chính quy nào:

  • g: khớp với mẫu nhiều lần
  • i: làm cho trường hợp regex không nhạy cảm
  • m: cho phép chế độ đa dòng. Trong chế độ này, ^ và $ khớp với điểm bắt đầu và kết thúc của toàn bộ chuỗi. Không có điều này, với các chuỗi nhiều dòng, chúng khớp với đầu và cuối của mỗi dòng.
  • u: cho phép hỗ trợ cho unicode (được giới thiệu trong ES6 / ES2015)
  • s: (mới trong ES2018) viết tắt của một dòng, nó gây ra. để phù hợp với các nhân vật dòng mới là tốt.

Cờ có thể được kết hợp và chúng được thêm vào cuối chuỗi bằng chữ regex:

/hey/ig.test('HEy ') // 

hoặc là tham số thứ hai với các hàm tạo đối tượng RegExp:

RegExp mới ('hey', 'ig'). test ('HEy') //

Kiểm tra một regex

Đưa ra một biểu thức chính quy, bạn có thể kiểm tra các thuộc tính của nó:

  • nguồn chuỗi mẫu
  • multiline đúng với cờ m
  • toàn cầu đúng với cờ g
  • bỏ qua đúng với cờ i
  • chỉ số cuối cùng
/ ^ ^ ^ ww33)) / i.source // "^ (\\ d {3}) (\\ w +) $"
/ ^ ^ / nw33spl)$ / i.multiline // false
/ ^ ^ / nw33spl)$ / i.last Index // 0
/ ^ ^ / nw33spl)$ / i.ignoreCase // true
/ ^ ^ / nw33spl)$ / i.global // false

Thoát

Những nhân vật này rất đặc biệt:

  • \
  • /
  • []
  • ()
  • {}
  • ?
  • +
  • *
  • |
  • .
  • ^
  • $

Chúng đặc biệt bởi vì chúng là các ký tự điều khiển có ý nghĩa trong mẫu biểu thức chính quy. Nếu bạn muốn sử dụng chúng bên trong mẫu làm ký tự trùng khớp, bạn cần thoát chúng, bằng cách thêm dấu gạch chéo ngược:

/ ^ \ $ /
/ ^ \ ^ $ / // / ^ ^ ^ / test ('^')
/ ^ \ $$ / // / ^ \$$/.test('$ ')

Chuỗi ranh giới

\ b và \ B cho phép bạn kiểm tra xem một chuỗi ở đầu hoặc cuối của một từ:

  • \ b khớp với một tập hợp các ký tự ở đầu hoặc cuối của một từ
  • \ B khớp với một tập hợp các ký tự không ở đầu hoặc cuối của một từ

Thí dụ:

'Tôi thấy một con gấu'.match (/ \ bbear /) // Mảng ["gấu"]
'Tôi thấy một bộ râu'.match (/ \ bbear /) // Mảng ["gấu"]
'Tôi thấy một bộ râu'.match (/ \ bbear \ b /) // null
'cool_bear'.match (/ \ bbear \ b /) // null

Thay thế, sử dụng Biểu thức thông thường

Chúng ta đã thấy cách kiểm tra xem một chuỗi có chứa một mẫu không.

Chúng tôi cũng đã thấy làm thế nào để trích xuất các phần của chuỗi thành một mảng, khớp với một mẫu.

Hãy cùng xem cách thay thế các phần của chuỗi dựa trên một mẫu.

Đối tượng String trong JavaScript có phương thức thay thế (), có thể được sử dụng mà không cần các biểu thức chính quy để thực hiện một thay thế duy nhất trên chuỗi:

"Xin chào thế giới!". Thay thế ('thế giới', 'con chó')
//Chào con chó!
"Con chó của tôi là một con chó tốt!". Thay thế ('con chó', 'con mèo')
// Con mèo của tôi là một con chó tốt!

Phương thức này cũng chấp nhận một biểu thức chính quy làm đối số:

"Xin chào thế giới!". Thay thế (/ world /, 'dog') // Xin chào chú chó!

Sử dụng cờ g là cách duy nhất để thay thế nhiều lần xuất hiện trong một chuỗi trong vanilla JavaScript:

"Con chó của tôi là một con chó tốt!". Thay thế (/ dog / g, 'cat')
// Con mèo của tôi là một con mèo tốt!

Các nhóm cho phép chúng tôi làm những điều lạ mắt hơn, như di chuyển xung quanh các phần của chuỗi:

"Xin chào, thế giới!". Thay thế (/ (\ w +), (\ w +)! /, '$ 2: $ 1 !!!')
// "thế giới: Xin chào !!!"

Thay vì sử dụng một chuỗi, bạn có thể sử dụng một hàm, để thực hiện những điều thậm chí còn lạ hơn. Nó sẽ nhận được một số đối số như đối số được trả về bởi String.match (RegExp) hoặc RegExp.exec (Chuỗi), với một số đối số phụ thuộc vào số lượng nhóm:

"Xin chào, thế giới!". Thay thế (/ (\ w +), (\ w +)! /, (MatchString, đầu tiên, thứ hai) => {
  console.log (đầu tiên);
  console.log (thứ hai);
  trả về `$ {second.toUpperCase ()}: $ {đầu tiên} !!!`
})
// "THẾ GIỚI: Xin chào !!!"

Tham lam

Các biểu thức thông thường được cho là tham lam theo mặc định.

Nó có nghĩa là gì?

Lấy regex này:

/\$(.+)\s?/

Nó được cho là trích xuất một số tiền từ một chuỗi:

/\$(.+)\s?/.exec('Điều này có giá $ 100 ') [1]
// 100

nhưng nếu chúng ta có nhiều từ hơn sau số, nó sẽ thất vọng:

/\$(.+)\s?/.exec('Điều này có giá 100 đô la và ít hơn 200 đô la ') [1] // 100 và nó ít hơn 200 đô la

Tại sao? Bởi vì biểu thức chính tả sau dấu $ khớp với bất kỳ ký tự nào. + Và nó đã giành được điểm dừng cho đến khi đến cuối chuỗi. Sau đó, nó kết thúc vì \ s? làm cho không gian kết thúc tùy chọn.

Để khắc phục điều này, chúng ta cần nói với regex là lười biếng và thực hiện số lượng kết hợp ít nhất có thể. Chúng ta có thể làm như vậy bằng cách sử dụng? ký hiệu sau bộ định lượng:

/\$(.+?)\s/.exec('Điều này có giá 100 đô la và ít hơn 200 đô la ') [1]
// 100
Tôi loại bỏ? sau \ s. Mặt khác, nó chỉ khớp với số đầu tiên, vì không gian là tùy chọn

Vì thế, ? có nghĩa là những thứ khác nhau dựa trên vị trí của nó, bởi vì nó có thể vừa là bộ định lượng vừa là chỉ báo chế độ lười biếng.

Lookahead: khớp một chuỗi tùy thuộc vào những gì theo sau nó

Sử dụng? = Để khớp với một chuỗi mà theo sau là một chuỗi con cụ thể:

/ Roger (? = Vùng biển) /
/ Roger (? = Waters) /. Test ('Roger là con chó của tôi') // sai
/ Roger (? = Waters) /. Test ('Roger là con chó của tôi và Roger Waters là một nhạc sĩ nổi tiếng')
//thật

?! thực hiện thao tác nghịch đảo, khớp nếu một chuỗi không được theo sau bởi một chuỗi con cụ thể:

/ Roger (?! Vùng biển) /
/ Roger (?! Waters) /. Test ('Roger là con chó của tôi') // đúng
/ Roger (?! Waters) /. Test ('Roger Waters là một nhạc sĩ nổi tiếng')
//sai trái

Lookbehinds: khớp một chuỗi tùy thuộc vào những gì xảy ra trước nó

Đây là một tính năng ES2018.

Lookahead sử dụng biểu tượng? =. Lookbehinds sử dụng? <=.

/ (? <= Roger) Vùng biển /
/ (? <= Roger) Waters / .test ('Pink Waters là con chó của tôi')
//sai trái
/ (? <= Roger) Waters / .test ('Roger là con chó của tôi và Roger Waters là một nhạc sĩ nổi tiếng')
//thật

Một cái nhìn bị phủ nhận bằng cách sử dụng?

/ (? 
/ (? 
/ (? 

Biểu thức chính quy và Unicode

Cờ u là bắt buộc khi làm việc với các chuỗi Unicode. Đặc biệt, điều này áp dụng khi bạn có thể cần xử lý các ký tự trong các mặt phẳng thiên văn (những ký tự không được bao gồm trong 1600 ký tự Unicode đầu tiên).

Biểu tượng cảm xúc là một ví dụ tốt, nhưng họ không phải là người duy nhất.

Nếu bạn không thêm cờ đó, biểu thức chính đơn giản phù hợp với một ký tự này sẽ không hoạt động, vì đối với JavaScript, biểu tượng cảm xúc được thể hiện bên trong bởi 2 ký tự (xem Unicode trong JavaScript):

/ ^ .$ /.test ('a') // 
/ ^ .$ /.test ('') // 
/ ^ .$ / u.test ('') // 

Vì vậy, luôn luôn sử dụng cờ u.

Unicode, giống như các ký tự bình thường, xử lý các phạm vi:

/[a-z[/.test('a ') // 
/[1-9[/.test('1 ') // 
/[-[/u.test(' ') // 
/[-[/u.test(' ') // 

JavaScript kiểm tra biểu diễn mã nội bộ, vì vậy <

Tài sản Unicode thoát

Như chúng ta đã thấy ở trên, trong một mẫu biểu thức chính quy, bạn có thể sử dụng \ d để khớp với bất kỳ chữ số nào, \ s để khớp với bất kỳ ký tự nào mà không phải là khoảng trắng, \ w để khớp với bất kỳ ký tự chữ và số nào, v.v.

Thuộc tính Unicode thoát là một tính năng ES2018 giới thiệu một tính năng rất hay, mở rộng khái niệm này cho tất cả các ký tự Unicode giới thiệu \ p {} và phủ định của nó \ P {}.

Bất kỳ ký tự Unicode nào cũng có một tập các thuộc tính. Ví dụ Script xác định họ ngôn ngữ, ASCII là một boolean mà đúng với các ký tự ASCII, v.v. Bạn có thể đặt thuộc tính này trong ngoặc đơn biểu đồ và biểu thức chính quy sẽ kiểm tra xem điều đó có đúng không:

/ ^ \ n / aASCII Bolog +$ / u.test ('abc') // 
/ ^ \ n / aASCII Bolog +$ / u.test ('ABC@ ') // 
/ ^ \ n / AASCII Bolog +$ / u.test ('A') // 

ASCII_Hex_Digit là một thuộc tính boolean khác kiểm tra xem chuỗi chỉ chứa các chữ số thập lục phân hợp lệ:

/ ^ n

Có nhiều thuộc tính boolean khác, mà bạn chỉ cần kiểm tra bằng cách thêm tên của chúng trong ngoặc đơn biểu đồ, bao gồm Uppercase, Lowercase, White_Space, Alphabetic, Emoji và hơn thế nữa:

/ ^ \ npLowercasespl$ / u.test ('h') //
/ ^ \ npppppasease$$ / u.test ('H') //
/ ^ \ n / nEmoji Bolog +$ / u.test ('H') //
/ ^ \ n / nEmojispl +$ / u.test ('' ') //

Ngoài các thuộc tính nhị phân đó, bạn có thể kiểm tra bất kỳ thuộc tính ký tự unicode nào để khớp với một giá trị cụ thể. Trong ví dụ này, tôi kiểm tra xem chuỗi được viết bằng bảng chữ cái Hy Lạp hay Latinh:

/ ^ \ n / # script = Gllpl + $ / u.test ('ελληελληκάκάκά)
/ ^ \ npScriptScript = Latinspl +$ / u.test ('hey') // 

Đọc thêm về tất cả các thuộc tính bạn có thể sử dụng trực tiếp trên đề xuất.

Ví dụ

Giả sử một chuỗi chỉ có một số bạn cần trích xuất, / \ d + / nên thực hiện:

'Kiểm tra 123123329'.match (/ \ d + /)
// Mảng ["123123329"]

Khớp địa chỉ email

Cách tiếp cận đơn giản là kiểm tra các ký tự không phải dấu cách trước và sau dấu @, sử dụng \ S:

/(\S+)@(\S+)\.(\S+)/
/(\S+)@(\S+)\.(\S+)/.exec('copesc@gmail.com ')
//["copesc @ gmail "," copesc "," gmail "," com "]

Đây là một ví dụ đơn giản, tuy nhiên, vì nhiều email không hợp lệ vẫn được thỏa mãn bởi regex này.

Chụp văn bản giữa dấu ngoặc kép

Giả sử bạn có một chuỗi chứa một cái gì đó trong dấu ngoặc kép và bạn muốn trích xuất nội dung đó.

Cách tốt nhất để làm như vậy là sử dụng một nhóm bắt giữ, bởi vì chúng tôi biết trận đấu bắt đầu và kết thúc bằng "và chúng tôi có thể dễ dàng nhắm mục tiêu, nhưng chúng tôi cũng muốn xóa những trích dẫn đó khỏi kết quả của chúng tôi.

Chúng tôi sẽ tìm thấy những gì chúng tôi cần trong kết quả [1]:

const hello = 'Xin chào "hoa đẹp"'
const result = /"([ucci'[*)"/.exec(hello)
// Mảng ["\" hoa đẹp \ "", "hoa đẹp"]

Nhận nội dung bên trong thẻ HTML

Ví dụ: lấy nội dung bên trong thẻ span, cho phép mọi số lượng đối số bên trong thẻ:

/[*>(.*?)<\/span>/
/[*>(.*?)<\/span>/.exec('test ')
// vô giá trị
/ ] *> (. *?) <\ / span> /. exec (' test ')
// [" kiểm tra ", "kiểm tra"]
/[*>(.*?)<\/span>/.exec(' test  ')
// [" test ", "test"]
Quan tâm đến việc học JavaScript? Nhận ebook miễn phí của tôi tại jshandbook.com