Phương thức của RegExp và chuỗi – chuỗi javascript khớp với regex

Bạn đang xem : chuỗi javascript đối sánh với regex

Trong bài viết này, chúng tôi sẽ đề cập đến các phương pháp khác nhau hoạt động chuyên sâu với regexps.

Phương thức str.match (regexp) tìm các kết quả phù hợp cho regexp trong chuỗi str .

Nó có 3 chế độ:

  1. Nếu regexp không có cờ g , thì nó sẽ trả về kết quả phù hợp đầu tiên dưới dạng một mảng có thu thập các nhóm và thuộc tính index (vị trí khớp), input (chuỗi nhập, bằng str ):


      let str = "Tôi yêu JavaScript";
    
    let result = str.match (/ Java (Script) /);
    
    alert (kết quả [0]); // JavaScript (đối sánh đầy đủ)
    alert (kết quả [1]); // Tập lệnh (nhóm chụp đầu tiên)
    cảnh báo (result.length); // 2
    
    // Thông tin thêm:
    alert (result.index); // 7 (khớp vị trí)
    cảnh báo (result.input); // Tôi thích JavaScript (chuỗi nguồn)  
  2. Nếu regexp có cờ g , thì nó sẽ trả về một mảng tất cả các kết quả phù hợp dưới dạng chuỗi, không ghi nhóm và các chi tiết khác.

      let str = "Tôi yêu JavaScript";
    
    let result = str.match (/ Java (Script) / g);
    
    alert (kết quả [0]); // JavaScript
    cảnh báo (result.length); // 1  
  3. Nếu không có kết quả phù hợp nào, bất kể có cờ g hay không, null sẽ được trả về.

    Đó là một sắc thái quan trọng. Nếu không có kết quả phù hợp nào, chúng tôi sẽ không nhận được một mảng trống, mà là null . Rất dễ mắc lỗi khi quên nó, ví dụ:


      let str = "Tôi yêu JavaScript";
    
    let result = str.match (/ HTML /);
    
    alert (kết quả); // vô giá trị
    cảnh báo (result.length); // Lỗi: Không thể đọc thuộc tính 'length' là null  

    Nếu chúng ta muốn kết quả là một mảng, chúng ta có thể viết như sau:

      let result = str.match (regexp) || [];  

Một bổ sung gần đây

Đây là phần bổ sung gần đây cho ngôn ngữ. Các trình duyệt cũ có thể cần polyfills

Phương thức str.matchAll (regexp) là một biến thể “mới hơn, được cải tiến” của str.match < / code>.

Nó được sử dụng chủ yếu để tìm kiếm tất cả các kết quả phù hợp với tất cả các nhóm.

Có 3 điểm khác biệt so với match :

  1. Nó trả về một đối tượng có thể lặp lại với các kết quả phù hợp thay vì một mảng. Chúng ta có thể tạo một mảng thông thường từ nó bằng cách sử dụng Array.from .
  2. Mọi kết quả phù hợp được trả về dưới dạng một mảng có các nhóm bắt (cùng định dạng với str.match mà không có cờ g ).
  3. Nếu không có kết quả, nó trả về một đối tượng rỗng có thể lặp lại thay vì null .

Ví dụ về cách sử dụng:


  let str = '& lt; h1 & gt; Hello, world! & lt; / h1 & gt;';
hãy để regexp = /<(.*?)>/g;

let matchAll = str.matchAll (regexp);

cảnh báo (matchAll); // [đối tượng RegExp String Iterator], không phải mảng, nhưng có thể lặp lại

matchAll = Array.from (matchAll); // mảng bây giờ

let firstMatch = matchAll [0];
alert (firstMatch [0]); // & lt; h1 & gt;
alert (firstMatch [1]); // h1
alert (firstMatch.index); // 0
cảnh báo (firstMatch.input); // & lt; h1 & gt; Hello, world! & lt; / h1 & gt;  

Nếu chúng tôi sử dụng for..of để lặp lại các kết quả trùng khớp matchAll , thì chúng tôi không cần Array.from nữa. < / p>

Tách chuỗi bằng cách sử dụng regexp (hoặc một chuỗi con) làm dấu phân cách.

Chúng tôi có thể sử dụng split với các chuỗi, như sau:


  alert ('12 -34-56'.split ('-')) // mảng ['12', '34', '56']  

