Query Parameters in JavaScript (3+1 Ways)

Query parameters are a bit tricky (pain) to deal with. Especially if you want to modify just one, say remove one parameter but not the others. David goes through how to do that using the Hacky Way™️, Regex, or plain JavaScript + 1 extra tool-based way depending on the circumstance.

🗿 MILESTONES
⏯ 01:06 What are query parameters⁉️
⏯ 03:34 Hacky strategy
⏯ 05:35 Using Regex
⏯ 11:03 Using JavaScript "Perfect Way"

Code from the video

The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.

DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!

DevTips has a sister channel called Fun Fun Function, check it out!

#javascript #queryparameters #regex

[OfficialDevTips]

That cool inline evaluation thing is called *Quokka*

[normanperrin]

Instead of creating an `<a>` element, you could use `new
Also in node you could require the `url` lib and use it with `URLSearchParams` or `URL`.

If you don't want to split the string yourself you could initialize an `URL` and then access the `url.search` for the search string, or `searchParams` for access the interface of `URLSearchParams`.

[shgyskzer]

I knew this wouldn't have the real JavaScript solution as soon as I saw `const URL`.

Best JavaScript solution:

const url = new URL('...');



Done.

[cspear]

Can you also teach how we design our own query parameters?

[MightyArts]

Hey quick question, what's the name of the VSCode extension that it tells you the value / type etc. of an element or variable when you do //? ? Thanks in advance :D

[matthewbarbara]

Each time I needed query params to be allowed in the URL I've always used ?something=value. However, few months ago I needed to convert a JSON object into a query parameter to be passed in the URL and my colleague asked me why would I use such technique to pass the object in the URL rather than having a stringified JSON object pasted in the URL directly.

Whilst this sound very ugly to me I could not really provide him an answer more than that most websites pass parameters in the url with ?something=value.

[AlvarLagerlof]

How about this? You can extract anything after.

const params = new Object()

url
.split("?")[1]
.split("&")
.forEach(param => {
const [key, value] = param.split("=")
params[key] = value
})

console.log(params["filter"])

[Xizmoify]

Not sure if it fits this channel, but perhaps working with node.js and some websockets. Or perhaps building your own npm module

[mykolasenechyn]

How are getting variable values inline in your code?

[pureretro]

Splitting the new URL on the question mark in the 3rd example seemed like a quick solution (although one I'd probably use myself) rather than rebuild the URL from the location.protocol, host and pathname parts. Still, all these options work so it's all good. :-)

[MrPDTaylor]

I just learned this for the first time earlier today! Mere coincidence, I think not!

[HashimWarren]

why does a.search only produce what's after the ? mark

[DramDisturbr]

Eeyyy new intro! Now some sound effects please! :)

[zeocamo]

Why not just use the new Url() ??? This 3 ways look like walking over the sea to get water

[HeeyStrong]

Good to know the good ways of querying those params, thanks lel

[SamzehGFX]

I created a js micro library for parameter manipulation. Helped me a bunch on some recent projects...

[UniBreakfast]

God, the muar from your sweater is painful.)))

[zeocamo]

Why not just use the new Url() ??? This 3 ways look like walking over the sea to get water