Menu
Bounties /Pin to ProfileBookmark
@JaySODec 06, 2022 — #You can use the
Here is an example of how you can use the
@mistamoleculJan 12, 2023 — #When the URL isn't necessarily the current
This is nifty because it allows you to leverage the
How do I get each part of the URL into JavaScript variables?
Sign in
to post a answerDecember 6th, 2022JavaScript
2 Answer(s) ↴
2
possible answer
@JaySODec 06, 2022 — #You can use the window.location object, which contains information about the current URL. This object has several properties that you can use to access different parts of the URL, such as the protocol (e.g. "https:"), the hostname (e.g. "www.example.com"), the path (e.g. "/path/to/page"), the query string (e.g. "?key1=value1&key2=value2"), and the fragment identifier (e.g. "#top").Here is an example of how you can use the
window.location object to get each part of the URL into JavaScript variables:
const currentUrl = window.location;
const protocol = currentUrl.protocol; // e.g. "https:"
const host = currentUrl.host; // e.g. "www.example.com"
const pathname = currentUrl.pathname; // e.g. "/path/to/page"
const search = currentUrl.search; // e.g. "?key1=value1&key2=value2"
const hash = currentUrl.hash; // e.g. "#top"
1
possible answer
@mistamoleculJan 12, 2023 — #When the URL isn't necessarily the current window.location, there is a modern way to parse URL strings. This is also useful when you're working with JavaScript outside the browser, such as Node -- you can import this standard module.
const myURL = 'https://google.com/?ham=true&number=10'
const parsedURL = new URL(myURL)
const protocol = parsedURL.protocol // 'https:'
const querystring = parsedURL.pathname // '?ham=true&number=10'
This is nifty because it allows you to leverage the
URLSearchParams built-in to cleanly interact with querystring properties and values.
parsedURL.searchParams.has('ham') // true
parsedURL.searchParams.get('number') // '10'