HomeLập trìnhJavaScriptHướng dẫn nhanh...

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


Quan tâm đến việc học JavaScript? Nhận sách điện tử 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 được gọi là biểu thức chính quy ngắn gọn) 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 xây dựng một 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
  • trích xuất thông tin từ một chuỗi

Hầu hết mọi ngôn ngữ lập trình đều có một số triển khai các biểu thức chính quy. Có sự khác biệt nhỏ giữa mỗi lần triển khai, nhưng các khái niệm chung được á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 thà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, biểu thức chính quy ngày càng phổ biến. Chúng được đưa vào ngôn ngữ lập trình Perl, và sau đó là nhiều ngôn ngữ khác nữa.

JavaScript, cùng với Perl, là một trong những ngôn ngữ lập trình hỗ trợ 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 chính quy có vẻ hoàn toàn 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.

Biểu thức chính quy mật mã là khó viết, khó để đọckhó duy trì/sửa đổi.

Nhưng đôi khi một biểu thức chính quy là cách lành mạnh duy nhất để thực hiện một số thao tác với chuỗi, vì vậy đây 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 mục đích giới thiệu cho bạn về Biểu thức chính quy JavaScript theo 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à biểu thức chính quy đơn giản là đơn giản để đọc và viếttrong khi 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 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 vậtcó 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 sử dụng hàm tạo:

const re1 = new RegExp('hey')

Thứ hai là sử dụng biểu thức chính quy theo nghĩa đen mẫu đơn:

const re1 = /hey/

Bạn biết rằng JavaScript có đối tượng chữmảng chữ? Nó cũng có chữ regex.

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

Đây là sự khác biệt quan trọng đầu tiên giữa hai hình thức, nhưng chúng ta sẽ thấy những điểm 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 điều rất đơn giản. Nó tìm kiếm chuỗi hey, không 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ỉ chứa heyvà regex cũng sẽ hài lòng.

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

Bạn có thể kiểm tra regex bằng cách sử dụng RegExp.test(String)trả về một boolean:

re1.test('hey') //✅ re1.test('blablabla hey blablabla') //✅ re1.test('he') //❌ re1.test('blablabla') //❌

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

Đâ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ề biểu thức chính quy.

thả neo

/hey/

diêm hey bất cứ nơi nào nó được đặt bên trong chuỗi.

Nếu bạn muốn khớp các chuỗi bắt đầu với heysử dụng ^ nhà điều hành:

/^hey/.test('hey') //✅ /^hey/.test('bla hey') //❌

Nếu bạn muốn khớp các chuỗi chấm dứt với heysử dụng $ nhà điều hành:

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

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

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

Để khớp 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') //✅ /^hey.*joe$/.test('heyjoe') //✅ /^hey.*joe$/.test('hey how are you joe') //✅ /^hey.*joe$/.test('hey joe!') //❌

Khớ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, chẳng hạn 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 quy 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-9]/.test('a') //✅ /[A-Za-z0-9]/.test('1') //✅ /[A-Za-z0-9]/.test('A') //✅

Khớp 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 - ký tự:

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

phủ nhận một mô hình

Các ^ ký tự ở đầu mẫu neo nó vào đầu chuỗi.

Đọc thêm  Các mô-đun JavaScript – Được giải thích bằng các ví dụ

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

/[^A-Za-z0-9]/.test('a') //❌ /[^A-Za-z0-9]/.test('1') //❌ /[^A-Za-z0-9]/.test('A') //❌ /[^A-Za-z0-9]/.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 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 phải 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: dấu cách, tab, dòng mới và dấu cách Unicode
  • \S khớp với bất kỳ ký tự nào không phải là khoảng trắng
  • \0 phù hợp với null
  • \n phù hợp với một ký tự dòng mới
  • \t khớp với một ký tự tab
  • \uXXXX khớp một ký tự unicode với mã XXXX (yêu cầu u lá cờ)
  • . khớp với bất kỳ ký tự nào không phải là ký tự xuống dòng (ví dụ: \n) (trừ khi bạn sử dụng s cờ, giải thích sau)
  • [^] khớp với bất kỳ ký tự nào, kể cả ký tự xuống dòng. Nó hữu ích trên các chuỗi nhiều 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 khác, sử dụng | nhà điều hành.

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

định lượng

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

/^\d$/

