Regexes Got Good: Lịch sử và tương lai của biểu thức chính quy trong JavaScript

[theanh]

Biểu thức chính quy JavaScript hiện đại đã có nhiều tiến bộ so với những gì bạn có thể quen thuộc. Regexes có thể là một công cụ tuyệt vời để tìm kiếm và thay thế văn bản, nhưng chúng có tiếng xấu từ lâu (có lẽ là lỗi thời, như tôi sẽ chỉ ra) là khó viết và khó hiểu.

Điều này đặc biệt đúng trong thế giới JavaScript, nơi regexes đã bị lãng quên trong nhiều năm, kém mạnh hơn so với các đối tác hiện đại hơn của chúng trong PCRE, Perl, .NET, Java, Ruby, C++ và Python. Những ngày đó đã qua rồi.

Trong bài viết này, tôi sẽ kể lại lịch sử cải tiến của các biểu thức chính quy JavaScript (spoiler: ES2018 và ES2024 đã thay đổi cuộc chơi), đưa ra các ví dụ về các tính năng biểu thức chính quy hiện đại đang hoạt động, giới thiệu cho bạn một thư viện JavaScript nhẹ giúp JavaScript sánh ngang hoặc vượt trội hơn các phiên bản biểu thức chính quy hiện đại khác và kết thúc bằng bản xem trước các đề xuất đang hoạt động sẽ tiếp tục cải tiến các biểu thức chính quy trong các phiên bản JavaScript trong tương lai (một số trong số chúng đã hoạt động trong trình duyệt của bạn ngay hôm nay).

Lịch sử của các biểu thức chính quy trong JavaScript​

ECMAScript 3, được chuẩn hóa vào năm 1999, đã giới thiệu các biểu thức chính quy lấy cảm hứng từ Perl vào ngôn ngữ JavaScript. Mặc dù nó có đủ mọi thứ đúng để khiến các biểu thức chính quy trở nên khá hữu ích (và chủ yếu tương thích với các phiên bản lấy cảm hứng từ Perl khác), nhưng vẫn có một số thiếu sót lớn, ngay cả khi đó. Trong khi JavaScript chờ đợi 10 năm cho phiên bản chuẩn hóa tiếp theo với ES5, các ngôn ngữ lập trình và triển khai biểu thức chính quy khác đã thêm các tính năng mới hữu ích giúp biểu thức chính quy của chúng mạnh mẽ và dễ đọc hơn.

Nhưng đó là lúc đó.

Bạn có biết rằng hầu như mọi phiên bản JavaScript mới đều có ít nhất những cải tiến nhỏ đối với biểu thức chính quy không?

Chúng ta hãy cùng xem xét chúng.

Đừng lo lắng nếu bạn thấy khó hiểu ý nghĩa của một số tính năng sau đây — chúng ta sẽ xem xét kỹ hơn một số tính năng chính sau.

