HomeLập trìnhJavaScriptVí dụ đối...

Ví dụ đối sánh Regex JavaScript – Cách sử dụng JS Thay thế trên chuỗi


Biểu thức chính quy, viết tắt là regex, hoặc đôi khi là regexp, là một trong những khái niệm mà bạn có thể biết là thực sự mạnh mẽ và hữu ích. Nhưng chúng có thể gây khó khăn, đặc biệt là đối với các lập trình viên mới bắt đầu.

Nó không phải là theo cách này. JavaScript bao gồm một số phương pháp hữu ích giúp việc sử dụng các biểu thức chính quy trở nên dễ quản lý hơn nhiều. Trong số các phương pháp được đưa vào, phương pháp .match(), .matchAll().replace() các phương pháp có lẽ là những phương pháp bạn sẽ sử dụng thường xuyên nhất.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu chi tiết về các phương thức đó và xem xét một số lý do tại sao bạn có thể sử dụng chúng thay vì các phương thức JS đi kèm khác

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

Theo MDN, biểu thức chính quy là “các mẫu được sử dụng để so khớp các tổ hợp ký tự trong chuỗi”.

Những mẫu này đôi khi có thể bao gồm các ký tự đặc biệt (*, +), khẳng định (\W, ^), nhóm và phạm vi ((abc), [123]) và những thứ khác làm cho regex trở nên mạnh mẽ nhưng khó nắm bắt.

Về cốt lõi, regex là tất cả về việc tìm kiếm các mẫu trong chuỗi – mọi thứ từ việc kiểm tra một chuỗi cho một ký tự đơn lẻ đến xác minh rằng một số điện thoại hợp lệ đều có thể được thực hiện bằng các biểu thức chính quy.

Nếu bạn là người mới làm quen với regex và muốn thực hành trước khi đọc tiếp, hãy xem thử thách viết mã tương tác của chúng tôi.

Làm thế nào để sử dụng .match() phương pháp

Vì vậy, nếu regex hoàn toàn là tìm kiếm các mẫu trong chuỗi, bạn có thể tự hỏi điều gì tạo ra .match() phương pháp hữu ích như vậy?

không giống như .test() phương thức vừa trả về true hoặc false, .match() thực sự sẽ trả lại kết quả khớp với chuỗi bạn đang kiểm tra. Ví dụ:

const csLewisQuote="We are what we believe we are.";
const regex1 = /are/;
const regex2 = /eat/;

csLewisQuote.match(regex1); // ["are", index: 3, input: "We are what we believe we are.", groups: undefined]

csLewisQuote.match(regex2); // null

Điều này có thể thực sự hữu ích đối với một số dự án, đặc biệt nếu bạn muốn trích xuất và thao tác dữ liệu phù hợp mà không thay đổi chuỗi gốc.

Đọc thêm  JavaScript TypeOf – Cách kiểm tra loại biến hoặc đối tượng trong JS

Nếu tất cả những gì bạn muốn biết là liệu một mẫu tìm kiếm có được tìm thấy hay không, hãy sử dụng .test() phương pháp – nó nhanh hơn nhiều.

Có hai giá trị trả lại chính mà bạn có thể mong đợi từ .match() phương pháp:

  1. Nếu có một trận đấu, các .match() phương thức sẽ trả về một mảng khớp. Chúng ta sẽ đi vào chi tiết hơn về điều này một chút.
  2. Nếu không có sự phù hợp, .match() phương pháp sẽ trở lại null.

Một số bạn có thể đã nhận thấy điều này, nhưng nếu bạn nhìn vào ví dụ trên, .match() chỉ khớp với lần xuất hiện đầu tiên của từ “are”.

Rất nhiều lần bạn sẽ muốn biết tần suất một mẫu khớp với chuỗi mà bạn đang kiểm tra, vì vậy hãy xem cách thực hiện điều đó với .match().

Chế độ kết hợp khác nhau

Nếu có một trận đấu, mảng đó .match() lợi nhuận có hai khác nhau chế độvì thiếu một thuật ngữ tốt hơn.

Chế độ đầu tiên là khi cờ chung (g) không được sử dụng, như trong ví dụ trên:

const csLewisQuote="We are what we believe we are.";
const regex = /are/;

csLewisQuote.match(regex); // ["are", index: 3, input: "We are what we believe we are.", groups: undefined]

Trong trường hợp này, chúng tôi .match() một mảng có kết quả khớp đầu tiên cùng với chỉ mục của kết quả khớp trong chuỗi gốc, chính chuỗi gốc và bất kỳ nhóm khớp nào đã được sử dụng.