Bạn có thể dùng các ? định lượng để biến nó thành 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 điều đó theo 4 cách, sử dụng +, *, {n}{n,m}. Hãy xem xét từng cái một.

+

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

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

*

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

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

{n}

khớp chính xác n mặt hàng

/^\d{3}$/ 
/^\d{3}$/.test('123') //✅ /^\d{3}$/.test('12') //❌ /^\d{3}$/.test('1234') //❌ /^[A-Za-z0-9]{3}$/.test('Abc') //✅

{n,m}

Trận đấu giữa nm lần:

/^\d{3,5}$/ 
/^\d{3,5}$/.test('123') //✅ /^\d{3,5}$/.test('1234') //✅ /^\d{3,5}$/.test('12345') //✅ /^\d{3,5}$/.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ặt hàng:

/^\d{3,}$/ 
/^\d{3,}$/.test('12') //❌ /^\d{3,}$/.test('123') //✅ /^\d{3,}$/.test('12345') //✅ /^\d{3,}$/.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?$/ 
/^\d{3}\w?$/.test('123') //✅ /^\d{3}\w?$/.test('123a') //✅ /^\d{3}\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 là một hoặc nhiều ký tự chữ và số:

/^(\d{3})(\w+)$/ 
/^(\d{3})(\w+)$/.test('123') //❌ /^(\d{3})(\w+)$/.test('123s') //✅ /^(\d{3})(\w+)$/.test('123something') //✅ /^(\d{3})(\w+)$/.test('1234') //✅

Các ký tự lặp đặt sau dấu ngoặc đơn đóng nhóm đề cập đến toàn bộ nhóm:

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

Chụp nhóm

Cho đến nay, chúng ta đã biết 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 hay không.

Một tính năng rất hay của biểu thức chính quy là khả năng chụp các phần của một chuỗivà đặ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 biệt là Chụp nhóm.

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

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

Nếu không khớp, nó sẽ trả về null:

'123s'.match(/^(\d{3})(\w+)$/) //Array [ "123s", "123", "s" ] 
/^(\d{3})(\w+)$/.exec('123s') //Array [ "123s", "123", "s" ] 
'hey'.match(/(hey|ho)/) //Array [ "hey", "hey" ] 
/(hey|ho)/.exec('hey') //Array [ "hey", "hey" ] 
/(hey|ho)/.exec('ha!') //null

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

'123456789'.match(/(\d)+/) //Array [ "123456789", "9" ]

nhóm tùy chọn

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

/^(\d{3})(\s)?(\w+)$/.exec('123 s') //Array [ "123 s", "123", " ", "s" ] 
/^(\d{3})(\s)?(\w+)$/.exec('123s') //Array [ "123s", "123", undefined, "s" ]

Các nhóm đối sánh tham chiếu

Mỗi nhóm phù hợp được gán một số. $1 đề cập đến đầu tiên, $2 đến 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 sau này.

Đọc thêm  Cách định dạng số dưới dạng tiền tệ trong JavaScript

Các nhóm chụp được đặt tên

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

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 = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ const result = re.exec('2015-01-02') 
// result.groups.year === '2015'; // result.groups.month === '01'; // result.groups.day === '02';
O7t7h0vXGY1EDMe6jWKDV7K-K7QZskPzCcGs

Sử dụng match và exec không có nhóm

Có một sự khác biệt giữa việc sử dụng matchexec 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') // [ "hey" ] 
/(hey).(ho)/.exec('hey ho') // [ "hey ho", "hey", "ho" ]

Nhóm không bắt giữ

Vì theo mặc định, các nhóm là Nhóm chụp, 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 bắt giữbắt đầu bằng một (?:...)

'123s'.match(/^(\d{3})(?:\s)(\w+)$/)//null 
'123 s'.match(/^(\d{3})(?:\s)(\w+)$/) //Array [ "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: bật chế độ nhiều dòng. Ở chế độ này, ^$ khớp với phần đầu và phần cuối 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 phần đầu và phần cuối của mỗi dòng.
  • u: cho phép hỗ trợ unicode (được giới thiệu trong ES6/ES2015)
  • s: (mới trong ES2018) viết tắt của dòng duy nhấtnó gây ra . để khớp với các ký tự dòng mới.

Các cờ có thể được kết hợp và chúng được thêm vào cuối chuỗi theo ký tự biểu thức chính quy:

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

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