• ES5 (2009) đã khắc phục hành vi không trực quan bằng cách tạo một đối tượng mới mỗi khi các ký tự biểu thức chính quy được đánh giá và cho phép các ký tự biểu thức chính quy sử dụng các dấu gạch chéo không thoát trong các lớp ký tự (/[/]/).
• ES6/ES2015 đã thêm hai cờ biểu thức chính quy mới: y (sticky), giúp sử dụng biểu thức chính quy dễ dàng hơn trong trình phân tích cú pháp và u (unicode), bổ sung một số cải tiến quan trọng liên quan đến Unicode cùng với các lỗi nghiêm ngặt. Nó cũng bổ sung phương thức lấy RegExp.prototype.flags, hỗ trợ cho việc phân lớp RegExp và khả năng sao chép một biểu thức chính quy trong khi thay đổi các cờ của nó.
• ES2018 là phiên bản cuối cùng đã làm cho các biểu thức chính quy JavaScript trở nên khá tốt. Nó bổ sung cờ s (dotAll), lookbehind, named capture và các thuộc tính Unicode (thông qua \p{...} và \P{...}, yêu cầu cờ u của ES6). Tất cả những tính năng này đều cực kỳ hữu ích, như chúng ta sẽ thấy.
• ES2020 đã thêm phương thức chuỗi matchAll, mà chúng ta cũng sẽ thấy nhiều hơn trong thời gian ngắn nữa.
• ES2022 đã thêm cờ d (hasIndices), cung cấp chỉ mục bắt đầu và kết thúc cho các chuỗi con khớp.
• Và cuối cùng, ES2024 đã thêm cờ v (unicodeSets) như một bản nâng cấp cho cờ u của ES6. Cờ v thêm một tập hợp các "thuộc tính của chuỗi" đa ký tự vào \p{...}, các phần tử đa ký tự trong các lớp ký tự thông qua \p{...} và \q{...}, các lớp ký tự lồng nhau, phép trừ tập hợp [A--B] và phép giao [A&&B], và các quy tắc thoát khác nhau trong các lớp ký tự. Nó cũng sửa lỗi khớp không phân biệt chữ hoa chữ thường đối với các thuộc tính Unicode trong các tập hợp phủ định [^...].

Về việc bạn có thể sử dụng an toàn các tính năng này trong mã của mình hiện nay hay không, câu trả lời là có! Tính năng mới nhất trong số này, cờ v, được hỗ trợ trong các trình duyệt Node.js 20 và thời đại 2023. Phần còn lại được hỗ trợ trong các trình duyệt thời đại 2021 hoặc cũ hơn.

Mỗi phiên bản từ ES2019 đến ES2023 cũng bổ sung thêm các thuộc tính Unicode có thể được sử dụng thông qua \p{...} và \P{...}. Và để hoàn thiện, ES2021 đã thêm phương thức chuỗi replaceAll — mặc dù khi đưa cho một biểu thức chính quy, điểm khác biệt duy nhất so với replace của ES3 là phương thức này sẽ ném nếu không sử dụng cờ g.

Ngoài lề: Điều gì làm cho một biểu thức chính quy trở nên tốt?​

Với tất cả những thay đổi này, biểu thức chính quy JavaScript hiện xếp hạng như thế nào so với các biểu thức khác? Có nhiều cách để suy nghĩ về điều này, nhưng sau đây là một số khía cạnh chính:

• Hiệu suất.
  Đây là một khía cạnh quan trọng nhưng có lẽ không phải là khía cạnh chính vì các triển khai regex trưởng thành thường khá nhanh. JavaScript mạnh về hiệu suất regex (ít nhất là khi xem xét công cụ Irregexp của V8, được sử dụng bởi Node.js, các trình duyệt dựa trên Chromium và thậm chí cả Firefox; và JavaScriptCore, được sử dụng bởi Safari), nhưng nó sử dụng một công cụ quay lui thiếu cú pháp để kiểm soát quay lui — một hạn chế lớn khiến lỗ hổng ReDoS trở nên phổ biến hơn.
• Hỗ trợ các tính năng nâng cao xử lý các trường hợp sử dụng phổ biến hoặc quan trọng.
  Ở đây, JavaScript đã nâng cao trò chơi của mình với ES2018 và ES2024. JavaScript hiện là tốt nhất trong lớp đối với một số tính năng như lookbehind (với hỗ trợ độ dài vô hạn) và các thuộc tính Unicode (với "thuộc tính của chuỗi" nhiều ký tự, phép trừ và giao của tập hợp và phần mở rộng tập lệnh). Các tính năng này không được hỗ trợ hoặc không mạnh mẽ trong nhiều phiên bản khác.
• Khả năng viết các mẫu có thể đọc được và duy trì được.
  Ở đây, JavaScript gốc từ lâu đã là phiên bản tệ nhất trong các phiên bản chính vì nó thiếu cờ x ("mở rộng") cho phép khoảng trắng và chú thích không đáng kể. Ngoài ra, nó còn thiếu các chương trình con regex và nhóm định nghĩa chương trình con (từ PCRE và Perl), một tập hợp các tính năng mạnh mẽ cho phép viết các biểu thức chính quy ngữ pháp xây dựng các mẫu phức tạp thông qua thành phần.

Vì vậy, nó hơi hỗn tạp.

JavaScript regexs đã trở nên cực kỳ mạnh mẽ, nhưng chúng vẫn còn thiếu các tính năng chính các tính năng có thể làm cho regex an toàn hơn, dễ đọc hơn và dễ bảo trì hơn (tất cả đều khiến một số người không sử dụng sức mạnh này).
“

Tin tốt là tất cả những lỗ hổng này đều có thể được lấp đầy bằng thư viện JavaScript, chúng ta sẽ xem xét sau trong bài viết này.

Sử dụng các tính năng regex hiện đại của JavaScript​

Hãy cùng xem xét một số tính năng regex hiện đại hữu ích hơn mà bạn có thể ít quen thuộc hơn. Bạn nên biết trước rằng đây là hướng dẫn nâng cao ở mức trung bình. Nếu bạn tương đối mới với regex, đây là một số hướng dẫn tuyệt vời mà bạn có thể muốn bắt đầu:

• RegexLearn và RegexOne là các hướng dẫn tương tác bao gồm các bài tập thực hành.
• Chương biểu thức chính quy của JavaScript.info là hướng dẫn chi tiết và dành riêng cho JavaScript.
• Giải mã biểu thức chính quy (video) là bài thuyết trình tuyệt vời dành cho người mới bắt đầu của Lea Verou tại HolyJS 2017.
• Học biểu thức chính quy trong 20 phút (video) là hướng dẫn cú pháp trực tiếp trong regex tester.

Named Capture​

Thông thường, bạn muốn làm nhiều hơn là chỉ kiểm tra xem regex có khớp không — bạn muốn trích xuất các chuỗi con từ kết quả khớp và thực hiện một số thao tác với chúng trong mã của mình. Nhóm named capture cho phép bạn thực hiện thao tác này theo cách giúp regex và mã của bạn dễ đọc hơn và tự ghi chú.

Ví dụ sau khớp một bản ghi với hai trường ngày và ghi lại các giá trị:

const record = 'Admitted: 2024-01-01\nReleased: 2024-01-03';const re = /^Admitted: (?\d{4}-\d{2}-\d{2})\nReleased: (?\d{4}-\d{2}-\d{2})$/;const match = record.match(re);console.log(match.groups);/* → { admission: '2024-01-01', releases: '2024-01-03'} */

Đừng lo lắng — mặc dù regex này có thể khó hiểu, nhưng sau này, chúng ta sẽ xem xét cách làm cho nó dễ đọc hơn nhiều. Những điều quan trọng ở đây là các nhóm bắt giữ được đặt tên sử dụng cú pháp (?...) và kết quả của chúng được lưu trữ trên đối tượng groups của các kết quả khớp.

Bạn cũng có thể sử dụng các tham chiếu ngược được đặt tên để khớp lại bất kỳ thứ gì mà nhóm bắt giữ được đặt tên khớp qua \k và bạn có thể sử dụng các giá trị trong tìm kiếm và thay thế như sau:

// Đổi 'FirstName LastName' thành 'LastName, FirstName'const name = 'Shaquille Oatmeal';name.replace(/(?\w+) (?\w+)/, '$, $');// → 'Oatmeal, Shaquille'

Đối với những người dùng regex nâng cao muốn sử dụng tham chiếu ngược được đặt tên trong hàm gọi lại thay thế, đối tượng groups được cung cấp làm đối số cuối cùng. Sau đây là một ví dụ thú vị:

function fahrenheitToCelsius(str) { const re = /(?-?\d+(\.\d+)?)F\b/g; return str.replace(re, (...args) => { const groups = args.at(-1); return Math.round((groups.degrees - 32) * 5/9) + 'C'; });}fahrenheitToCelsius('98.6F');// → '37C'fahrenheitToCelsius('Nhiệt độ cao nhất ngày 9 tháng 5 là 40F và nhiệt độ thấp nhất là 21F');// → 'Nhiệt độ cao nhất ngày 9 tháng 5 là 4C và nhiệt độ thấp nhất là -6C'

Lookbehind​

Lookbehind (được giới thiệu trong ES2018) là phần bổ sung cho lookahead, vốn luôn được hỗ trợ bởi các biểu thức chính quy JavaScript. Lookahead và lookbehind là các khẳng định (tương tự như ^ đối với phần bắt đầu của chuỗi hoặc \b đối với ranh giới từ) không sử dụng bất kỳ ký tự nào làm một phần của phép khớp. Lookbehind thành công hay thất bại dựa trên việc mẫu con của chúng có thể được tìm thấy ngay trước vị trí khớp hiện tại hay không.

Ví dụ: regex sau sử dụng lookbehind (?\w)/g;for (const match of str.matchAll(re)) { const {char1, char2} = match.groups; // In từng kết quả khớp hoàn chỉnh và các mẫu con khớp console.log(`Đã khớp "${match[0]}" với "${char1}" và "${char2}"`);}[/CODE] [B]Lưu ý[/b]: [I][ICODE]matchAll yêu cầu các biểu thức chính quy của nó sử dụng cờ g (toàn cục). Ngoài ra, giống như các trình lặp khác, bạn có thể lấy tất cả kết quả của nó dưới dạng một mảng bằng cách sử dụng Array.from hoặc phân tán mảng.[/I]

const matches = [...str.matchAll(/./g)];

Thuộc tính Unicode​

Thuộc tính Unicode (được thêm vào ES2018) cung cấp cho bạn khả năng kiểm soát mạnh mẽ đối với văn bản đa ngôn ngữ, bằng cách sử dụng cú pháp \p{...} và phiên bản phủ định của nó \P{...}. Có hàng trăm thuộc tính khác nhau mà bạn có thể khớp, bao gồm nhiều loại danh mục Unicode, tập lệnh, phần mở rộng tập lệnh và thuộc tính nhị phân.

Lưu ý: Để biết thêm chi tiết, hãy xem tài liệu trên MDN.

Thuộc tính Unicode yêu cầu sử dụng cờ u (unicode) hoặc v (unicodeSets).

Cờ v​

Cờ v (unicodeSets) đã được thêm vào ES2024 và là bản nâng cấp của cờ u — bạn không thể sử dụng cả hai cùng một lúc. Thực hành tốt nhất là luôn sử dụng một trong những cờ này để tránh vô tình đưa lỗi vào thông qua chế độ mặc định không nhận biết Unicode. Quyết định sử dụng cờ nào khá đơn giản. Nếu bạn chỉ hỗ trợ các môi trường có cờ v (trình duyệt Node.js 20 và 2023), thì hãy sử dụng cờ v; nếu không, hãy sử dụng cờ u.

Cờ v bổ sung hỗ trợ cho một số tính năng regex mới, trong đó tuyệt nhất có lẽ là phép trừ và phép giao. Điều này cho phép sử dụng A--B (trong các lớp ký tự) để khớp các chuỗi trong A nhưng không khớp trong B hoặc sử dụng A&&B để khớp các chuỗi trong cả A và B. Ví dụ:

// Phù hợp với tất cả các ký hiệu Hy Lạp ngoại trừ chữ cái 'π'/[\p{Script_Extensions=Greek}--π]/v// Chỉ phù hợp với các chữ cái Hy Lạp/[\p{Script_Extensions=Greek}&&\p{Letter}]/v

Để biết thêm chi tiết về cờ v, bao gồm các tính năng mới khác, hãy xem giải thích này từ nhóm Google Chrome.

Một từ về Biểu tượng cảm xúc phù hợp​

Biểu tượng cảm xúc thật tuyệt vời, nhưng cách biểu tượng cảm xúc được mã hóa trong văn bản lại rất phức tạp. Nếu bạn đang cố gắng khớp chúng với một biểu thức chính quy, điều quan trọng là phải biết rằng một biểu tượng cảm xúc duy nhất có thể bao gồm một hoặc nhiều điểm mã Unicode riêng lẻ. Nhiều người (và thư viện!) tự tạo biểu thức chính quy biểu tượng cảm xúc của riêng mình đã bỏ lỡ điểm này (hoặc triển khai kém) và kết thúc bằng lỗi.

Các chi tiết sau đây cho biểu tượng cảm xúc “” (Giáo viên nữ: Tông màu da sáng) cho thấy biểu tượng cảm xúc phức tạp như thế nào:

// Độ dài đơn vị mã'👩🏻🏫'.length;// → 7// Mỗi điểm mã thiên thể (trên \uFFFF) được chia thành các đại diện cao và thấp// Độ dài điểm mã[...'👩🏻🏫'].length;// → 4// Bốn điểm mã này là: \u{1F469} \u{1F3FB} \u{200D} \u{1F3EB}// \u{1F469} kết hợp với \u{1F3FB} là '👩🏻'// \u{200D} là một Bộ nối có độ rộng bằng 0// \u{1F3EB} là '🏫'// Độ dài cụm ký tự (ký tự do người dùng cảm nhận)[...new Intl.Segmenter().segment('👩🏻🏫')].length;// → 1

May mắn thay, JavaScript đã thêm một cách dễ dàng để khớp với bất kỳ biểu tượng cảm xúc riêng lẻ, hoàn chỉnh nào thông qua \p{RGI_Emoji}. Vì đây là một "thuộc tính của chuỗi" lạ mắt có thể khớp với nhiều điểm mã cùng một lúc, nên nó yêu cầu cờ v của ES2024.

Nếu bạn muốn khớp biểu tượng cảm xúc trong các môi trường không hỗ trợ v, hãy xem các thư viện tuyệt vời emoji-regex và emoji-regex-xs.

Làm cho biểu thức chính quy của bạn dễ đọc hơn, dễ bảo trì hơn và linh hoạt hơn​

Mặc dù các tính năng biểu thức chính quy đã được cải thiện trong những năm qua, các biểu thức chính quy JavaScript gốc có đủ độ phức tạp vẫn có thể cực kỳ khó đọc và duy trì.

Biểu thức chính quy DỄ DÀNG QUÁ!!!! pic.twitter.com/q4GSpbJRbZ
— Garabato Kid (@garabatokid) 5 tháng 7 năm 2019

Capture có tên của ES2018 là một bổ sung tuyệt vời giúp biểu thức chính quy tự ghi chú nhiều hơn và thẻ String.raw của ES6 cho phép bạn tránh thoát tất cả các dấu gạch chéo ngược khi sử dụng hàm tạo RegExp. Nhưng về cơ bản, đó là tất cả về khả năng đọc.

Tuy nhiên, có một thư viện JavaScript nhẹ và hiệu suất cao có tên là regex (do chính tôi viết) giúp biểu thức chính quy dễ đọc hơn đáng kể. Nó thực hiện điều này bằng cách thêm các tính năng chính còn thiếu từ Biểu thức chính quy tương thích với Perl (PCRE) và xuất ra các biểu thức chính quy JavaScript gốc. Bạn cũng có thể sử dụng nó như một plugin Babel, nghĩa là các lệnh gọi regex được biên dịch tại thời điểm xây dựng, do đó, bạn có được trải nghiệm dành cho nhà phát triển tốt hơn mà không phải người dùng phải trả bất kỳ chi phí thời gian chạy nào.

PCRE là một thư viện C phổ biến được PHP sử dụng để hỗ trợ biểu thức chính quy và có sẵn trong vô số ngôn ngữ lập trình và công cụ khác.

Chúng ta hãy cùng xem qua một số cách mà thư viện regex, cung cấp một thẻ mẫu có tên regex, có thể giúp bạn viết các biểu thức chính quy phức tạp mà người dùng thực sự có thể hiểu và bảo trì được. Lưu ý rằng tất cả cú pháp mới được mô tả bên dưới đều hoạt động giống hệt nhau trong PCRE.

Khoảng trắng và bình luận không đáng kể​

Theo mặc định, regex cho phép bạn tự do thêm khoảng trắng và bình luận dòng (bắt đầu bằng #) vào regex của mình để dễ đọc.

import {regex} from 'regex';const date = regex` # Khớp ngày theo định dạng YYYY-MM-DD (? \d{4}) - # Phần năm (? \d{2}) - # Phần tháng (? \d{2}) # Phần ngày`;

Điều này tương đương với việc sử dụng cờ xx của PCRE.

Các chương trình con và nhóm định nghĩa chương trình con​

Các chương trình con được viết dưới dạng \g (trong đó name tham chiếu đến một nhóm được đặt tên) và chúng coi nhóm được tham chiếu là một mẫu con độc lập mà chúng cố gắng khớp ở vị trí hiện tại. Điều này cho phép biên soạn và tái sử dụng mẫu con, giúp cải thiện khả năng đọc và khả năng bảo trì.

Ví dụ: regex sau khớp với địa chỉ IPv4 như “192.168.12.123”:

import {regex} from 'regex';const ipv4 = regex`\b (? 25[0-5] | 2[0-4]\d | 1\d\d | [1-9]?\d) # Khớp với 3 byte còn lại được phân tách bằng dấu chấm (\. \g){3}\b`;

Bạn có thể thực hiện điều này xa hơn nữa bằng cách định nghĩa các mẫu con để chỉ sử dụng theo tham chiếu thông qua các nhóm định nghĩa chương trình con. Sau đây là một ví dụ cải thiện biểu thức chính quy cho hồ sơ tuyển sinh mà chúng ta đã thấy trước đó trong bài viết này:

const record = 'Admitted: 2024-01-01\nPhát hành: 2024-01-03';const re = regex` ^ Đã nhập học:\ (? \g) \n Đã phát hành:\ (? \g) $ (?(DEFINE) (? \g-\g-\g) (? \d{4}) (? \d{2}) (? \d{2}) )`;const match = record.match(re);console.log(match.groups);/* → { admission: '2024-01-01', releases: '2024-01-03'} */

Một cơ sở Regex hiện đại​

regex bao gồm cờ v theo mặc định, vì vậy bạn không bao giờ quên bật nó. Và trong các môi trường không có v gốc, nó sẽ tự động chuyển sang cờ u trong khi áp dụng các quy tắc thoát của v, vì vậy các regex của bạn tương thích về phía trước và phía sau.

Nó cũng ngầm bật các cờ mô phỏng x (khoảng trắng và chú thích không đáng kể) và n (chế độ "chỉ chụp có tên") theo mặc định, vì vậy bạn không phải liên tục chọn các chế độ cao cấp của chúng. Và vì đây là thẻ mẫu chuỗi thô, bạn không cần phải thoát khỏi dấu gạch chéo ngược \\\\ như với hàm tạo RegExp.

Nhóm nguyên tử và số lượng sở hữu có thể ngăn ngừa việc quay lại thảm khốc​

Nhóm nguyên tử và số lượng sở hữu là một tập hợp tính năng mạnh mẽ khác được thư viện regex bổ sung. Mặc dù chúng chủ yếu liên quan đến hiệu suất và khả năng phục hồi trước tình trạng quay lui thảm khốc (còn được gọi là ReDoS hoặc "từ chối dịch vụ biểu thức chính quy", một vấn đề nghiêm trọng mà một số biểu thức chính quy có thể mất rất nhiều thời gian khi tìm kiếm các chuỗi cụ thể không hoàn toàn khớp), chúng cũng có thể giúp tăng khả năng đọc bằng cách cho phép bạn viết các mẫu đơn giản hơn.

Lưu ý: Bạn có thể tìm hiểu thêm trong regex tài liệu.

Tiếp theo là gì? Những cải tiến sắp tới về biểu thức chính quy trong JavaScript​

Có nhiều đề xuất đang được triển khai để cải thiện biểu thức chính quy trong JavaScript. Dưới đây, chúng ta sẽ xem xét ba tính năng đang trên đường được đưa vào các phiên bản ngôn ngữ trong tương lai.

Nhóm ghi chép có tên trùng lặp​

Đây là đề xuất ở Giai đoạn 3 (gần hoàn thiện). Thậm chí còn tuyệt hơn nữa là tính đến thời điểm gần đây, tính năng này hoạt động trên tất cả các trình duyệt chính.

Khi tính năng ghi chép có tên lần đầu tiên được giới thiệu, tính năng này yêu cầu tất cả các (?...) ghi chép phải sử dụng tên duy nhất. Tuy nhiên, có những trường hợp khi bạn có nhiều đường dẫn thay thế thông qua regex và việc sử dụng lại cùng tên nhóm trong mỗi đường dẫn thay thế sẽ đơn giản hóa mã của bạn.

Ví dụ:

/(?\d{4})-\d\d|\d\d-(?\d{4})/

Đề xuất này cho phép thực hiện chính xác điều này, ngăn chặn lỗi "tên nhóm chụp trùng lặp" với ví dụ này. Lưu ý rằng tên vẫn phải là duy nhất trong mỗi đường dẫn thay thế.

Bộ điều chỉnh mẫu (hay còn gọi là Nhóm cờ)​

Đây là một đề xuất Giai đoạn 3 khác. Đề xuất này đã được hỗ trợ trong Chrome/Edge 125 và Opera 111, và sẽ sớm có trong Firefox. Chưa có từ nào trên Safari.

Các trình sửa đổi mẫu sử dụng (?ims:...), (?-ims:...) hoặc (?im-s:...) để bật hoặc tắt các cờ i, m và s chỉ cho một số phần nhất định của biểu thức chính quy.

Ví dụ:

/hello-(?i:world)/// Phù hợp với 'hello-WORLD' nhưng không phù hợp với 'HELLO-WORLD'

Thoát các ký tự đặc biệt của biểu thức chính quy bằng RegExp.escape​

Điều này proposal gần đây đã đạt đến Giai đoạn 3 và đã có một thời gian dài để thực hiện. Nó vẫn chưa được hỗ trợ trong bất kỳ trình duyệt chính nào. Đề xuất thực hiện những gì nó nói trên hộp, cung cấp hàm RegExp.escape(str), trả về chuỗi với tất cả các ký tự đặc biệt của regex đã thoát để bạn có thể khớp chúng theo nghĩa đen.

Nếu bạn cần chức năng này ngày nay, gói được sử dụng rộng rãi nhất (với hơn 500 triệu lượt tải xuống npm hàng tháng) là escape-string-regexp, một tiện ích siêu nhẹ, có mục đích duy nhất thực hiện thoát tối thiểu. Điều đó rất tuyệt đối với hầu hết các trường hợp, nhưng nếu bạn cần đảm bảo rằng chuỗi thoát của bạn có thể được sử dụng an toàn ở bất kỳ vị trí tùy ý nào trong regex, escape-string-regexp khuyên dùng thư viện regex mà chúng ta đã xem xét trong bài viết này. Thư viện regex sử dụng nội suy để thoát khỏi các chuỗi nhúng theo cách nhận biết ngữ cảnh.

Kết luận​

Vậy là bạn đã có: quá khứ, hiện tại và tương lai của biểu thức chính quy JavaScript.

Nếu bạn muốn đi sâu hơn nữa vào vùng đất của regex, hãy xem Awesome Regex để biết danh sách các trình kiểm tra regex, hướng dẫn, thư viện và các tài nguyên khác tốt nhất. Và để có một trò chơi ô chữ biểu thức chính quy thú vị, hãy thử sức với regexle.

Chúc bạn phân tích thành công và biểu thức chính quy của bạn dễ đọc.