Nhưng chúng ta có thể chia theo một biểu thức chính quy, theo cùng một cách:


  alert ('12, 34, 56'.split (/, \ s * /)) // mảng ['12', '34', ' 56 ']  

Phương thức str.search (regexp) trả về vị trí của kết quả phù hợp đầu tiên hoặc -1 nếu không tìm thấy:


  let str = "Một giọt mực có thể khiến cả triệu người phải suy nghĩ";

alert (str.search (/ ink / i)); // 10 (vị trí khớp đầu tiên)  

Hạn chế quan trọng: search chỉ tìm thấy kết quả phù hợp đầu tiên.

Nếu chúng ta cần các vị trí của các kết quả phù hợp hơn, chúng ta nên sử dụng các phương tiện khác, chẳng hạn như tìm tất cả chúng bằng str.matchAll (regexp) .

Đây là một phương pháp chung để tìm kiếm và thay thế, một trong những phương pháp hữu ích nhất. Con dao quân đội Thụy Sĩ để tìm kiếm và thay thế.

Chúng tôi có thể sử dụng nó mà không cần regexps, để tìm kiếm và thay thế một chuỗi con:


  // thay thế dấu gạch ngang bằng dấu hai chấm
alert ('12 -34-56'.replace ("-", ":")) // 12: 34-56  

Tuy nhiên, vẫn có một cạm bẫy.

Khi đối số đầu tiên của Replace là một chuỗi, nó chỉ thay thế đối số đầu tiên.

Bạn có thể thấy rằng trong ví dụ trên: chỉ "-" đầu tiên được thay thế bằng ":" .

Để tìm tất cả các dấu gạch ngang, chúng ta không cần sử dụng chuỗi "-" mà là regexp / - / g , với < code class = "pattern"> g flag:


  // thay thế tất cả các dấu gạch ngang bằng dấu hai chấm
alert ('12 -34-56'.replace (/ - / g, ":")) // 12:34:56  

Đối số thứ hai là một chuỗi thay thế. Chúng ta có thể sử dụng các ký tự đặc biệt trong đó:

Ký hiệu
Hành động trong chuỗi thay thế

$ & amp;
chèn toàn bộ trận đấu

