Ví dụ về đối sánh Regex của JavaScript – Cách sử dụng thay thế JS trên chuỗi – chuỗi đối sánh regex của javascript

Biểu thức chính quy, được 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 nó 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 cần phải 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 biểu thức chính quy hiệu quả hơn nhiều

Bạn đang xem: chuỗi đối sánh regex của javascript

Biểu thức chính quy, được 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 những người mới bắt đầu lập trình.

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

Trong hướng dẫn này, chúng ta sẽ đi sâu vào chi tiết của các phương pháp đó 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 để khớp các kế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 ( * , + ), xác nhận ( \ 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ừ kiểm tra chuỗi cho một ký tự đơn lẻ đến xác minh rằng số điện thoại là 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à thương hiệu 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.

Cách sử dụng phương thức .match ()

Vì vậy, nếu regex là tất cả về việc tìm kiếm các mẫu trong chuỗi, bạn có thể tự hỏi mình điều gì làm cho Phương thức .match () rất hữu ích?

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

  const csLewisQuote = 'Chúng tôi là những gì chúng tôi tin tưởng.';
const regex1 = / are /;
const regex2 = / ăn /;

csLewisQuote.match (regex1); // ["are", index: 3, input: "Chúng tôi là những gì chúng tôi tin rằng chúng tôi là.", groups: undefined]

csLewisQuote.match (regex2); // vô giá trị
 

Đ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 mà bạn đang khớp mà không thay đổi chuỗi ban đầu.

Nếu tất cả bạn muốn biết là có tìm thấy một mẫu tìm kiếm hay không, hãy sử dụng phương thức .test () - phương thức này nhanh hơn nhiều.

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

  1. Nếu trùng khớp, phương thức .match () sẽ trả về một mảng có khớp. Chúng ta sẽ đi vào chi tiết hơn về vấn đề này một chút.
  2. Nếu không khớp, phương thức .match () sẽ trả về 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".

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

Các chế độ so khớp khác nhau

Nếu có sự trùng khớp, mảng đó .match () trả về có hai chế độ khác nhau, 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 = 'Chúng tôi là những gì chúng tôi tin tưởng.';
const regex = / are /;

csLewisQuote.match (regex); // ["are", index: 3, input: "Chúng tôi là những gì chúng tôi tin rằng chúng tôi là.", groups: undefined]
 

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

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

  const csLewisQuote = 'Chúng tôi là những gì chúng tôi tin tưởng.';
const regex = / are / g;

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

Bạn sẽ không nhận được thông tin khác được bao gồm trong chế độ không toàn cục, nhưng bạn sẽ nhận được một mảng có tất cả các kết quả phù hợ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 = 'Chúng tôi là những gì chúng tôi tin tưởng. ';
const regex = / we / g;

csLewisQuote.match (regex); // ["chúng tôi", "chúng tôi"]
 

Trong trường hợp này, bạn đang đối sánh một chữ thường "w" theo sau là "e" viết thường, chỉ xuất hiện hai lần.

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

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

  const csLewisQuote = 'Chúng tôi là những gì chúng tôi tin tưởng.'. toLowerCase () ;
const regex = / we / g;

csLewisQuote.match (regex); // ["chúng tôi", "chúng tôi", "chúng tôi"]
 

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

< pre> const csLewisQuote = 'Chúng tôi là những gì chúng tôi tin tưởng.';
const regex = / we / gi;

csLewisQuote.match (regex); // ["Chúng tôi", "chúng tôi", "chúng tôi"]

Phương thức .matchAll () mới

Bây giờ bạn đã biết tất cả về Phương thức .match () , cần lưu ý rằng phương thức .matchAll () đã đượ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ục ( g ) và trả về một trong hai một trình lặp hoặc một mảng trống:

  const csLewisQuote = 'Chúng tôi là những gì chúng tôi tin tưởng.';
const regex1 = / we / gi;
const regex2 = / eat / gi;

[... csLewisQuote.matchAll (regex1)];
// [
// ["Chúng tôi", index: 0, input: "Chúng tôi là những gì chúng tôi tin rằng chúng tôi là.", Groups: undefined],
// ["chúng tôi", index: 12, input: "Chúng tôi là những gì chúng tôi tin rằng chúng tôi là.", groups: undefined]
// ["chúng tôi", index: 23, input: "Chúng tôi là những gì chúng tôi tin rằng chúng tôi là.", groups: undefined]
//]

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

Mặc dù có vẻ như chỉ là một phương thức .match () phức tạp hơn, nhưng ưu điểm chính mà .matchAll () mang lại là nó hoạt động tốt hơn với các nhóm nắm bắt.

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

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

csLewisRepeat.match (repeatRegex); // ["We We", "are"]
 

.match ()

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

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

// [
// ["We We", "We", index: 0, input: "We We are", groups: undefined],
// ["are are", "are", index: 6, input: "We are are", groups: undefined],
//]
 

.matchAll ()

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

Cách sử dụng phương thức .replace ()

Vậy là bạn đã biết cách kết hợ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 các kết quả phù hợ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 thứ khác . Ví dụ: bạn có thể muốn thay thế "trả phí" trong "payCodeCamp" bằng "miễn phí". Regex sẽ là một cách tốt để làm điều đó.

.match () .matchAll () trả về thông tin về chỉ mục cho mỗi 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 nó để thực hiện một số thao tác chuỗi ưa thích. Nhưng có một cách dễ dàng hơn - bằng cách sử dụng phương thức .replace () .

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

  const campString = 'payCodeCamp ';
const fCCString1 = campString.replace ('trả phí', 'miễn phí');
const fCCString2 = campString.replace (/ trả phí /, 'miễn phí');

console.log (campString); // "payCodeCamp"
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 gốc vẫn giữ nguyên.

Tương tự với < phương thức code> .match () , .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 regex với cờ g :

 const campString = 'payCodeCamp thật tuyệt vời. Bạn nên kiểm tra payCodeCamp. ';
const fCCString1 = campString.replace ('trả phí', 'miễn phí');
const fCCString2 = campString.replace (/ trả phí / g, 'miễn phí');

console.log (fCCString1); // "freeCodeCamp thật tuyệt vời. Bạn nên xem payCodeCamp."
console.log (fCCString2); // "freeCodeCamp thật tuyệt vời. Bạn nên xem 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 đối sánh có phân biệt chữ hoa chữ thường:

 < code class = "language-js"> const campString = 'PaidCodeCamp thật tuyệt vời. Bạn nên xem PaidCodeCamp. ';
const fCCString1 = campString.replace ('Trả phí', 'miễn phí');
const fCCString2 = campString.replace (/ trả phí / gi, 'miễn phí');

console.log (fCCString1); // "freeCodeCamp thật tuyệt vời. Bạn nên xem PaidCodeCamp."
console.log (fCCString2); // "freeCodeCamp thật tuyệt vời. Bạn nên xem freeCodeCamp."
 

Cách sử dụng phương thức .replaceAll ()

Chỉ như cách .match () có phương thức .matchAll () mới hơn, .replace () .replaceAll () mới hơn .

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

  const campString = 'payCodeCamp thật tuyệt vời. Bạn nên kiểm tra payCodeCamp. ';
const fCCString1 = campString.replaceAll ('trả phí', 'miễn phí');
const fCCString2 = campString.replaceAll (/ trả / g, 'miễn phí');

console.log (fCCString1); // "freeCodeCamp thật tuyệt vời. Bạn nên xem freeCodeCamp."
console.log (fCCString2); // "freeCodeCamp thật tuyệt vời. Bạn nên xem 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 nó vào một chuỗi làm đối số đầu tiên.

Vậy là xong! Bây giờ bạn đã biết những điều cơ bản về việc so khớp và thay thế các phần của chuỗi bằng regex và một số phương thức JS tích hợp sẵn. Đâ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 regex dù chỉ là một chút.

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


Xem thêm những thông tin liên quan đến chủ đề chuỗi đối sánh regex của javascript

Search a String by matching against a regex in JavaScript

  • Tác giả: bonsaiilabs
  • Ngày đăng: 2019-11-05
  • Đánh giá: 4 ⭐ ( 8038 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Browser JavaScript and Event Loop Course is available at http://bit.ly/39eDgEA

    Learn to match a String pattern inside another String using Regular Expression in JavaScript.
    This video teaches a use case on where this scenario might be useful and how regular expressions can help solve the problem
    We will use the String.match API in combination with regular expression in this video.
    We will also look at the API documentation available on Mozilla Developer Network (MDN)

    The code sample is available at https://bonsaiilabs.com/javascript-regex-match-strings/

    **********Watch all JavaScript Tutorials**********

    http://bit.ly/javascript-youtube

    ***************************************************

    Harit on Twitter: https://twitter.com/harittweets

    Subscribe for more videos on JavaScript with Visualization: https://www.youtube.com/channel/UC0yZBnRsD9JRqLXBkfGym0Q?sub_confirmation=1
    Follow bonsaiilabs on Twitter: https://twitter.com/bonsaiilabs
    Follow bonsaiilabs on Facebook: https://www.facebook.com/thebonsaiilabs
    Visit bonsaiilabs at https://bonsaiilabs.com

Hướng dẫn nhanh về phương pháp đối sánh chuỗi trong JavaScript

  • Tác giả: s18.galaxyz.net
  • Đánh giá: 5 ⭐ ( 9918 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phương thức chuỗi JavaScript

  • Tác giả: codefly.vn
  • Đánh giá: 3 ⭐ ( 5698 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

[Javascript] Những thứ bạn cần biết về Regular Expressions (RegEx)

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 4961 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này nhắm mục đích giúp bạn có thể tận dụng hiệu quả với các biểu thức chính quy với các ví dụ thực tế.

Regular Expression và RegExp trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 2262 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Regular Expression và RegExp trong JavaScript - Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Đếm số lần xuất hiện của ký tự trong chuỗi JavaScript với 3 cách cơ bản

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 3 ⭐ ( 5452 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn 3 cách cơ bản để đếm số lần xuất hiện của ký tự trong chuỗi JavaScript. Trong JavaScript không tồn tại phương pháp trực tiếp nào giúp chúng ta thực hiện đếm số lần xuất hiện của ký tự

Regular Expression trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 9583 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong JavaScript, biểu thức chính quy (Regular Expression hay 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.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách thụt lề mã HTML - Và tại sao nó lại quan trọng - mã cho thụt lề trong html