Các biểu thức chính quy của Javascript không gây khó khăn – đây là cách thiết kế của riêng bạn

0
0
Các biểu thức chính quy của Javascript không gây khó khăn – đây là cách thiết kế của riêng bạn

Lần đầu tiên tôi bắt gặp một biểu hiện đều đặn là nhiều năm trước, nhưng tôi vẫn nhớ những suy nghĩ đầu tiên của mình về nó:

  • Điều giống như chuỗi này là gì?
  • Tôi không muốn chạm vào nó, nó trông thật đáng sợ.
  • Tôi không nhớ chính xác regex đó đang làm gì, hoặc chính xác nó trông như thế nào, nhưng nó làm tôi sợ đến chết. Nhìn lại, bây giờ tôi nhận ra rằng nó thực sự không đáng sợ như vậy. Đối mặt, đó là một cách dễ dàng để giải quyết vấn đề trong tay. Nhưng tại sao tôi lại cảm thấy như vậy? Đó chỉ là sự vụng về của cú pháp, chúng chắc chắn trông lạ, và nếu bạn không biết chúng là gì, chúng trông rất phức tạp.

    Ý định của tôi ở đây là không làm bạn sợ vì regex có thể đơn giản. Nhưng nếu bạn chưa hiểu regex, nó có thể trông hơi nản chí, như ví dụ dưới đây:

    Trong bài viết này, tôi sẽ làm sáng tỏ các biểu thức thông thường. Tôi sẽ cho bạn biết chúng trông như thế nào, chúng được sử dụng để làm gì và làm thế nào bạn có thể thiết kế các biểu thức thông thường của bạn để giải quyết vấn đề.

    Vì vậy, đầu tiên. Biểu thức chính quy là gì?

    Biểu thức chính quy là một cách để mô tả các mẫu trong chuỗi dữ liệu. Chúng có cú pháp riêng, vì chúng là ngôn ngữ lập trình của riêng chúng, và có các phương thức và cách để tương tác với các biểu thức thông thường trong hầu hết (nếu không phải tất cả) ngôn ngữ lập trình.

    Nhưng chúng ta đang nói về loại mô hình nào? Các ví dụ phổ biến của biểu thức chính quy xác định ví dụ nếu một chuỗi nhất định là địa chỉ email hoặc số điện thoại hoặc chúng có thể được sử dụng để xác minh xem mật khẩu có đáp ứng độ phức tạp nhất định hay không.

    Một khi bạn có mẫu, bạn có thể làm gì với các biểu thức thông thường?

    • Xác thực một chuỗi với mẫu.
    • Tìm kiếm trong một chuỗi.
    • Thay thế các chuỗi con trong một chuỗi.
    • Trích xuất thông tin từ một chuỗi.

    Làm việc với các biểu thức chính quy

    Tôi cũng sẽ đề cập đến cách làm việc với các biểu thức thông thường trong JavaScript, mặc dù các khái niệm đã học ở đây cũng áp dụng cho các ngôn ngữ khác. Như đã nói, trong các ngôn ngữ khác có thể có một số khác biệt trong cách họ đối xử với các biểu thức thông thường.

    Hãy xem xét một ví dụ sẽ xác nhận nếu chuỗi có chứa từ Hello hay không.

    Trong JavaScript, có hai cách để tìm hiểu điều này:

    Constructor

    Nghĩa đen

    Trong cả hai kịch bản, regex biến là một đối tượng, hiển thị các phương thức khác nhau mà chúng ta có thể sử dụng để tương tác với biểu thức chính quy. Tuy nhiên, ví dụ đầu tiên có giao diện quen thuộc hơn, tạo ra một đối tượng với chuỗi là tham số. Trong kịch bản thứ hai, mọi thứ trông hơi kỳ lạ, có một cái gì đó tương tự như một chuỗi nhưng thay vì dấu ngoặc kép được gói trong /. Vì hóa ra cả hai cách đều biểu thị giống nhau, cá nhân tôi thích tùy chọn thứ hai, rất rõ ràng và các trình soạn thảo IDE hoặc mã có thể có cú pháp tô sáng trên biểu thức chính quy so với kịch bản đầu tiên trong đó mẫu biểu thức chính quy được định nghĩa chỉ là một chuỗi.

    Cho đến nay, các biểu thức chính quy của chúng tôi khá đơn giản, đó chỉ là kết hợp chính xác trên chuỗi Hello và nó hoạt động hoàn hảo cho JavaScript. Tuy nhiên, kết quả chúng tôi thu được có thể khác nhau đối với các ngôn ngữ khác, mặc dù biểu thức chính quy là như nhau. Điều này là do mỗi ngôn ngữ lập trình có thể xác định một số mặc định hoặc hành vi đặc biệt trong các biểu thức chính quy có thể thay đổi từ ngôn ngữ này sang ngôn ngữ khác. Rất xin lỗi về điều đó, nhưng đó chỉ là như vậy. Khi chúng tôi xây dựng một RegEx, đối với hầu hết các phần, nó sẽ giống nhau trong hầu hết các ngôn ngữ lập trình. Trước khi bạn sử dụng nó ở một nơi khác, bạn sẽ phải kiểm tra và điều chỉnh nó nếu cần thiết.

    Cách sử dụng khác nhau của biểu thức chính quy

    Khi làm việc với các biểu thức chính quy, về cơ bản chúng tôi làm việc với các phương thức đối tượng RegExp hoặc với các phương thức chuỗi cho phép chúng tôi tương tác với các biểu thức thông thường.

    RegExp.prototype.test ()

    Phương thức test () thực hiện tìm kiếm đối sánh giữa một biểu thức chính quy và một chuỗi được chỉ định. Trả về đúng hay sai.

    Đây là một ví dụ. Đầu tiên, hãy xem chuỗi đã chỉ định có chứa chuỗi foo không:

    RegExp.prototype.exec ()

    Phương thức exec () thực hiện tìm kiếm đối sánh trong một chuỗi đã chỉ định. Trả về một mảng kết quả, hoặc null.

    Ví dụ: Tìm tất cả các phiên bản của foo trong chuỗi đã cho:

    String.prototype.match ()

    Phương thức match () lấy kết quả của chuỗi khớp với biểu thức chính quy.

    Ví dụ: Tìm tất cả các chữ in hoa trên một chuỗi:

    String.prototype.match ALL ()

    Phương thức matchAll () trả về một trình vòng lặp của tất cả các kết quả khớp với một chuỗi so với biểu thức chính quy, bao gồm cả các nhóm bắt giữ.

    Ví dụ: Tìm sự xuất hiện của một chuỗi trong các nhóm:

    String.prototype.search ()

    Phương thức search () thực hiện tìm kiếm đối sánh giữa một biểu thức chính quy và đối tượng chuỗi này. Nó trả về chỉ mục mà tại đó kết quả khớp xảy ra hoặc -1 không có kết quả khớp.

    Ví dụ: Tìm vị trí của bất kỳ ký tự nào không phải là ký tự từ hoặc khoảng trắng:

    String.prototype.replace ()

    Phương thức thay thế () trả về một chuỗi mới với một số hoặc tất cả các kết quả khớp của mẫu được thay thế bằng một thay thế. Mẫu có thể là một chuỗi hoặc RegExp và thay thế có thể là một chuỗi hoặc một hàm được gọi cho mỗi kết quả khớp. Nếu mẫu là một chuỗi, chỉ có lần xuất hiện đầu tiên sẽ được thay thế.

    Lưu ý rằng chuỗi gốc sẽ không thay đổi.

    Ví dụ: Thay thế từ chó bằng khỉ:

    Không bị nhầm lẫn ở đây, phương thức thay thế () sử dụng các biểu thức chính quy, vì vậy ngay cả khi chúng ta truyền một chuỗi, nó sẽ được hiểu là một biểu thức chính quy và được thực thi như vậy. Do đó, lý do tại sao trên bàn điều khiển thứ hai.log con chó chỉ được thay thế một lần. Nhưng chúng tôi sẽ đề cập nhiều hơn về điều đó sau.

    String.prototype.replace ALL ()

    Phương thức thay thế () trả về một chuỗi mới với tất cả các kết quả khớp của mẫu được thay thế bằng một thay thế. Mẫu có thể là một chuỗi hoặc RegExp và thay thế có thể là một chuỗi hoặc một hàm được gọi cho mỗi kết quả khớp.

    Ví dụ: Thay thế từ ‘chó’ bằng ‘khỉ’:

    Nó tương tự như ví dụ trước của chúng tôi, nhưng bây giờ chúng tôi thay thế tất cả các trận đấu. Tôi thường tránh chức năng này vì tôi luôn có thể thực hiện nó với các biểu thức thông thường và sử dụng hàm thay thế () cộng với là một chức năng không được hỗ trợ trong tất cả các nền tảng / trình duyệt.

    String.prototype.split ()

    Phương thức split () chia một Chuỗi thành một tập hợp các chuỗi con theo thứ tự và đặt các chuỗi con này thành một mảng và trả về mảng. Việc phân chia được thực hiện bằng cách tìm kiếm một mẫu; trong đó mẫu được cung cấp làm tham số đầu tiên trong lệnh gọi của phương thức.

    Thí dụ:

    Xây dựng biểu thức chính quy

    Bây giờ chúng ta đã biết cách làm việc với các biểu thức chính quy và các phương thức khác nhau có sẵn để tương tác, hãy dành thời gian xây dựng các biểu thức chính quy để phù hợp với các mẫu chúng ta muốn.

    Neo

    /xin chào/

    Điều này sẽ phù hợp với xin chào bất cứ nơi nào nó được đặt trong chuỗi. Nếu bạn muốn khớp các chuỗi bắt đầu bằng ‘xin chào’, hãy sử dụng toán tử ^:

    Nếu bạn muốn khớp các chuỗi kết thúc bằng hello, hãy sử dụng toán tử $:

    Bạn cũng có thể kết hợp chúng để tìm các kết quả khớp chính xác như được thấy dưới đây:

    Để tìm các chuỗi có ký tự đại diện ở giữa, bạn có thể sử dụng. *, Khớp với bất kỳ ký tự nào được lặp lại từ 0 lần trở lên:

    Khớp các mục theo ký tự hoặc phạm vi số

    Một khi tính năng rất hay của biểu thức thông thường là khả năng khớp theo ký tự hoặc phạm vi số. Nhưng, ý của tôi là gì? Chà, nó giống như thế này:

    Các mẫu biểu thức chính quy này sẽ khớp khi có ít nhất một trong số các ký tự trong phạm vi khớp:

    Bạn cũng có thể kết hợp các phạm vi:

    Phủ định một mô hình

    Chúng ta đã thấy rằng ký tự ^ ở đầu một mẫu neo nó vào đầu chuỗi. Tuy nhiên, khi được sử dụng trong một phạm vi, nó phủ nhận nó:

    Có các ký tự đặc biệt trong các biểu thức chính quy, một số trong số chúng bao gồm:

    • 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 (cộng với dấu gạch dưới), tương đương với [A-Za-z_0-9]

    • W phù hợp với bất kỳ ký tự không chữ và số, bất cứ điều gì ngoại trừ [^A-Za-z_0-9]

    • s khớp với bất kỳ ký tự khoảng trắng nào: khoảng trắng, tab, dòng mới và khoảng trắng Unicode

    • S phù hợp với bất kỳ nhân vật nào không phải là khoảng trắng

    • phù hợp với null
    • n phù hợp với một nhân vật dòng mới

    • t khớp với một ký tự tab

    • uXXXX khớp với một ký tự unicode với mã XXXX (yêu cầu cờ u)

    • . phù hợp với bất kỳ ký tự nào không phải là char dòng mới (ví dụ n) (trừ khi bạn sử dụng cờ s, được giải thích sau)
    • [^] phù hợp với bất kỳ nhân vật, bao gồm các nhân vật dòng mới. Nó hữu ích trên các chuỗi đa dòng
    • 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ừ

    Lựa chọn biểu thức chính quy (hoặc)

    Nếu bạn muốn tìm kiếm một chuỗi hoặc một chuỗi khác, hãy sử dụng | nhà điều hành:

    Bộ định lượng

    Bộ định lượng là toán tử đặc biệt, đây là một số trong số họ:

    ?: bộ lượng hóa tùy chọn Hãy tưởng tượng bạn cần tìm nếu một chuỗi chứa một chữ số trong đó, chỉ một chữ số, bạn có thể làm một cái gì đó như:

    +: 1 quặng nhiều Kết hợp một hoặc nhiều mục (> = 1):

    *: 0 quặng nhiều hơn Kết hợp các mục cero hoặc nhiều hơn (> = 0):

    {n}: số lượng trận đấu cố định Các trận đấu chính xác ‘n’:

    {n, m}: n đến m số lượng trận đấu Các trận đấu giữa ‘n’ và ‘m’ lần:

    m cũng có thể được bỏ qua, trong trường hợp đó, nó sẽ khớp với ít nhất các mục ‘n’:

    Chạy trốn

    Như chúng ta đã thấy, có một số nhân vật có ý nghĩa đặc biệt, nhưng nếu chúng ta muốn khớp với những nhân vật đó thì sao? Có thể thoát các ký tự đặc biệt với, hãy xem một ví dụ:

    Các nhóm

    Sử dụng dấu ngoặc đơn, bạn có thể tạo các nhóm ký tự: (…):

    Bạn cũng có thể sử dụng vòng loại (như sự lặp lại hoặc vòng loại tùy chọn) cho một nhóm:

    Các nhóm cũng rất thú vị, đặc biệt là khi được sử dụng với các hàm như match () và exec () như chúng ta đã thấy trước đây, chúng có thể được chụp riêng:

    Ví dụ với exec ():

    Ví dụ với match ():

    Các nhóm bắt giữ được đặt tên

    Với ES2018 giờ đây có thể gán tên cho các nhóm, do đó làm việc với kết quả dễ dàng hơn nhiều. Bây giờ, hãy xem ví dụ sau mà không cần đặt tên nhóm:

    Hiện đang sử dụng các nhóm được đặt tên:

    Cờ

    Như chúng ta đã thấy trong ví dụ về hàm tạo, các biểu thức chính quy có một số cờ thay đổi hành vi cho các kết quả khớp:

    • 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: cho phép chế độ đa dòng. Trong chế độ này, ^ và $ khớp với điểm bắt đầu và kết thúc 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 đầu và cuối của mỗi dòng.

    • u: cho phép hỗ trợ cho unicode (được giới thiệu trong ES6 / ES2015)

    • s: viết tắt của dòng đơn, nó gây ra. để phù hợp với các nhân vật dòng mới là tốt

    Cờ có thể được kết hợp và trong trường hợp chữ regex, chúng được đặt ở cuối biểu thức chính:

    Hoặc sử dụng hàm tạo làm tham số thứ hai của hàm:

    Đó là rất nhiều, đủ với điều đó, hãy xem một số ví dụ thú vị:

    Mật khẩu mạnh

    Điều này kiểm tra độ mạnh của mật khẩu và nó đặc biệt hữu ích nếu bạn muốn xây dựng trình xác nhận mật khẩu của riêng mình. Tôi biết điều này là chủ quan, vì các dịch vụ khác nhau có thể có nhu cầu khác nhau, nhưng đó là một nơi tuyệt vời để bắt đầu.

    Xác thực địa chỉ email

    Đây có lẽ là một trong những trường hợp nổi tiếng nhất đối với các biểu thức thông thường, xác thực địa chỉ email.

    Các địa chỉ IP

    V4:

    Động cơ V6:

    Kéo tên miền từ URL

    Kéo nguồn hình ảnh

    Số thẻ tín dụng

    Biểu thức thông thường là một tính năng rất mạnh mẽ, có thể đáng sợ lúc đầu. Nhưng một khi bạn hiểu rõ về chúng, chúng sẽ rất tuyệt. Hôm nay chúng ta đã học được chúng là gì, cách sử dụng chúng và cách xây dựng chúng và một số ví dụ thú vị. Tôi hy vọng lần tới khi bạn nhìn thấy một trong số chúng trong các dự án của bạn, bạn sẽ không chạy trốn (như tôi đã làm) và bạn cố gắng hiểu nó và làm việc với nó.



    Nguồn The Next Web

    BÌNH LUẬN

    Vui lòng nhập bình luận của bạn
    Vui lòng nhập tên của bạn ở đây