$ `
chèn một phần của chuỗi trước trận đấu

$ '
chèn một phần của chuỗi sau trận đấu

$ n
nếu n là một số có 1-2 chữ số, hãy chèn nội dung của nhóm chụp thứ n, để biết chi tiết, hãy xem Chụp nhóm
$ & lt; name & gt;
chèn nội dung của dấu ngoặc đơn với name đã cho, để biết chi tiết, hãy xem Chụp nhóm
$$
chèn ký tự $

Ví dụ:


  let str = "John Smith";

// hoán đổi họ và tên
alert (str.replace (/ (john) (smith) / i, '$ 2, $ 1')) // Smith, John  

Đối với các tình huống yêu cầu thay thế “thông minh”, đối số thứ hai có thể là một hàm.

Nó sẽ được gọi cho mỗi trận đấu và giá trị trả về sẽ được chèn vào để thay thế.

Hàm được gọi với các đối số func (match, p1, p2, ..., pn, offset, input, groups) :

  1. match – trận đấu,
  2. p1, p2, ..., pn – nội dung của các nhóm chụp (nếu có),
  3. offset – vị trí của khớp,
  4. input – chuỗi nguồn,
  5. nhóm – một đối tượng có các nhóm được đặt tên.

Nếu không có dấu ngoặc đơn trong regexp, thì chỉ có 3 đối số: func (str, offset, input) .

Ví dụ: hãy viết hoa tất cả các kết quả phù hợp:


  let str = "html và css";

let result = str.replace (/ html | css / gi, str = & gt; str.toUpperCase ());

alert (kết quả); // HTML và CSS  

Thay thế từng kết quả phù hợp theo vị trí của nó trong chuỗi:

Trong ví dụ bên dưới có hai dấu ngoặc đơn, vì vậy hàm thay thế được gọi với 5 đối số: đối số đầu tiên là khớp đầy đủ, sau đó là 2 dấu ngoặc đơn và sau nó (không được sử dụng trong ví dụ) là vị trí khớp và chuỗi nguồn :


 let str = "John Smith";

let result = str.replace (/ (\ w +) (\ w +) /, (khớp, tên, họ) = & gt; `$ {họ}, $ {name}`);

alert (kết quả); // Smith, John  

Nếu có nhiều nhóm, sẽ thuận tiện khi sử dụng các thông số còn lại để truy cập chúng:


  let str = "John Smith";

let result = str.replace (/ (\ w +) (\ w +) /, (... match) = & gt; `$ {match [2]}, $ {match [1]}`);

alert (kết quả); // Smith, John  

Hoặc, nếu chúng tôi đang sử dụng các nhóm được đặt tên, thì đối tượng groups với chúng luôn là đối tượng cuối cùng, vì vậy chúng tôi có thể lấy nó như sau:


  let str = "John Smith";

let result = str.replace (/ (? & lt; name & gt; \ w +) (? & lt; họ & gt; \ w +) /, (... match) = & gt; {
  let groups = match.pop ();

  trả về `$ {groups.surname}, $ {groups.name}`;
});

alert (kết quả); // Smith, John  

Việc sử dụng một hàm mang lại cho chúng ta sức mạnh thay thế cuối cùng vì hàm đó nhận được tất cả thông tin về trận đấu, có quyền truy cập vào các biến bên ngoài và có thể làm mọi thứ.

Phương thức này về cơ bản giống với str.replace , với hai điểm khác biệt chính:

  1. Nếu đối số đầu tiên là một chuỗi, đối số này sẽ thay thế tất cả các lần xuất hiện của chuỗi, trong khi thay thế chỉ thay thế lần xuất hiện đầu tiên.
  2. Nếu đối số đầu tiên là một biểu thức chính quy không có cờ g , thì sẽ có lỗi. Với cờ g , nó hoạt động giống như Replace .

Trường hợp sử dụng chính của ReplaceAll là thay thế tất cả các lần xuất hiện của một chuỗi.

Như thế này:


  // thay thế tất cả các dấu gạch ngang bằng dấu hai chấm
alert ('12 -34-56'.replaceAll ("-", ":")) // 12:34:56  

Phương thức regexp.exec (str) trả về kết quả phù hợp cho regexp trong chuỗi str . Không giống như các phương thức trước, nó được gọi trên regexp, không phải trên một chuỗi.

Nó hoạt động khác nhau tùy thuộc vào việc regexp có cờ g hay không.

Nếu không có g , thì regexp.exec (str) trả về kết quả khớp đầu tiên chính xác là str.match (regexp) < / mã>. Hành vi này không mang lại điều gì mới mẻ.

Nhưng nếu có cờ g , thì:

  • Lệnh gọi tới regexp.exec (str) trả về kết quả phù hợp đầu tiên và lưu vị trí ngay sau nó trong thuộc tính regexp.lastIndex .
  • Lệnh gọi tiếp theo như vậy sẽ bắt đầu tìm kiếm từ vị trí regexp.lastIndex , trả về kết quả khớp tiếp theo và lưu vị trí sau nó trong regexp.lastIndex .
  • … Và như vậy.
  • Nếu không có kết quả phù hợp nào, regexp.exec trả về null và đặt lại regexp.lastIndex thành 0 .

Vì vậy, các lệnh gọi lặp lại lần lượt trả về tất cả các kết quả phù hợp, sử dụng thuộc tính regexp.lastIndex để theo dõi vị trí tìm kiếm hiện tại.

Trước đây, trước khi phương thức str.matchAll được thêm vào JavaScript, các lệnh gọi regexp.exec đã được sử dụng trong vòng lặp để nhận tất cả các kết quả khớp với các nhóm: < / p>

  let str = 'Tìm hiểu thêm về JavaScript tại https://javascript.info';
hãy để regexp = / javascript / ig;

cho kết quả;

while (result = regexp.exec (str)) {
  alert (`Đã tìm thấy $ {result [0]} tại vị trí $ {result.index}`);
  // Tìm thấy JavaScript ở vị trí 11, sau đó
  // Tìm thấy javascript ở vị trí 33
}  

Tính năng này hiện cũng hoạt động, mặc dù đối với các trình duyệt mới hơn str.matchAll thường thuận tiện hơn.

Chúng tôi có thể sử dụng regexp.exec để tìm kiếm từ một vị trí nhất định bằng cách đặt thủ công lastIndex .

Ví dụ:


  let str = 'Hello, world!';

hãy để regexp = / \ w + / g; // không có cờ "g", thuộc tính lastIndex bị bỏ qua
regexp.lastIndex = 5; // tìm kiếm từ vị trí thứ 5 (từ dấu phẩy)

alert (regexp.exec (str)); // thế giới  

Nếu regexp có cờ y, sau đó tìm kiếm sẽ được thực hiện chính xác tại vị trí regexp.lastIndex , không phải bất kỳ vị trí nào khác.

Hãy thay thế cờ g bằng y trong ví dụ trên. Sẽ không có kết quả phù hợp nào vì không có từ nào ở vị trí 5 :


  let str = 'Hello, world!';

hãy để regexp = / \ w + / y;
regexp.lastIndex = 5; // tìm kiếm chính xác ở vị trí 5

alert (regexp.exec (str)); // rỗng  

Điều đó thuận tiện cho các tình huống khi chúng ta cần “đọc” một thứ gì đó từ chuỗi bằng regexp ở vị trí chính xác, không phải ở đâu xa hơn.

Phương thức regexp.test (str) tìm kiếm một kết quả phù hợp và trả về true / false cho dù nó có tồn tại hay không.

Ví dụ:


  let str = "Tôi yêu JavaScript";

// hai bài kiểm tra này làm giống nhau
alert (/love/i.test(str)); // thật
alert (str.search (/ love / i)! = -1); // true  

Một ví dụ với câu trả lời phủ định:


  let str = "Bla-bla-bla";

alert (/love/i.test(str)); // sai
alert (str.search (/ love / i)! = -1); // sai  

Nếu regexp có cờ g , thì regexp.test sẽ tìm từ thuộc tính regexp.lastIndex và cập nhật thuộc tính này , giống như regexp.exec .

Vì vậy, chúng tôi có thể sử dụng nó để tìm kiếm từ một vị trí nhất định:


  let regexp = / love / gi;

let str = "Tôi yêu JavaScript";

// bắt đầu tìm kiếm từ vị trí 10:
regexp.lastIndex = 10;
alert (regexp.test (str)); // false (không khớp)  

Cùng một regexp toàn cầu được thử nghiệm nhiều lần trên các nguồn khác nhau có thể không thành công

Nếu chúng tôi áp dụng cùng một regexp chung cho các đầu vào khác nhau, điều đó có thể dẫn đến kết quả sai, vì regexp.test gọi thuộc tính regexp.lastIndex , vì vậy tìm kiếm trong một chuỗi khác có thể bắt đầu từ vị trí khác không.

Ví dụ: ở đây chúng tôi gọi regexp.test hai lần trên cùng một văn bản và lần thứ hai không thành công:


  let regexp = / javascript / g; // (regexp vừa tạo: regexp.lastIndex = 0)

alert (regexp.test ("javascript")); // true (regexp.lastIndex = 10 now)
alert (regexp.test ("javascript")); // sai  

Đó chính xác là vì regexp.lastIndex khác 0 trong thử nghiệm thứ hai.

Để giải quyết vấn đề đó, chúng tôi có thể đặt regexp.lastIndex = 0 trước mỗi lần tìm kiếm. Hoặc thay vì gọi các phương thức trên regexp, hãy sử dụng các phương thức chuỗi str.match / search / ... , chúng không sử dụng lastIndex .


Xem thêm những thông tin liên quan đến chủ đề chuỗi javascript khớp với regex

Search a String by matching against a regex in JavaScript

  • Tác giả: bonsaiilabs
  • Ngày đăng: 2019-11-05
  • Đánh giá: 4 ⭐ ( 6718 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

Regular Expression và RegExp trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 5568 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.

Kiểm tra xem một chuỗi có khớp với biểu thức chính quy trong JS không

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 7684 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Sử dụng regex.test()nếu tất cả những gì bạn muốn là kết quả boolean: console.log(/^([a-z0-9]{5,})$/.test('abc1')); // false…

Xử lý chuỗi trong JavaScript

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

Biểu thức chính quy Regex trong javascript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 4195 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: I. Giới thiệu

Regular Expression trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 6820 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.

Toàn tập về biểu thức chính quy RegEx trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 1557 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức chính quy (Regular Expression) để xử lý chuỗi nâng cao, đây là phương pháp xử lý chuôi phức.

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 tạo đồ thị HTML hoạt hình bằng CSS và jQuery - Tạp chí Smashing - cách tạo đồ thị trong html