[Javascript] URL QueryString 값을 Object(key-value)로 손쉽게 받아오는 방법

자바스크립트에서 URL의 QueryString 값을 쉽게 파싱해서 사용하는 방법이 있습니다.

아래 함수의 리턴 형태는 Object(key-value)이므로 사용하기 용이합니다.

/**
 * URL queryString 값을 (key-value) 형식으로 가져오는 함수
 */
export const getURLParameters = () => {
  const params = {}
  location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
    params[key] = value
  })
  return params
}

 

아래는 해당 함수를 사용한 테스트 케이스입니다.

// before
https://www.google.com/search?q=%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%9E%85%EB%8B%88%EB%8B%A4&oq=%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%9E%85%EB%8B%88%EB%8B%A4&aqs=chrome.0.0l2.1616j0j7&sourceid=chrome&ie=UTF-8

// after
{q: "%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%9E%85%EB%8B%88%EB%8B%A4", oq: "%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%9E%85%EB%8B%88%EB%8B%A4", aqs: "chrome.0.0l2.1616j0j7", sourceid: "chrome", ie: "UTF-8"}