Nhưng giả sử bạn muốn xem từ “are” xuất hiện bao nhiêu lần trong một chuỗi. Để làm điều đó, chỉ cần thêm cờ tìm kiếm toàn cầu vào cụm từ thông dụng của bạn:

const csLewisQuote="We are what we believe we are.";
const regex = /are/g;

csLewisQuote.match(regex); // ["are", "are"]

Bạn sẽ không nhận được các thông tin khác có trong chế độ không toàn cầu, nhưng bạn sẽ nhận được một mảng có tất cả các kết quả khớp trong chuỗi mà bạn đang kiểm tra.

phân biệt chữ hoa chữ thường

Một điều quan trọng cần nhớ là regex phân biệt chữ hoa chữ thường. Ví dụ: giả sử bạn muốn xem từ “chúng tôi” xuất hiện bao nhiêu lần trong chuỗi của mình:

const csLewisQuote="We are what we believe we are.";
const regex = /we/g;

csLewisQuote.match(regex); // ["we", "we"]

Trong trường hợp này, bạn đang so khớp chữ “w” viết thường theo sau là chữ “e” viết thường, điều này chỉ xuất hiện hai lần.

Đọc thêm  Vùng chết tạm thời (TDZ) và cẩu trong JavaScript – được giải thích bằng các ví dụ

Nếu bạn muốn tất cả các trường hợp của từ “chúng tôi” cho dù đó là chữ hoa hay chữ thường, thì bạn có một số tùy chọn.

Đầu tiên, bạn có thể sử dụng .toLowercase() phương pháp trên chuỗi trước khi kiểm tra nó với .match() phương pháp:

const csLewisQuote="We are what we believe we are.".toLowerCase();
const regex = /we/g;

csLewisQuote.match(regex); // ["we", "we", "we"]

Hoặc nếu bạn muốn giữ nguyên kiểu chữ ban đầu, bạn có thể thêm cờ tìm kiếm không phân biệt chữ hoa chữ thường (i) thành biểu thức chính quy của bạn:

const csLewisQuote="We are what we believe we are.";
const regex = /we/gi;

csLewisQuote.match(regex); // ["We", "we", "we"]

Cái mới .matchAll() phương pháp

Bây giờ bạn đã biết tất cả về .match() phương pháp, nó đáng để chỉ ra rằng .matchAll() phương pháp đã được giới thiệu gần đây.

không giống như .match() phương thức trả về một mảng hoặc null, .matchAll() yêu cầu cờ tìm kiếm toàn cầu (g) và trả về một trình vòng lặp hoặc một mảng trống:

const csLewisQuote="We are what we believe we are.";
const regex1 = /we/gi;
const regex2 = /eat/gi;

[...csLewisQuote.matchAll(regex1)]; 
// [
//   ["We", index: 0, input: "We are what we believe we are.", groups: undefined],
//   ["we", index: 12, input: "We are what we believe we are.", groups: undefined]
//   ["we", index: 23, input: "We are what we believe we are.", groups: undefined]
// ]

[...csLewisQuote.matchAll(regex2)]; // []

Trong khi nó có vẻ phức tạp hơn .match() phương pháp, ưu điểm chính mà .matchAll() cung cấp là nó hoạt động tốt hơn với các nhóm chụp.

Đây là một ví dụ đơn giản:

const csLewisRepeat = "We We are are";
const repeatRegex = /(\w+)\s\1/g;

csLewisRepeat.match(repeatRegex); // ["We We", "are are"]
.match()
const csLewisRepeat = "We We are are";
const repeatRegex = /(\w+)\s\1/g;

[...repeatStr.matchAll(repeatRegex)];

// [
//   ["We We", "We", index: 0, input: "We We are are", groups: undefined],
//   ["are are", "are", index: 6, input: "We We are are", groups: undefined],
// ]
.matchAll()

Mặc dù điều đó chỉ làm trầy xước bề mặt, nhưng hãy nhớ rằng có lẽ tốt hơn là sử dụng .matchAll() nếu bạn đang sử dụng g gắn cờ và muốn tất cả các thông tin bổ sung mà .match() cung cấp cho một trận đấu duy nhất (chỉ mục, chuỗi gốc, v.v.).

Làm thế nào để sử dụng .replace() phương pháp

Vì vậy, bây giờ bạn đã biết cách so khớp các mẫu trong chuỗi, có thể bạn sẽ muốn làm điều gì đó hữu ích với những kiểu khớp đó.

