[{"data":1,"prerenderedAt":1424},["ShallowReactive",2],{"guide-extracting-data-from-urls-javascript":3},{"id":4,"title":5,"body":6,"date":1416,"description":1417,"extension":1418,"meta":1419,"navigation":81,"path":1420,"readingTime":113,"seo":1421,"stem":1422,"__hash__":1423},"guides\u002Fguides\u002Fextracting-data-from-urls-javascript.md","Extracting Data from URLs in JavaScript: Practical Guide",{"type":7,"value":8,"toc":1394},"minimark",[9,14,18,21,25,33,156,159,204,208,214,331,336,394,398,463,467,559,563,569,627,630,634,854,858,916,919,923,926,990,1014,1067,1071,1075,1168,1172,1216,1220,1314,1318,1353,1357,1378,1382,1390],[10,11,13],"h2",{"id":12},"why-parse-urls-in-javascript","Why Parse URLs in JavaScript?",[15,16,17],"p",{},"Nearly every web application works with URLs — reading query parameters, navigating between routes, or constructing API endpoints. JavaScript provides powerful built-in APIs that make URL parsing straightforward, yet many developers still reach for string manipulation tricks that break on edge cases.",[15,19,20],{},"Using the right API prevents bugs with encoded characters, missing protocols, and unexpected URL structures.",[10,22,24],{"id":23},"the-url-constructor","The URL Constructor",[15,26,27,28,32],{},"The ",[29,30,31],"code",{},"URL"," constructor is your primary tool for parsing URLs in JavaScript:",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-javascript shiki shiki-themes github-light github-dark","const url = new URL('https:\u002F\u002Fexample.com\u002Ftools\u002Furl-parser?format=json&page=2#results')\n\nurl.protocol    \u002F\u002F 'https:'\nurl.hostname    \u002F\u002F 'example.com'\nurl.port        \u002F\u002F '' (empty for default ports)\nurl.pathname    \u002F\u002F '\u002Ftools\u002Furl-parser'\nurl.search      \u002F\u002F '?format=json&page=2'\nurl.hash        \u002F\u002F '#results'\nurl.origin      \u002F\u002F 'https:\u002F\u002Fexample.com'\nurl.href        \u002F\u002F Full URL string\n","javascript","",[29,41,42,76,83,93,102,111,120,129,138,147],{"__ignoreMap":39},[43,44,47,51,55,58,61,65,69,73],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"szBVR","const",[43,52,54],{"class":53},"sj4cs"," url",[43,56,57],{"class":49}," =",[43,59,60],{"class":49}," new",[43,62,64],{"class":63},"sScJk"," URL",[43,66,68],{"class":67},"sVt8B","(",[43,70,72],{"class":71},"sZZnC","'https:\u002F\u002Fexample.com\u002Ftools\u002Furl-parser?format=json&page=2#results'",[43,74,75],{"class":67},")\n",[43,77,79],{"class":45,"line":78},2,[43,80,82],{"emptyLinePlaceholder":81},true,"\n",[43,84,86,89],{"class":45,"line":85},3,[43,87,88],{"class":67},"url.protocol    ",[43,90,92],{"class":91},"sJ8bj","\u002F\u002F 'https:'\n",[43,94,96,99],{"class":45,"line":95},4,[43,97,98],{"class":67},"url.hostname    ",[43,100,101],{"class":91},"\u002F\u002F 'example.com'\n",[43,103,105,108],{"class":45,"line":104},5,[43,106,107],{"class":67},"url.port        ",[43,109,110],{"class":91},"\u002F\u002F '' (empty for default ports)\n",[43,112,114,117],{"class":45,"line":113},6,[43,115,116],{"class":67},"url.pathname    ",[43,118,119],{"class":91},"\u002F\u002F '\u002Ftools\u002Furl-parser'\n",[43,121,123,126],{"class":45,"line":122},7,[43,124,125],{"class":67},"url.search      ",[43,127,128],{"class":91},"\u002F\u002F '?format=json&page=2'\n",[43,130,132,135],{"class":45,"line":131},8,[43,133,134],{"class":67},"url.hash        ",[43,136,137],{"class":91},"\u002F\u002F '#results'\n",[43,139,141,144],{"class":45,"line":140},9,[43,142,143],{"class":67},"url.origin      ",[43,145,146],{"class":91},"\u002F\u002F 'https:\u002F\u002Fexample.com'\n",[43,148,150,153],{"class":45,"line":149},10,[43,151,152],{"class":67},"url.href        ",[43,154,155],{"class":91},"\u002F\u002F Full URL string\n",[15,157,158],{},"If the URL is relative, provide a base:",[34,160,162],{"className":36,"code":161,"language":38,"meta":39,"style":39},"const url = new URL('\u002Fapi\u002Fusers?q=test', 'https:\u002F\u002Fexample.com')\nurl.hostname  \u002F\u002F 'example.com'\nurl.pathname  \u002F\u002F '\u002Fapi\u002Fusers'\n",[29,163,164,189,196],{"__ignoreMap":39},[43,165,166,168,170,172,174,176,178,181,184,187],{"class":45,"line":46},[43,167,50],{"class":49},[43,169,54],{"class":53},[43,171,57],{"class":49},[43,173,60],{"class":49},[43,175,64],{"class":63},[43,177,68],{"class":67},[43,179,180],{"class":71},"'\u002Fapi\u002Fusers?q=test'",[43,182,183],{"class":67},", ",[43,185,186],{"class":71},"'https:\u002F\u002Fexample.com'",[43,188,75],{"class":67},[43,190,191,194],{"class":45,"line":78},[43,192,193],{"class":67},"url.hostname  ",[43,195,101],{"class":91},[43,197,198,201],{"class":45,"line":85},[43,199,200],{"class":67},"url.pathname  ",[43,202,203],{"class":91},"\u002F\u002F '\u002Fapi\u002Fusers'\n",[10,205,207],{"id":206},"working-with-query-parameters","Working with Query Parameters",[15,209,27,210,213],{},[29,211,212],{},"URLSearchParams"," API handles query string parsing:",[34,215,217],{"className":36,"code":216,"language":38,"meta":39,"style":39},"const params = new URLSearchParams('?format=json&page=2&sort=name')\n\nparams.get('format')      \u002F\u002F 'json'\nparams.get('page')        \u002F\u002F '2'\nparams.get(' nonexistent') \u002F\u002F null\nparams.has('sort')        \u002F\u002F true\nparams.getAll('tag')      \u002F\u002F ['js', 'tools'] (for ?tag=js&tag=tools)\n",[29,218,219,240,244,263,280,297,314],{"__ignoreMap":39},[43,220,221,223,226,228,230,233,235,238],{"class":45,"line":46},[43,222,50],{"class":49},[43,224,225],{"class":53}," params",[43,227,57],{"class":49},[43,229,60],{"class":49},[43,231,232],{"class":63}," URLSearchParams",[43,234,68],{"class":67},[43,236,237],{"class":71},"'?format=json&page=2&sort=name'",[43,239,75],{"class":67},[43,241,242],{"class":45,"line":78},[43,243,82],{"emptyLinePlaceholder":81},[43,245,246,249,252,254,257,260],{"class":45,"line":85},[43,247,248],{"class":67},"params.",[43,250,251],{"class":63},"get",[43,253,68],{"class":67},[43,255,256],{"class":71},"'format'",[43,258,259],{"class":67},")      ",[43,261,262],{"class":91},"\u002F\u002F 'json'\n",[43,264,265,267,269,271,274,277],{"class":45,"line":95},[43,266,248],{"class":67},[43,268,251],{"class":63},[43,270,68],{"class":67},[43,272,273],{"class":71},"'page'",[43,275,276],{"class":67},")        ",[43,278,279],{"class":91},"\u002F\u002F '2'\n",[43,281,282,284,286,288,291,294],{"class":45,"line":104},[43,283,248],{"class":67},[43,285,251],{"class":63},[43,287,68],{"class":67},[43,289,290],{"class":71},"' nonexistent'",[43,292,293],{"class":67},") ",[43,295,296],{"class":91},"\u002F\u002F null\n",[43,298,299,301,304,306,309,311],{"class":45,"line":113},[43,300,248],{"class":67},[43,302,303],{"class":63},"has",[43,305,68],{"class":67},[43,307,308],{"class":71},"'sort'",[43,310,276],{"class":67},[43,312,313],{"class":91},"\u002F\u002F true\n",[43,315,316,318,321,323,326,328],{"class":45,"line":122},[43,317,248],{"class":67},[43,319,320],{"class":63},"getAll",[43,322,68],{"class":67},[43,324,325],{"class":71},"'tag'",[43,327,259],{"class":67},[43,329,330],{"class":91},"\u002F\u002F ['js', 'tools'] (for ?tag=js&tag=tools)\n",[332,333,335],"h3",{"id":334},"accessing-params-from-a-url-object","Accessing params from a URL object",[34,337,339],{"className":36,"code":338,"language":38,"meta":39,"style":39},"const url = new URL('https:\u002F\u002Fexample.com\u002Fsearch?q=hello&lang=en')\nurl.searchParams.get('q')    \u002F\u002F 'hello'\nurl.searchParams.get('lang') \u002F\u002F 'en'\n",[29,340,341,360,378],{"__ignoreMap":39},[43,342,343,345,347,349,351,353,355,358],{"class":45,"line":46},[43,344,50],{"class":49},[43,346,54],{"class":53},[43,348,57],{"class":49},[43,350,60],{"class":49},[43,352,64],{"class":63},[43,354,68],{"class":67},[43,356,357],{"class":71},"'https:\u002F\u002Fexample.com\u002Fsearch?q=hello&lang=en'",[43,359,75],{"class":67},[43,361,362,365,367,369,372,375],{"class":45,"line":78},[43,363,364],{"class":67},"url.searchParams.",[43,366,251],{"class":63},[43,368,68],{"class":67},[43,370,371],{"class":71},"'q'",[43,373,374],{"class":67},")    ",[43,376,377],{"class":91},"\u002F\u002F 'hello'\n",[43,379,380,382,384,386,389,391],{"class":45,"line":85},[43,381,364],{"class":67},[43,383,251],{"class":63},[43,385,68],{"class":67},[43,387,388],{"class":71},"'lang'",[43,390,293],{"class":67},[43,392,393],{"class":91},"\u002F\u002F 'en'\n",[332,395,397],{"id":396},"iterating-over-all-parameters","Iterating over all parameters",[34,399,401],{"className":36,"code":400,"language":38,"meta":39,"style":39},"for (const [key, value] of url.searchParams) {\n  console.log(`${key}: ${value}`)\n}\n",[29,402,403,433,458],{"__ignoreMap":39},[43,404,405,408,411,413,416,419,421,424,427,430],{"class":45,"line":46},[43,406,407],{"class":49},"for",[43,409,410],{"class":67}," (",[43,412,50],{"class":49},[43,414,415],{"class":67}," [",[43,417,418],{"class":53},"key",[43,420,183],{"class":67},[43,422,423],{"class":53},"value",[43,425,426],{"class":67},"] ",[43,428,429],{"class":49},"of",[43,431,432],{"class":67}," url.searchParams) {\n",[43,434,435,438,441,443,446,448,451,453,456],{"class":45,"line":78},[43,436,437],{"class":67},"  console.",[43,439,440],{"class":63},"log",[43,442,68],{"class":67},[43,444,445],{"class":71},"`${",[43,447,418],{"class":67},[43,449,450],{"class":71},"}: ${",[43,452,423],{"class":67},[43,454,455],{"class":71},"}`",[43,457,75],{"class":67},[43,459,460],{"class":45,"line":85},[43,461,462],{"class":67},"}\n",[332,464,466],{"id":465},"modifying-parameters","Modifying parameters",[34,468,470],{"className":36,"code":469,"language":38,"meta":39,"style":39},"const url = new URL('https:\u002F\u002Fexample.com\u002Fsearch')\nurl.searchParams.set('q', 'hello')\nurl.searchParams.append('filter', 'active')\nurl.searchParams.delete('page')\n\nurl.toString()  \u002F\u002F 'https:\u002F\u002Fexample.com\u002Fsearch?q=hello&filter=active'\n",[29,471,472,491,509,528,541,545],{"__ignoreMap":39},[43,473,474,476,478,480,482,484,486,489],{"class":45,"line":46},[43,475,50],{"class":49},[43,477,54],{"class":53},[43,479,57],{"class":49},[43,481,60],{"class":49},[43,483,64],{"class":63},[43,485,68],{"class":67},[43,487,488],{"class":71},"'https:\u002F\u002Fexample.com\u002Fsearch'",[43,490,75],{"class":67},[43,492,493,495,498,500,502,504,507],{"class":45,"line":78},[43,494,364],{"class":67},[43,496,497],{"class":63},"set",[43,499,68],{"class":67},[43,501,371],{"class":71},[43,503,183],{"class":67},[43,505,506],{"class":71},"'hello'",[43,508,75],{"class":67},[43,510,511,513,516,518,521,523,526],{"class":45,"line":85},[43,512,364],{"class":67},[43,514,515],{"class":63},"append",[43,517,68],{"class":67},[43,519,520],{"class":71},"'filter'",[43,522,183],{"class":67},[43,524,525],{"class":71},"'active'",[43,527,75],{"class":67},[43,529,530,532,535,537,539],{"class":45,"line":95},[43,531,364],{"class":67},[43,533,534],{"class":63},"delete",[43,536,68],{"class":67},[43,538,273],{"class":71},[43,540,75],{"class":67},[43,542,543],{"class":45,"line":104},[43,544,82],{"emptyLinePlaceholder":81},[43,546,547,550,553,556],{"class":45,"line":113},[43,548,549],{"class":67},"url.",[43,551,552],{"class":63},"toString",[43,554,555],{"class":67},"()  ",[43,557,558],{"class":91},"\u002F\u002F 'https:\u002F\u002Fexample.com\u002Fsearch?q=hello&filter=active'\n",[10,560,562],{"id":561},"parsing-path-segments","Parsing Path Segments",[15,564,27,565,568],{},[29,566,567],{},"pathname"," property gives you the full path. Split it to work with individual segments:",[34,570,572],{"className":36,"code":571,"language":38,"meta":39,"style":39},"const url = new URL('https:\u002F\u002Fexample.com\u002Ftools\u002Furl-parser\u002Fguide')\nconst segments = url.pathname.split('\u002F').filter(Boolean)\n\u002F\u002F ['tools', 'url-parser', 'guide']\n",[29,573,574,593,622],{"__ignoreMap":39},[43,575,576,578,580,582,584,586,588,591],{"class":45,"line":46},[43,577,50],{"class":49},[43,579,54],{"class":53},[43,581,57],{"class":49},[43,583,60],{"class":49},[43,585,64],{"class":63},[43,587,68],{"class":67},[43,589,590],{"class":71},"'https:\u002F\u002Fexample.com\u002Ftools\u002Furl-parser\u002Fguide'",[43,592,75],{"class":67},[43,594,595,597,600,602,605,608,610,613,616,619],{"class":45,"line":78},[43,596,50],{"class":49},[43,598,599],{"class":53}," segments",[43,601,57],{"class":49},[43,603,604],{"class":67}," url.pathname.",[43,606,607],{"class":63},"split",[43,609,68],{"class":67},[43,611,612],{"class":71},"'\u002F'",[43,614,615],{"class":67},").",[43,617,618],{"class":63},"filter",[43,620,621],{"class":67},"(Boolean)\n",[43,623,624],{"class":45,"line":85},[43,625,626],{"class":91},"\u002F\u002F ['tools', 'url-parser', 'guide']\n",[15,628,629],{},"Filter out empty strings to handle leading and trailing slashes cleanly.",[332,631,633],{"id":632},"extracting-dynamic-route-parameters","Extracting dynamic route parameters",[34,635,637],{"className":36,"code":636,"language":38,"meta":39,"style":39},"\u002F\u002F Given pattern \u002Fusers\u002F:id\u002Fposts\u002F:postId\nfunction extractParams(pattern, pathname) {\n  const patternParts = pattern.split('\u002F')\n  const pathParts = pathname.split('\u002F')\n  const params = {}\n\n  for (let i = 0; i \u003C patternParts.length; i++) {\n    if (patternParts[i].startsWith(':')) {\n      params[patternParts[i].slice(1)] = pathParts[i]\n    }\n  }\n  return params\n}\n\nextractParams('\u002Fusers\u002F:id\u002Fposts\u002F:postId', '\u002Fusers\u002F42\u002Fposts\u002F7')\n\u002F\u002F { id: '42', postId: '7' }\n",[29,638,639,644,665,686,706,717,721,760,779,800,805,811,820,825,830,848],{"__ignoreMap":39},[43,640,641],{"class":45,"line":46},[43,642,643],{"class":91},"\u002F\u002F Given pattern \u002Fusers\u002F:id\u002Fposts\u002F:postId\n",[43,645,646,649,652,654,658,660,662],{"class":45,"line":78},[43,647,648],{"class":49},"function",[43,650,651],{"class":63}," extractParams",[43,653,68],{"class":67},[43,655,657],{"class":656},"s4XuR","pattern",[43,659,183],{"class":67},[43,661,567],{"class":656},[43,663,664],{"class":67},") {\n",[43,666,667,670,673,675,678,680,682,684],{"class":45,"line":85},[43,668,669],{"class":49},"  const",[43,671,672],{"class":53}," patternParts",[43,674,57],{"class":49},[43,676,677],{"class":67}," pattern.",[43,679,607],{"class":63},[43,681,68],{"class":67},[43,683,612],{"class":71},[43,685,75],{"class":67},[43,687,688,690,693,695,698,700,702,704],{"class":45,"line":95},[43,689,669],{"class":49},[43,691,692],{"class":53}," pathParts",[43,694,57],{"class":49},[43,696,697],{"class":67}," pathname.",[43,699,607],{"class":63},[43,701,68],{"class":67},[43,703,612],{"class":71},[43,705,75],{"class":67},[43,707,708,710,712,714],{"class":45,"line":104},[43,709,669],{"class":49},[43,711,225],{"class":53},[43,713,57],{"class":49},[43,715,716],{"class":67}," {}\n",[43,718,719],{"class":45,"line":113},[43,720,82],{"emptyLinePlaceholder":81},[43,722,723,726,728,731,734,737,740,743,746,749,752,755,758],{"class":45,"line":122},[43,724,725],{"class":49},"  for",[43,727,410],{"class":67},[43,729,730],{"class":49},"let",[43,732,733],{"class":67}," i ",[43,735,736],{"class":49},"=",[43,738,739],{"class":53}," 0",[43,741,742],{"class":67},"; i ",[43,744,745],{"class":49},"\u003C",[43,747,748],{"class":67}," patternParts.",[43,750,751],{"class":53},"length",[43,753,754],{"class":67},"; i",[43,756,757],{"class":49},"++",[43,759,664],{"class":67},[43,761,762,765,768,771,773,776],{"class":45,"line":131},[43,763,764],{"class":49},"    if",[43,766,767],{"class":67}," (patternParts[i].",[43,769,770],{"class":63},"startsWith",[43,772,68],{"class":67},[43,774,775],{"class":71},"':'",[43,777,778],{"class":67},")) {\n",[43,780,781,784,787,789,792,795,797],{"class":45,"line":140},[43,782,783],{"class":67},"      params[patternParts[i].",[43,785,786],{"class":63},"slice",[43,788,68],{"class":67},[43,790,791],{"class":53},"1",[43,793,794],{"class":67},")] ",[43,796,736],{"class":49},[43,798,799],{"class":67}," pathParts[i]\n",[43,801,802],{"class":45,"line":149},[43,803,804],{"class":67},"    }\n",[43,806,808],{"class":45,"line":807},11,[43,809,810],{"class":67},"  }\n",[43,812,814,817],{"class":45,"line":813},12,[43,815,816],{"class":49},"  return",[43,818,819],{"class":67}," params\n",[43,821,823],{"class":45,"line":822},13,[43,824,462],{"class":67},[43,826,828],{"class":45,"line":827},14,[43,829,82],{"emptyLinePlaceholder":81},[43,831,833,836,838,841,843,846],{"class":45,"line":832},15,[43,834,835],{"class":63},"extractParams",[43,837,68],{"class":67},[43,839,840],{"class":71},"'\u002Fusers\u002F:id\u002Fposts\u002F:postId'",[43,842,183],{"class":67},[43,844,845],{"class":71},"'\u002Fusers\u002F42\u002Fposts\u002F7'",[43,847,75],{"class":67},[43,849,851],{"class":45,"line":850},16,[43,852,853],{"class":91},"\u002F\u002F { id: '42', postId: '7' }\n",[10,855,857],{"id":856},"handling-hash-fragments","Handling Hash Fragments",[34,859,861],{"className":36,"code":860,"language":38,"meta":39,"style":39},"const url = new URL('https:\u002F\u002Fexample.com\u002Fdocs#installation')\nurl.hash  \u002F\u002F '#installation'\n\n\u002F\u002F Without the # prefix\nurl.hash.slice(1)  \u002F\u002F 'installation'\n",[29,862,863,882,890,894,899],{"__ignoreMap":39},[43,864,865,867,869,871,873,875,877,880],{"class":45,"line":46},[43,866,50],{"class":49},[43,868,54],{"class":53},[43,870,57],{"class":49},[43,872,60],{"class":49},[43,874,64],{"class":63},[43,876,68],{"class":67},[43,878,879],{"class":71},"'https:\u002F\u002Fexample.com\u002Fdocs#installation'",[43,881,75],{"class":67},[43,883,884,887],{"class":45,"line":78},[43,885,886],{"class":67},"url.hash  ",[43,888,889],{"class":91},"\u002F\u002F '#installation'\n",[43,891,892],{"class":45,"line":85},[43,893,82],{"emptyLinePlaceholder":81},[43,895,896],{"class":45,"line":95},[43,897,898],{"class":91},"\u002F\u002F Without the # prefix\n",[43,900,901,904,906,908,910,913],{"class":45,"line":104},[43,902,903],{"class":67},"url.hash.",[43,905,786],{"class":63},[43,907,68],{"class":67},[43,909,791],{"class":53},[43,911,912],{"class":67},")  ",[43,914,915],{"class":91},"\u002F\u002F 'installation'\n",[15,917,918],{},"Hash fragments are never sent to the server. Use them for client-side navigation, scroll anchoring, or storing lightweight client state.",[10,920,922],{"id":921},"url-encoding-and-decoding","URL Encoding and Decoding",[15,924,925],{},"URLs restrict characters to a safe ASCII subset. Other characters must be percent-encoded:",[34,927,929],{"className":36,"code":928,"language":38,"meta":39,"style":39},"\u002F\u002F Encode values for safe URL insertion\nencodeURIComponent('hello world')  \u002F\u002F 'hello%20world'\nencodeURIComponent('price=10')     \u002F\u002F 'price%3D10'\n\n\u002F\u002F Decode values from URLs\ndecodeURIComponent('hello%20world')  \u002F\u002F 'hello world'\n",[29,930,931,936,951,966,970,975],{"__ignoreMap":39},[43,932,933],{"class":45,"line":46},[43,934,935],{"class":91},"\u002F\u002F Encode values for safe URL insertion\n",[43,937,938,941,943,946,948],{"class":45,"line":78},[43,939,940],{"class":63},"encodeURIComponent",[43,942,68],{"class":67},[43,944,945],{"class":71},"'hello world'",[43,947,912],{"class":67},[43,949,950],{"class":91},"\u002F\u002F 'hello%20world'\n",[43,952,953,955,957,960,963],{"class":45,"line":85},[43,954,940],{"class":63},[43,956,68],{"class":67},[43,958,959],{"class":71},"'price=10'",[43,961,962],{"class":67},")     ",[43,964,965],{"class":91},"\u002F\u002F 'price%3D10'\n",[43,967,968],{"class":45,"line":95},[43,969,82],{"emptyLinePlaceholder":81},[43,971,972],{"class":45,"line":104},[43,973,974],{"class":91},"\u002F\u002F Decode values from URLs\n",[43,976,977,980,982,985,987],{"class":45,"line":113},[43,978,979],{"class":63},"decodeURIComponent",[43,981,68],{"class":67},[43,983,984],{"class":71},"'hello%20world'",[43,986,912],{"class":67},[43,988,989],{"class":91},"\u002F\u002F 'hello world'\n",[15,991,992,996,997,999,1000,183,1002,1005,1006,1009,1010,1013],{},[993,994,995],"strong",{},"Critical",": Use ",[29,998,940],{}," for individual parameter values — it encodes ",[29,1001,736],{},[29,1003,1004],{},"&",", and ",[29,1007,1008],{},"?",". Never use ",[29,1011,1012],{},"encodeURI"," for parameter values, as it leaves those characters unencoded.",[1015,1016,1017,1039],"table",{},[1018,1019,1020],"thead",{},[1021,1022,1023,1027,1036],"tr",{},[1024,1025,1026],"th",{},"Function",[1024,1028,1029,1030,183,1032,183,1034],{},"Encodes ",[29,1031,1008],{},[29,1033,1004],{},[29,1035,736],{},[1024,1037,1038],{},"Use For",[1040,1041,1042,1055],"tbody",{},[1021,1043,1044,1049,1052],{},[1045,1046,1047],"td",{},[29,1048,1012],{},[1045,1050,1051],{},"No",[1045,1053,1054],{},"Full URLs",[1021,1056,1057,1061,1064],{},[1045,1058,1059],{},[29,1060,940],{},[1045,1062,1063],{},"Yes",[1045,1065,1066],{},"Parameter values",[10,1068,1070],{"id":1069},"common-pitfalls","Common Pitfalls",[332,1072,1074],{"id":1073},"missing-protocol","Missing protocol",[34,1076,1078],{"className":36,"code":1077,"language":38,"meta":39,"style":39},"\u002F\u002F THROWS: Invalid URL\nnew URL('example.com\u002Fpath')\n\n\u002F\u002F FIX: Add protocol\nnew URL('https:\u002F\u002Fexample.com\u002Fpath')\n\n\u002F\u002F FIX: Use base parameter\nnew URL('example.com\u002Fpath', 'https:\u002F\u002Fexample.com')\n\u002F\u002F Wait — this treats 'example.com\u002Fpath' as a relative path\n\u002F\u002F Correct approach:\nnew URL('https:\u002F\u002Fexample.com\u002Fpath')\n",[29,1079,1080,1085,1099,1103,1108,1121,1125,1130,1146,1151,1156],{"__ignoreMap":39},[43,1081,1082],{"class":45,"line":46},[43,1083,1084],{"class":91},"\u002F\u002F THROWS: Invalid URL\n",[43,1086,1087,1090,1092,1094,1097],{"class":45,"line":78},[43,1088,1089],{"class":49},"new",[43,1091,64],{"class":63},[43,1093,68],{"class":67},[43,1095,1096],{"class":71},"'example.com\u002Fpath'",[43,1098,75],{"class":67},[43,1100,1101],{"class":45,"line":85},[43,1102,82],{"emptyLinePlaceholder":81},[43,1104,1105],{"class":45,"line":95},[43,1106,1107],{"class":91},"\u002F\u002F FIX: Add protocol\n",[43,1109,1110,1112,1114,1116,1119],{"class":45,"line":104},[43,1111,1089],{"class":49},[43,1113,64],{"class":63},[43,1115,68],{"class":67},[43,1117,1118],{"class":71},"'https:\u002F\u002Fexample.com\u002Fpath'",[43,1120,75],{"class":67},[43,1122,1123],{"class":45,"line":113},[43,1124,82],{"emptyLinePlaceholder":81},[43,1126,1127],{"class":45,"line":122},[43,1128,1129],{"class":91},"\u002F\u002F FIX: Use base parameter\n",[43,1131,1132,1134,1136,1138,1140,1142,1144],{"class":45,"line":131},[43,1133,1089],{"class":49},[43,1135,64],{"class":63},[43,1137,68],{"class":67},[43,1139,1096],{"class":71},[43,1141,183],{"class":67},[43,1143,186],{"class":71},[43,1145,75],{"class":67},[43,1147,1148],{"class":45,"line":140},[43,1149,1150],{"class":91},"\u002F\u002F Wait — this treats 'example.com\u002Fpath' as a relative path\n",[43,1152,1153],{"class":45,"line":149},[43,1154,1155],{"class":91},"\u002F\u002F Correct approach:\n",[43,1157,1158,1160,1162,1164,1166],{"class":45,"line":807},[43,1159,1089],{"class":49},[43,1161,64],{"class":63},[43,1163,68],{"class":67},[43,1165,1118],{"class":71},[43,1167,75],{"class":67},[332,1169,1171],{"id":1170},"double-encoding","Double encoding",[34,1173,1175],{"className":36,"code":1174,"language":38,"meta":39,"style":39},"\u002F\u002F BAD: Encoding an already-encoded value\nencodeURIComponent('hello%20world')  \u002F\u002F 'hello%2520world' — double encoded\n\n\u002F\u002F Decode first, then re-encode if needed\ndecodeURIComponent('hello%20world')  \u002F\u002F 'hello world'\n",[29,1176,1177,1182,1195,1199,1204],{"__ignoreMap":39},[43,1178,1179],{"class":45,"line":46},[43,1180,1181],{"class":91},"\u002F\u002F BAD: Encoding an already-encoded value\n",[43,1183,1184,1186,1188,1190,1192],{"class":45,"line":78},[43,1185,940],{"class":63},[43,1187,68],{"class":67},[43,1189,984],{"class":71},[43,1191,912],{"class":67},[43,1193,1194],{"class":91},"\u002F\u002F 'hello%2520world' — double encoded\n",[43,1196,1197],{"class":45,"line":85},[43,1198,82],{"emptyLinePlaceholder":81},[43,1200,1201],{"class":45,"line":95},[43,1202,1203],{"class":91},"\u002F\u002F Decode first, then re-encode if needed\n",[43,1205,1206,1208,1210,1212,1214],{"class":45,"line":104},[43,1207,979],{"class":63},[43,1209,68],{"class":67},[43,1211,984],{"class":71},[43,1213,912],{"class":67},[43,1215,989],{"class":91},[332,1217,1219],{"id":1218},"null-vs-empty-string","Null vs empty string",[34,1221,1223],{"className":36,"code":1222,"language":38,"meta":39,"style":39},"const params = new URLSearchParams('?q=')\nparams.get('q')   \u002F\u002F '' (empty string, not null)\nparams.has('q')   \u002F\u002F true\n\nconst params2 = new URLSearchParams('?page')\nparams2.get('page')  \u002F\u002F '' (empty string)\n",[29,1224,1225,1244,1260,1274,1278,1298],{"__ignoreMap":39},[43,1226,1227,1229,1231,1233,1235,1237,1239,1242],{"class":45,"line":46},[43,1228,50],{"class":49},[43,1230,225],{"class":53},[43,1232,57],{"class":49},[43,1234,60],{"class":49},[43,1236,232],{"class":63},[43,1238,68],{"class":67},[43,1240,1241],{"class":71},"'?q='",[43,1243,75],{"class":67},[43,1245,1246,1248,1250,1252,1254,1257],{"class":45,"line":78},[43,1247,248],{"class":67},[43,1249,251],{"class":63},[43,1251,68],{"class":67},[43,1253,371],{"class":71},[43,1255,1256],{"class":67},")   ",[43,1258,1259],{"class":91},"\u002F\u002F '' (empty string, not null)\n",[43,1261,1262,1264,1266,1268,1270,1272],{"class":45,"line":85},[43,1263,248],{"class":67},[43,1265,303],{"class":63},[43,1267,68],{"class":67},[43,1269,371],{"class":71},[43,1271,1256],{"class":67},[43,1273,313],{"class":91},[43,1275,1276],{"class":45,"line":95},[43,1277,82],{"emptyLinePlaceholder":81},[43,1279,1280,1282,1285,1287,1289,1291,1293,1296],{"class":45,"line":104},[43,1281,50],{"class":49},[43,1283,1284],{"class":53}," params2",[43,1286,57],{"class":49},[43,1288,60],{"class":49},[43,1290,232],{"class":63},[43,1292,68],{"class":67},[43,1294,1295],{"class":71},"'?page'",[43,1297,75],{"class":67},[43,1299,1300,1303,1305,1307,1309,1311],{"class":45,"line":113},[43,1301,1302],{"class":67},"params2.",[43,1304,251],{"class":63},[43,1306,68],{"class":67},[43,1308,273],{"class":71},[43,1310,912],{"class":67},[43,1312,1313],{"class":91},"\u002F\u002F '' (empty string)\n",[10,1315,1317],{"id":1316},"key-takeaways","Key Takeaways",[1319,1320,1321,1328,1333,1341,1344,1347],"ul",{},[1322,1323,1324,1325,1327],"li",{},"Use the ",[29,1326,31],{}," constructor for parsing — avoid regex and string splitting",[1322,1329,1330,1332],{},[29,1331,212],{}," handles query string parsing, iteration, and modification",[1322,1334,1335,1336,1338,1339],{},"Always use ",[29,1337,940],{}," for parameter values, never ",[29,1340,1012],{},[1322,1342,1343],{},"Provide a base URL when parsing relative URLs",[1322,1345,1346],{},"Watch for double encoding and missing protocol errors",[1322,1348,1349,1352],{},[29,1350,1351],{},"searchParams.get()"," returns null for missing keys and empty string for empty values",[10,1354,1356],{"id":1355},"related-guides","Related Guides",[1319,1358,1359,1366,1372],{},[1322,1360,1361],{},[1362,1363,1365],"a",{"href":1364},"\u002Fguides\u002Furl-structure-explained","URL Structure Explained",[1322,1367,1368],{},[1362,1369,1371],{"href":1370},"\u002Fguides\u002Fquery-parameters-guide","Query Parameters Guide",[1322,1373,1374],{},[1362,1375,1377],{"href":1376},"\u002Fguides\u002Furl-security-best-practices","URL Security Best Practices",[10,1379,1381],{"id":1380},"try-it-yourself","Try It Yourself",[15,1383,1384,1385,1389],{},"Parse and inspect any URL interactively with our free ",[1362,1386,1388],{"href":1387},"\u002Ftools\u002Furl-parser","URL Parser",". Paste a URL and see every component — protocol, host, path, query, and hash — broken down instantly.",[1391,1392,1393],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":39,"searchDepth":78,"depth":78,"links":1395},[1396,1397,1398,1403,1406,1407,1408,1413,1414,1415],{"id":12,"depth":78,"text":13},{"id":23,"depth":78,"text":24},{"id":206,"depth":78,"text":207,"children":1399},[1400,1401,1402],{"id":334,"depth":85,"text":335},{"id":396,"depth":85,"text":397},{"id":465,"depth":85,"text":466},{"id":561,"depth":78,"text":562,"children":1404},[1405],{"id":632,"depth":85,"text":633},{"id":856,"depth":78,"text":857},{"id":921,"depth":78,"text":922},{"id":1069,"depth":78,"text":1070,"children":1409},[1410,1411,1412],{"id":1073,"depth":85,"text":1074},{"id":1170,"depth":85,"text":1171},{"id":1218,"depth":85,"text":1219},{"id":1316,"depth":78,"text":1317},{"id":1355,"depth":78,"text":1356},{"id":1380,"depth":78,"text":1381},"2026-05-28","Learn how to parse URLs and extract query parameters, path segments, hash fragments, and more using JavaScript built-in APIs.","md",{"immutable":81},"\u002Fguides\u002Fextracting-data-from-urls-javascript",{"title":5,"description":1417},"guides\u002Fextracting-data-from-urls-javascript","UIwrxts_DNxHz1DKtqhiEeK-UlR5KjRJsGT1HSNs_9s",1780401333792]