[{"data":1,"prerenderedAt":217},["ShallowReactive",2],{"term-u\u002Furlpattern":3,"related-u\u002Furlpattern":200},{"id":4,"title":5,"acronym":6,"body":7,"category":181,"description":182,"difficulty":183,"extension":184,"letter":185,"meta":186,"navigation":187,"path":188,"related":189,"seo":194,"sitemap":195,"stem":198,"subcategory":6,"__hash__":199},"terms\u002Fterms\u002Fu\u002Furlpattern.md","URLPattern",null,{"type":8,"value":9,"toc":175},"minimark",[10,15,19,23,26,30,164,168,171],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"URLPattern is the browser's built in way to match and parse URLs against a pattern, like \u002Fusers\u002F:id, without reaching for a routing library or writing your own regex from scratch. Routers have been reinventing this exact wheel for years, and now it just lives in the platform.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"URLPattern is a browser API for matching URLs against a pattern syntax similar to path-to-regexp, extracting named groups from the pathname, search params, hash, and more. It is used internally by browser features like Service Worker routing and is increasingly used by routing libraries instead of shipping their own pattern matching code.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const pattern = new URLPattern({ pathname: '\u002Fusers\u002F:id' });\nconst match = pattern.exec('https:\u002F\u002Fsite.com\u002Fusers\u002F42');\nconsole.log(match.pathname.groups.id); \u002F\u002F '42'\n","javascript","",[38,39,40,96,128],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,64,67,70,74,77,80,84,87,90,93],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"spNyl","const",[41,50,52],{"class":51},"sTEyZ"," pattern ",[41,54,56],{"class":55},"sMK4o","=",[41,58,59],{"class":55}," new",[41,61,63],{"class":62},"s2Zo4"," URLPattern",[41,65,66],{"class":51},"(",[41,68,69],{"class":55},"{",[41,71,73],{"class":72},"swJcz"," pathname",[41,75,76],{"class":55},":",[41,78,79],{"class":55}," '",[41,81,83],{"class":82},"sfazB","\u002Fusers\u002F:id",[41,85,86],{"class":55},"'",[41,88,89],{"class":55}," }",[41,91,92],{"class":51},")",[41,94,95],{"class":55},";\n",[41,97,99,101,104,106,109,112,115,117,119,122,124,126],{"class":43,"line":98},2,[41,100,48],{"class":47},[41,102,103],{"class":51}," match ",[41,105,56],{"class":55},[41,107,108],{"class":51}," pattern",[41,110,111],{"class":55},".",[41,113,114],{"class":62},"exec",[41,116,66],{"class":51},[41,118,86],{"class":55},[41,120,121],{"class":82},"https:\u002F\u002Fsite.com\u002Fusers\u002F42",[41,123,86],{"class":55},[41,125,92],{"class":51},[41,127,95],{"class":55},[41,129,131,134,136,139,142,144,147,149,152,154,157,160],{"class":43,"line":130},3,[41,132,133],{"class":51},"console",[41,135,111],{"class":55},[41,137,138],{"class":62},"log",[41,140,141],{"class":51},"(match",[41,143,111],{"class":55},[41,145,146],{"class":51},"pathname",[41,148,111],{"class":55},[41,150,151],{"class":51},"groups",[41,153,111],{"class":55},[41,155,156],{"class":51},"id)",[41,158,159],{"class":55},";",[41,161,163],{"class":162},"sHwdD"," \u002F\u002F '42'\n",[11,165,167],{"id":166},"when-youll-hear-this","When You'll Hear This",[16,169,170],{},"\"We swapped our hand rolled route matcher for URLPattern and deleted a dependency.\" \u002F \"URLPattern gives you named groups straight out of the match, no extra parsing needed.\"",[172,173,174],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":98,"depth":98,"links":176},[177,178,179,180],{"id":13,"depth":98,"text":14},{"id":21,"depth":98,"text":22},{"id":28,"depth":98,"text":29},{"id":166,"depth":98,"text":167},"frontend","URLPattern is the browser's built in way to match and parse URLs against a pattern, like \u002Fusers\u002F:id, without reaching for a routing library or writing your...","intermediate","md","u",{},true,"\u002Fterms\u002Fu\u002Furlpattern",[190,191,192,193],"Router","Service Worker","File-Based Routing","Regex",{"title":5,"description":182},{"changefreq":196,"priority":197},"weekly",0.7,"terms\u002Fu\u002Furlpattern","mEiHJRsDARoBF8aA9sHAeSdQhg_77n4z-GSJF5K4Hm0",[201,205,209,213],{"title":192,"path":202,"acronym":6,"category":181,"difficulty":203,"description":204},"\u002Fterms\u002Ff\u002Ffile-based-routing","beginner","File-Based Routing means your folder structure IS your routing. Create pages\u002Fabout.vue and you get \u002Fabout.",{"title":193,"path":206,"acronym":193,"category":207,"difficulty":183,"description":208},"\u002Fterms\u002Fr\u002Fregex","general","Regex is a secret language for describing patterns in text.",{"title":190,"path":210,"acronym":6,"category":211,"difficulty":203,"description":212},"\u002Fterms\u002Fr\u002Frouter","backend","The router is the traffic cop of your backend.",{"title":191,"path":214,"acronym":6,"category":181,"difficulty":215,"description":216},"\u002Fterms\u002Fs\u002Fservice-worker","advanced","A Service Worker is a JavaScript script that runs in the background, separate from your web page.",1792528133542]