Làm thế nào để bạn tìm kiếm một chuỗi cho một mẫu trong javascript?

Biểu thức chính quy cung cấp khả năng "tìm" và "tìm và thay thế" dữ liệu thông qua các chuỗi văn bản chỉ định các mẫu tìm kiếm. Regex (hoặc regexp) linh hoạt, mạnh mẽ và giúp việc viết các chương trình dễ hiểu và dễ bảo trì hơn nhiều. Mục blog này sẽ bao gồm các mẫu tìm kiếm này và nhiều cách khác nhau để sử dụng regex trong Javascript

Các ví dụ về biểu thức chính quy Javascript

Cụm từ thông dụng có nhiều cách sử dụng trong bất kỳ mã nào hoạt động với chuỗi văn bản (hoặc truyền dữ liệu văn bản). Regex được sử dụng trong nhiều trường hợp sử dụng phức tạp, một số ví dụ

• console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
  console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3
  

  4 tìm các từ có cách đánh vần tương tự color (Mỹ) và color (Khối thịnh vượng chung)

• console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
  console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3
  

  5 tìm các từ có gốc từ "cat" trong "A cat, not a dog, and the toys the cat’s rải rác — rõ ràng là một thảm họa. "

Regex không trực quan và dường như luôn yêu cầu một số điều chỉnh để hoạt động đúng, vì vậy một trình kiểm tra regex trực tuyến là điều cần thiết. Như Jamie Zawinski đã nói trên alt. tôn giáo. emac năm 1997

Một số người, khi đối mặt với một vấn đề, nghĩ rằng “Tôi biết, tôi sẽ sử dụng các biểu thức thông thường. " Bây giờ họ có hai vấn đề

Khái niệm cơ bản về biểu thức chính quy Javascript

cú pháp

Một biểu thức chính quy có cú pháp

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

6. Sử dụng chuỗi

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

7 làm ví dụ, thuật ngữ regex là

• console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
  console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3
  

  7 là một biểu thức chính quy hoàn chỉnh

• console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
  console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3
  

  9 là mẫu

• console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog
  

  0 là công cụ sửa đổi
• dấu gạch chéo về phía trước / là dấu phân cách mẫu

Hàm Javascript

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

1 nhận một biểu thức chính quy để tìm kiếm một kết quả khớp và trả về vị trí của kết quả khớp

Hàm Javascript

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

2 nhận một biểu thức chính quy và trả về một chuỗi đã sửa đổi trong đó mẫu được thay thế

Tìm kiếm()

Hàm Javascript

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

1 lấy biểu thức chính quy và trả về vị trí trong chuỗi nơi tìm thấy kết quả khớp (hoặc -1 nếu không tìm thấy). Ví dụ: ở đây chúng tôi tìm kiếm thông qua

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

4 cho "Cat" với công cụ sửa đổi

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

0 (bỏ qua trường hợp trong quá trình tìm kiếm)

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

2

Tương tự như trên,

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

1 có thể được gọi trực tiếp trên bất kỳ biến chuỗi nào

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

GHI CHÚ. Javascript

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

7 là một con thú rất khác so với

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

8 trong ngữ cảnh này. cái trước là một biểu thức chính quy, cái sau là một chuỗi. Việc nghĩ rằng một người đang tìm kiếm bằng sức mạnh của khớp regex chỉ để khám phá một chuỗi được trích dẫn là một nguồn thường xuyên gây ra cơn thịnh nộ gỡ lỗi. Đọc tiếp để đề cập đến hàm

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

9, giúp loại lỗi đánh máy này ít phổ biến hơn

thay thế()

Hàm Javascript

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

2 lấy biểu thức chính quy và trả về một chuỗi, có thể được sửa đổi theo mẫu nếu tìm kiếm thành công. So sánh kết quả của ba cuộc gọi sau

Tìm kiếm theo nghĩa đen được trích dẫn cho lần xuất hiện đầu tiên

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

Tìm kiếm theo biểu thức chính quy, không nhạy cảm, cho lần xuất hiện đầu tiên

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

0

Tìm kiếm theo biểu thức chính quy, không nhạy cảm, trên toàn cầu (tất cả các lần xuất hiện)

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

1Đánh giá biểu thức chính quy thay đổi

Hành vi của công cụ khớp biểu thức chính quy được thay đổi và mở rộng thông qua việc sử dụng các công cụ sửa đổi, phạm vi ký tự, ký tự meta loại lớp và bộ định lượng

sửa đổi

Công cụ sửa đổi thay đổi hành vi so khớp mặc định (trả về kết quả khớp đầu tiên, sử dụng khớp phân biệt chữ hoa chữ thường và chỉ khớp với dòng đầu tiên của biến nhiều dòng)

Công cụ sửa đổiMô tảghép khớp toàn cầu (tất cả, thay vì chỉ đầu tiên)khớp không phân biệt chữ hoa chữ thườngmkhớp nhiều dòng

Các dãy

Phạm vi, được giới hạn bởi dấu ngoặc vuông

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

01, khớp với một phạm vi ký tự

Biểu thứcMô tả

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

02Tìm bất kỳ ký tự nào giữa các dấu ngoặc

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

