URL & URLSearchParams
On this page
URL
Docs: developer.mozilla.org/en...URL
js
const url = new URL('https://mysite.com/login?user=zander&page=news#hello')url.hostname // mysite.comurl.pathname // /loginurl.href // https://mysite.com/login?user=zander&page=news#hellourl.origin // https://mysite.comurl.search // ?user=zander&page=newsurl.hash // #hello
URLSearchParams
Docs: developer.mozilla.org/en...ams
js
// example.com?much=wowconst params = new URLSearchParams('https://mysite.com/login?user=zander&page=news#hello',)params.has('user') // trueparams.get('user') // 'zander'params.set('page', 'code')params.toString() // user=zander&page=codefor ([key, value] of params) {// ...}params.delete('page')params.toString() // user=zander
To convert a url with search params to an object:
ts
// one linerconst params = Object.fromEntries(new URLSearchParams(new URL('https://mysite.com/login?user=zander&page=news#hello').search,),)// multi-lineconst url = new URL('https://mysite.com/login?user=zander&page=news#hello')const urlParams = new URLSearchParams(url.search)const params = Object.fromEntries(urlParams)
Polyfill: github.com/ungap/ur...h-params
Use proper-url-join
to construct a url
github.com/moxystud...url-join
ts
import urlJoin from 'proper-url-join'urlJoin('foo', 'bar') // /foo/barurlJoin('/foo/', '/bar/') // /foo/barurlJoin('foo', '', 'bar') // /foo/barurlJoin('foo', undefined, 'bar') // /foo/barurlJoin('foo', null, 'bar') // /foo/bar// With leading & trailing slash optionsurlJoin('foo', 'bar', { leadingSlash: false }) // foo/barurlJoin('foo', 'bar', { trailingSlash: true }) // /foo/bar/urlJoin('foo', 'bar', { leadingSlash: false, trailingSlash: true }) // foo/bar/// Absolute URLsurlJoin('http://google.com', 'foo') // http://google.com/foo// Protocol relative URLsurlJoin('//google.com', 'foo', { protocolRelative: true }) // //google.com/foo// With query string as an url parturlJoin('foo', 'bar?queryString') // /foo/bar?queryStringurlJoin('foo', 'bar?queryString', { trailingSlash: true }) // /foo/bar/?queryString// With query string as an objecturlJoin('foo', { query: { biz: 'buz', foo: 'bar' } }) // /foo?biz=buz&foo=bar// With both query string as an url part and an objecturlJoin('foo', 'bar?queryString', { query: { biz: 'buz', foo: 'bar' } }) // /foo/bar?biz=buz&foo=bar&queryString