Last active
December 15, 2023 07:17
-
-
Save pirate/9298155edda679510723 to your computer and use it in GitHub Desktop.
Parse URL query parameters in ES6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function getUrlParams(search) { | |
const hashes = search.slice(search.indexOf('?') + 1).split('&') | |
const params = {} | |
hashes.map(hash => { | |
const [key, val] = hash.split('=') | |
params[key] = decodeURIComponent(val) | |
}) | |
return params | |
} | |
console.log(getUrlParams(window.location.search)) |
So this fails if you have select multiple
- or any other input with multiple values that's named with square brackets:
<select name="statuses[]" multiple>...
Here's a slight adjustment, hopefully I'm not stepping on any edge cases:
function getUrlParams(search) {
const hashes = search.slice(search.indexOf('?') + 1).split('&')
const params = {}
hashes.map(hash => {
let [key, val] = hash.split('=')
key = decodeURIComponent(key)
if (key.indexOf('[') > -1) { // handle multiple type inputs
if (typeof params[key] === 'undefined') {
params[key] = []
}
params[key].push(decodeURIComponent(val))
} else {
params[key] = decodeURIComponent(val)
}
})
return params
}
Unfortunately even the native URLSearchParams
implementation doesn't handle array query parameters. :(
So, here's another take on array query parameters. Tested on
https://gist.github.com/pirate/9298155edda679510723?abc=foo&def=[asf]&xyz==5&flag&&double&q=test1=test2&keyB=hff92hfgg=&arr[]=ArrayValue1&arr[]=ArrayValue2&arr[]=ArrayValue3&arr2[0]=ArrayValue1&arr2[1]=ArrayValue2&arr2[2]=ArrayValue3&fields=kind,items(title,characteristics/length)
const getQueryParams = () => {
let params = {};
(new URLSearchParams(document.location.search)).forEach((d, e) => {
let a = decodeURIComponent(e), c = decodeURIComponent(d)
if (a.endsWith("[]")) {
a = a.replace("[]", ""), params[a] || (params[a] = []), params[a].push(c)
} else {
let b = a.match(/\[([a-z0-9_\/\s,.-])+\]$/g)
b ? (a = a.replace(b, ""), b = b[0].replace("[", "").replace("]", ""), params[a] || (params[a] = []), params[a][b] = c) : params[a] = c
}
})
return params
}
I create an alternative project if you want to use es6 module, with a very simple api:
query
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've tested all the functions above by https://runkit.com/embed/n18yhf9u2nqc and the conclusion is that url-parse and URLSearchParams is the rightest and most expected ones against the standard url - Node.js built-in module. Even the query-string module is not work as expected.
result: