{
  "id": 2089416,
  "title": "Stop Writing Regex to Match URLs — The Browser Already Can",
  "url": "https://urgent.news/2026/08/20/stop-writing-regex-to-match-urls-the-browser-already-can",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-20T06:53:07.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/parsajiravand/stop-writing-regex-to-match-urls-the-browser-already-can-1e3e"
  },
  "original_language": "en",
  "account": "In a support ticket, Priya encountered a recurring issue with a regex-based approach to detect specific pages in a web application. The regex pattern, const isTicketView = /^ \\/ tickets \\/\\d +$/ , was designed to match URLs containing \"/tickets/\" followed by one or more digits. However, it failed to account for trailing slashes or query strings, resulting in incorrect matches and unexpected behavior.\n\nTo fix this problem, the solution lies in using a built-in browser API called URLPattern. URLPattern is a global constructor that was introduced in 2021 and provides a more reliable and straightforward way to match and parse URLs. This API eliminates the need for writing complex regular expressions and handles various edge cases automatically.\n\nBy utilizing URLPattern, developers can define specific URL patterns with named groups, which allows for both matching and extracting relevant information from the URL. For example, const ticketView = new URLPattern ({ pathname : /tickets/:id }); and const ticketEdit = new URLPattern ({ pathname : /tickets/:id/edit }); enable precise matching of different URL patterns without the risk of missing boundary conditions or introducing new bugs.\n\nUsing URLPattern offers several advantages over manual regex matching. It reduces the complexity of the code, improves readability, and provides a more consistent approach to URL handling. The API also allows for additional features such as wildcard matching, optional segments, and custom regex within named groups. These additional capabilities address various URL patterns encountered in real-world applications without the need for intricate regex patterns.\n\nTo utilize URLPattern, developers can create separate patterns for specific URL paths, such as ticket view and ticket edit pages. By executing these patterns against a given URL, developers can determine whether the URL matches the intended pattern. If a match is found, additional information, such as the captured groups, can be accessed using the exec() method.\n\nIn conclusion, the issue Priya faced with her regex-based URL matching can be easily resolved by leveraging the URLPattern API provided by modern web browsers. This built-in solution offers a more reliable, concise, and maintainable approach to URL matching compared to manually written regex patterns. By adopting URLPattern, developers can avoid the pitfalls of hand-rolled regex and ensure consistent and accurate URL matching throughout their applications.",
  "summary": "Priya was three paragraphs into rewriting a support ticket when the page flashed and her draft reverted to what it had looked like an hour earlier. She hadn't refreshed. Nobody had. The service worker had. It was running a cache-first strategy for ticket pages — fetch once, serve from cache after that, so the dashboard felt instant on a flaky connection. The intent was to cache /tickets/482 , the…",
  "key_points": [
    "Priya encountered regex issue with URL matching in web app",
    "URLPattern API introduced in 2021 for reliable URL matching",
    "URLPattern reduces regex complexity and improves readability"
  ],
  "editors_take": "The introduction of URLPattern in modern web browsers allows developers to replace complex regex patterns with a more reliable and straightforward API, reducing code complexity and improving readability.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}