If you want to access the location.search parameters with JavaScript and have a key / value object returned, here's a snippet for you:
/**
* Avoid tag injections into URL params
* @param {string} html
* @param {HTMLElement} [tag]
* @return {string}
*/
function getEscapedURLString(html, tag = document.createElement(`textarea`)) {
tag.textContent = html
return tag.innerHTML
}
/**
* Returns a key value object of the given locationSearch expecting it to
* be window.location.search
*
* E.g. ('?a=1&b=2') => {a: 1, b: 2}
*
* @param {string} [locationSearch] - normally window.location.search
* @return {object} key value presentation of search params
*/
function getLocationSearchParameters(locationSearch = window.location.search) {
const queryParameters = {}
let nameValue
if (!locationSearch || locationSearch === `?`) {
return queryParameters
}
// remove '?' symbol at the beginning
locationSearch.substr(1).split(`&`).forEach((searchPart) => {
nameValue = searchPart.split(`=`)
queryParameters[nameValue[0].toLowerCase()] = getEscapedURLString(nameValue[1])
})
return queryParameters
}
Code language: JavaScript (javascript)
How to use it
console.log(
getLocationSearchParameters('?first=test&second=hello&third=world')
);
Code language: JavaScript (javascript)
Output
Object {
first: "test",
second: "hello",
third: "world"
}
Code language: CSS (css)
Jest Unit Tests
I even have some unit tests for you, using Jest
describe(`getLocationSearchParameters`, () => {
test(`should return the correct array given '?test1=a&test2=b'`, () => {
const result = getLocationSearchParameters(`?test1=a&test2=b`)
const expected = {
test1: `a`,
test2: `b`
}
expect(result).toEqual(expected)
})
test(`should return empty object`, () => {
const result = getLocationSearchParameters(`?`)
expect(result).toEqual(expect.objectContaining({}))
})
})
Code language: JavaScript (javascript)
Mentions