new RegExp('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ó:

  • source chuỗi mẫu
  • multiline đúng với m lá cờ
  • global đúng với g lá cờ
  • ignoreCase đúng với i lá cờ
  • lastIndex
/^(\w{3})$/i.source //"^(\\d{3})(\\w+)$" /^(\w{3})$/i.multiline //false /^(\w{3})$/i.lastIndex //0 /^(\w{3})$/i.ignoreCase //true /^(\w{3})$/i.global //false

bỏ trốn

Những ký tự này là đặc biệt:

Chúng đặc biệt 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 dưới dạng các ký tự phù hợp, bạn cần thoát khỏi chúng bằng cách thêm dấu gạch chéo ngược:

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

ranh giới chuỗi

\b\B cho phép bạn kiểm tra xem một chuỗi ở đầu hay cuối 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ừ

Ví dụ:

'I saw a bear'.match(/\bbear/) //Array ["bear"] 'I saw a beard'.match(/\bbear/) //Array ["bear"] 'I saw a beard'.match(/\bbear\b/) //null 'cool_bear'.match(/\bbear\b/) //null

Thay thế, sử dụng Biểu thức chính quy

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

Chúng ta cũng đã xem cách 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 xem làm thế nào để thay thế các phần của một chuỗi dựa trên một khuôn mẫu.

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

"Hello world!".replace('world', 'dog') //Hello dog! 
"My dog is a good dog!".replace('dog', 'cat') //My cat is a good dog!

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ố:

"Hello world!".replace(/world/, 'dog') //Hello dog!

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

"My dog is a good dog!".replace(/dog/g, 'cat') //My cat is a good cat!

Các nhóm cho phép chúng tôi làm những việc thú vị hơn, chẳng hạn như di chuyển xung quanh các phần của chuỗi:

"Hello, world!".replace(/(\w+), (\w+)!/, '$2: $1!!!') // "world: Hello!!!"

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ú vị hơn. Nó sẽ nhận được một số đối số giống như đối số được trả về bởi String.match(RegExp) hoặc RegExp.exec(String)với một số đối số phụ thuộc vào số lượng nhóm:

"Hello, world!".replace(/(\w+), (\w+)!/, (matchedString, first, second) => {   console.log(first);   console.log(second); 
  return `${second.toUpperCase()}: ${first}!!!` }) 
//"WORLD: Hello!!!"

tham lam

Biểu thức chính quy được cho là tham 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('This costs $100')[1] //100

nhưng nếu chúng ta có nhiều từ hơn sau con số, nó sẽ trở nên kỳ lạ:

/\$(.+)\s?/.exec('This costs $100 and it is less than $200')[1] //100 and it is less than $200

Tại sao? Bởi vì biểu thức chính quy sau dấu $ khớp với bất kỳ ký tự nào có .+và nó sẽ không dừng lại 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 yêu cầu biểu thức chính quy lười biếng và thực hiện số lượng khớ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('This costs $100 and it is less than $200')[1] //100

tôi đã gỡ bỏ ? sau đó \s . Mặt khác, nó chỉ khớp với số đầu tiên, vì khoảng trắng là tùy chọn

Cho nên, ? 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à một bộ định lượng vừa là một chỉ báo chế độ lười biếng.

Đọc thêm  Không thể chuyển giá trị đầu vào vào biến JavaScript

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

Sử dụng ?= để khớp một chuỗi theo sau bởi một chuỗi con cụ thể:

/Roger(?=Waters)/ 
/Roger(?= Waters)/.test('Roger is my dog') //false /Roger(?= Waters)/.test('Roger is my dog and Roger Waters is a famous musician') //true

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

/Roger(?!Waters)/ 
/Roger(?! Waters)/.test('Roger is my dog') //true /Roger(?! Waters)/.test('Roger Waters is a famous musician') //false

Lookbehinds: khớp một chuỗi tùy thuộc vào chuỗi nào đứng trước nó

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

Lookaheads sử dụng ?= Biểu tượng. sử dụng Lookbehinds ?&lt;=.

/(?<=Roger) Waters/ 
/(?<=Roger) Waters/.test('Pink Waters is my dog') //false 
/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //true

Một cái nhìn phía sau bị phủ nhận bằng cách sử dụng ?&lt;!:

/(?<!Roger) Waters/ 
/(?<!Roger) Waters/.test('Pink Waters is my dog') //true 
/(?<!Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //false

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

Các u cờ là bắt buộc khi làm việc với 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 mặt phẳng trung gian (những ký tự không có trong 1600 ký tự Unicode đầu tiên).

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

Nếu bạn không thêm cờ đó, biểu thức chính quy đơn giản khớ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 biểu thị bên trong bằng 2 ký tự (xem Unicode trong JavaScript):

/^.$/.test('a') //✅ /^.$/.test('?') //❌ /^.$/u.test('?') //✅  

So, always use the u lá cờ.

Unicode, just like normal characters, handle ranges:

/[a-z]/.test('a') //✅ /[1-9]/.test('1') //✅ /[?-?]/u.test('?') //✅ /[?-?]/u.test('?') //❌  

JavaScript checks the internal code representation, so ? < ? < ? because \u1F436 < \u1F43A <; \u1F98A. Kiểm tra danh sách Biểu tượng cảm xúc đầy đủ để nhận các mã đó và tìm hiểu thứ tự (mẹo: bộ chọn Biểu tượng cảm xúc của macOS có một số biểu tượng cảm xúc theo thứ tự hỗn hợp, vì vậy đừng tin vào nó).

Unicode property escapes

As we saw above, in a regular expression pattern you can use \d để khớp với bất kỳ chữ số nào, \s để khớp với bất kỳ ký tự nào 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.

The Unicode property escapes is an ES2018 feature that introduces a very cool feature, extending this concept to all Unicode characters introducing \p{} và phủ định của nó \P{}.

Any Unicode character has a set of properties. For example Script xác định họ ngôn ngữ, ASCII là một boolean đúng với các ký tự ASCII, v.v. Bạn có thể đặt thuộc tính này trong dấu ngoặc đơn của biểu đồ và biểu thức chính quy sẽ kiểm tra xem điều đó có đúng không:

/^\p{ASCII}+$/u.test('abc') //✅ /^\p{ASCII}+$/u.test('[email protected]') //✅ /^\p{ASCII}+$/u.test('ABC?') //❌ 

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ệ hay không:

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF') //✅ /^\p{ASCII_Hex_Digit}+$/u.test('h') //❌

There are many other boolean properties, which you just check by adding their name in the graph parentheses, including Uppercase, Lowercase, White_Space, Alphabetic, Emoji và hơn thế nữa:

/^\p{Lowercase}$/u.test('h') //✅ /^\p{Uppercase}$/u.test('H') //✅ 
/^\p{Emoji}+$/u.test('H') //❌ /^\p{Emoji}+$/u.test('??') //✅  

In addition to those binary properties, you can check any of the unicode character properties to match a specific value. In this example, I check if the string is written in the Greek or Latin alphabet:

/^\p{Script=Greek}+$/u.test('ελληνικά') //✅ /^\p{Script=Latin}+$/u.test('hey') //✅

Read more about all the properties you can use directly on the proposal.

Examples

Supposing a string has only one number you need to extract, /\d+/ Hãy làm nó:

'Test 123123329'.match(/\d+/) // Array [ "123123329" ]

Match an email address

A simplistic approach is to check non-space characters before and after the @ ký, sử dụng \S:

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

This is a simplistic example, however, as many invalid emails are still satisfied by this regex.

Capture text between double quotes

Suppose you have a string that contains something in double quotes, and you want to extract that content.

The best way to do so is by using a capturing group, because we know the match starts and ends with "và chúng tôi có thể dễ dàng nhắm mục tiêu nó, nhưng chúng tôi cũng muốn xóa các trích dẫn đó khỏi kết quả của mình.

We’ll find what we need in result[1]:

const hello = 'Hello "nice flower"' const result = /"([^']*)"/.exec(hello) //Array [ "\"nice flower\"", "nice flower" ]

Get the content inside an HTML tag

For example get the content inside a span tag, allowing any number of arguments inside the tag:

/<span\b[^>]*>(.*?)&lt;\/span>/ 
/<span\b[^>]*>(.*?)<\/span>/.exec('test')// null 
/<span\b[^>]*>(.*?)<\/span>/.exec('<span>test</span>') // ["&lt;span>test</span>", "test"] 
/<span\b[^>]*>(.*?)<\/span>/.exec('<span class="x">test</span>') // ["<span class="x">test</span>", "test"]

Interested in learning JavaScript? Get my ebook at jshandbook.com



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status