03Tìm bất kỳ ký tự nào KHÔNG nằm giữa các dấu ngoặc

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

04Tìm bất kỳ ký tự nào giữa các dấu ngoặc (bất kỳ chữ số nào)

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

05Tìm bất kỳ ký tự nào KHÔNG nằm giữa các dấu ngoặc (bất kỳ ký tự nào không phải là chữ số)`(xy)`

siêu ký tự

Siêu ký tự khớp với các loại ký tự cụ thể

Meta-charterDescription

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

06a ký tự đơn, ngoại trừ dòng mới hoặc dấu kết thúc dòng

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

07a ký tự từ

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

08a ký tự không phải từ

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

09a chữ số

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

10a ký tự không phải chữ số

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

11a ký tự khoảng trắng

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

12a ký tự không khoảng trắng

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

13a khớp ở ranh giới từ, ở đầu bằng

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

14 hoặc ở cuối bằng

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

15

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

16a khớp, nhưng không ở

định lượng

Bộ định lượng thay đổi trình tự khớp số cụ thể

Bộ định lượngMô tả

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

18So khớp ít nhất một

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

19

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

10So khớp 0 hoặc nhiều lần xuất hiện của

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

19

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

12So khớp 0 hoặc một lần xuất hiện của

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

19

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

14So khớp một chuỗi X

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

19

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

16So khớp một chuỗi X với Y

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

19

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

18So khớp một chuỗi ít nhất X

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

19

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

10So khớp

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

19 ở cuối

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

19Kết hợp với chuỗi cụ thể bất kỳ theo sau _______ 41

Đối tượng

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

18 tích hợp trong Javascript cung cấp một cơ chế linh hoạt hơn để sử dụng các biến cho từng phần tử phù hợp. Bạn đã xem nó hoạt động — các dấu gạch chéo về phía trước tự động tạo ra các biểu thức chính quy — vì vậy những điều sau đây là tương đương

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

1

kiểm tra () và thực thi ()

Hãy bắt đầu khám phá đối tượng

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

18 bằng cách chạy đối sánh chuỗi ký tự trên đối tượng chuỗi ký tự

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

1

Để cung cấp cho lập trình viên Javascript tính linh hoạt tính toán nhiều nhất có thể, chúng tôi đặt chuỗi và mẫu vào các biến, sau đó sử dụng các phương thức

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

30 và

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

31 để trả về một mảng boolean và một kết quả tương ứng

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

1

Tìm kiếm()

Phương thức Javascript

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

1 trả về vị trí của trận đấu đầu tiên

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

3

tách ra()

Phương thức Javascript

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

33 coi mẫu là một dấu phân cách và trả về một mảng với tất cả các chuỗi được cắt rời bởi mẫu

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

9

trận đấu()

Phương thức Javascript

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

34 trả về một mảng với tất cả các chuỗi khớp

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

0

Điều đó không ấn tượng lắm, nhưng hãy xem xét kết quả tìm kiếm (từ ví dụ đã cho ở trên) - bây giờ một số sức mạnh của

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

34 trở nên rõ ràng

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

1

thay thế()

Phương thức Javascript

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

2

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

2

Đầu ra cho thấy rằng chúng tôi có thể cần nhiều công việc hơn để có được kết quả khả quan

Một con chó, không phải một con chó, và những món đồ chơi mà con chó đã quan tâm — Dogegorically a Dogastrophe

Nhóm Regex

Mạnh mẽ như regex, phải đề cập đến việc nhóm, cung cấp bộ nhớ ngắn hạn về các kết quả phù hợp được tìm thấy

Trong đoạn mã sau, chúng tôi khớp hai từ

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

37 được phân tách bằng bất kỳ ký tự khoảng trắng nào

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

11 (có thể là khoảng trắng, tab, ký tự xuống dòng, dòng mới, tab dọc hoặc ký tự nguồn cấp biểu mẫu)

Các kết quả phù hợp, được ghi nhớ bởi dấu ngoặc đơn nhóm, được gọi lại trong đặc tả thay thế bởi các dấu vị trí

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

39 và

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

90 và đảo ngược bằng cách thay đổi thứ tự của chúng trong chuỗi

console.log( "my cat, Cat".replace("Cat", "Dog") ) ; // --> my cat, Dog

91

console.log( "my cat, Cat".search(/Cat/) ) ; // --> 10
console.log( "my cat, Cat".search(/Cat/i) ) ; // --> 3

3Kết luận

Bài đăng trên blog này bao gồm các khái niệm cơ bản về biểu thức chính quy Javascript, bao gồm

• cú pháp của bộ sửa đổi, phạm vi, siêu ký tự và bộ định lượng
• đối tượng RegExp trong Javascript và các phương thức của nó
• nhóm biểu thức chính quy và biến vị trí

Bắt đầu học

Để tìm hiểu thêm về Javascript, hãy xem các bài đăng trên blog Javascript khác và đăng ký tham gia các chương trình Javascript Nanodegree của chúng tôi, bao gồm cả Javascript trung cấp

Làm cách nào để kiểm tra xem một chuỗi có khớp với mẫu trong JavaScript không?

Làm cách nào để khớp mẫu biểu thức chính quy trong JavaScript?