Một trong những điều phổ biến nhất bạn sẽ làm khi tìm thấy một mẫu phù hợp là thay thế mẫu đó bằng một mẫu khác. Ví dụ: bạn có thể muốn thay thế “trả tiền” trong “paidCodeCamp” bằng “miễn phí”. Regex sẽ là một cách tốt để làm điều đó.

Đọc thêm  Cách sử dụng Async/Await trong JavaScript với mã JS mẫu

Từ .match().matchAll() trả về thông tin về chỉ mục cho từng mẫu phù hợp, tùy thuộc vào cách bạn sử dụng nó, bạn có thể sử dụng thông tin đó để thực hiện một số thao tác chuỗi lạ mắt. Nhưng có một cách dễ dàng hơn – bằng cách sử dụng .replace() phương pháp.

Với .replace()tất cả những gì bạn cần làm là chuyển cho nó một chuỗi hoặc biểu thức chính quy mà bạn muốn đối sánh làm đối số đầu tiên và một chuỗi để thay thế mẫu phù hợp đó bằng đối số thứ hai:

const campString = 'paidCodeCamp';
const fCCString1 = campString.replace('paid', 'free');
const fCCString2 = campString.replace(/paid/, 'free');

console.log(campString); // "paidCodeCamp"
console.log(fCCString1); // "freeCodeCamp"
console.log(fCCString2); // "freeCodeCamp"

Phần tốt nhất là .replace() trả về một chuỗi mới và chuỗi ban đầu vẫn giữ nguyên.

Tương tự như .match() phương pháp, .replace() sẽ chỉ thay thế mẫu phù hợp đầu tiên mà nó tìm thấy trừ khi bạn sử dụng biểu thức chính quy với g lá cờ:

const campString = 'paidCodeCamp is awesome. You should check out paidCodeCamp.';
const fCCString1 = campString.replace('paid', 'free');
const fCCString2 = campString.replace(/paid/g, 'free');

console.log(fCCString1); // "freeCodeCamp is awesome. You should check out paidCodeCamp."
console.log(fCCString2); // "freeCodeCamp is awesome. You should check out freeCodeCamp."

Và tương tự như trước đây, cho dù bạn chuyển một chuỗi hay một biểu thức chính quy làm đối số đầu tiên, điều quan trọng cần nhớ là mẫu phù hợp có phân biệt chữ hoa chữ thường:

const campString = 'PaidCodeCamp is awesome. You should check out PaidCodeCamp.';
const fCCString1 = campString.replace('Paid', 'free');
const fCCString2 = campString.replace(/paid/gi, 'free');

console.log(fCCString1); // "freeCodeCamp is awesome. You should check out PaidCodeCamp."
console.log(fCCString2); // "freeCodeCamp is awesome. You should check out freeCodeCamp."

Làm thế nào để sử dụng .replaceAll() phương pháp

Cũng giống như làm thế nào .match() có một cái mới hơn .matchAll() phương pháp, .replace() có một cái mới hơn .replaceAll() phương pháp.

Sự khác biệt thực sự duy nhất giữa .replace().replaceAll() là bạn cần sử dụng cờ tìm kiếm toàn cầu nếu bạn sử dụng biểu thức chính quy với .replaceAll():

const campString = 'paidCodeCamp is awesome. You should check out paidCodeCamp.';
const fCCString1 = campString.replaceAll('paid', 'free');
const fCCString2 = campString.replaceAll(/paid/g, 'free');

console.log(fCCString1); // "freeCodeCamp is awesome. You should check out freeCodeCamp."
console.log(fCCString2); // "freeCodeCamp is awesome. You should check out freeCodeCamp."

Lợi ích thực sự với .replaceAll() là nó dễ đọc hơn một chút và thay thế tất cả các mẫu phù hợp khi bạn chuyển cho nó một chuỗi làm đối số đầu tiên.

Đó là nó! Bây giờ bạn đã biết kiến ​​thức cơ bản về khớp và thay thế các phần của chuỗi bằng biểu thức chính quy và một số phương thức JS tích hợp. Đây là những ví dụ khá đơn giản, nhưng tôi hy vọng nó vẫn cho thấy sức mạnh của dù chỉ một chút biểu thức chính quy.

Là hữu ích không? Làm thế nào để bạn sử dụng .match(), .matchAll(), .replace().replaceAll() phương pháp? Hãy cho tôi biết trên Twitter.





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