자바스크립트를 사용하여
URL 주소로 입력된 쿼리스트링 값을 객체로 변환하는 방법에 대하여 알아보려고 합니다.
# 자바스크립트 쿼리스트링 객체 변환하기
쿼리스트링은 주소창에 입력된 파라미터 값으로 ?keyword=webisfree와 같이 사용된 문자열을 말합니다. 이 값을 사용하면 웹페이지에 특정한 값을 URL 주소로 쉽게 전달 받을 수 있습니다.
@ 쿼리스트링의 장점?물론 파라미터 값을 전달하는 방법은 다른 방법도 있지만 이 방법만의
가장 큰 장점은 페이지를 이동해도 여전히 파라미터 값을 유지할 수 있다는 점입니다. 쉽게 말해 뒤로 가기 버튼을 눌러도 이 값은 url에 그대로 남아있죠.
그렇다면 어떻게 하면 쿼리스트링을 객체로 변환할 수 있을까요?
우선 객체로 왜 변환할까요? 가장 큰 이유는 값을 가져오거나 변경하기 편하기 때문입니다. 쿼리스트링 자체를 변환하려면 정규표현식이나 일치하는 문자열을 찾아 바꿔야하죠. 하지만 객체로 바꿔두면 Key, Value 페어로 쉽게 값을 찾고 저장하는 것이 가능하죠.
! 자바스크립트 쿼리스트링 객체 변환 예제
그렇다면 이제 방법을 알아봅니다. 아래와 같이 두 가지 방법을 사용할 수 있습니다.
@ 첫 번째 방법이 방법은 location API를 사용해 쿼리스트링을 읽어온 후 replace() 함수를 사용해 객체 리터럴로 변환 후 다시 JSON.parse()를 사용하여 파싱하는 방법입니다. 아래를 봐주세요.
현재 URL 주소
https://webisfree.com/?a=web&b=is&c=free
이제 위의 a, b, c를 가져와 변환합니다.
var search = location.search.substring(1);
var searchObj = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
console.log(searchObj );
// 출력 결과
{a: 'web', b: 'is', c: 'free')
결과를 확인하면 쿼리스트링이 객체로 잘 변환된 것을 확인할 수 있습니다.
@ 두 번째 방법다음 방법으로 가장 많이 사용되는 방법 중 하나입니다. 바로
URLSearchParams를 사용하는 방법이죠. URLSearchParams는 코드가 간결합니다. 먼저 앞에 있는 queryStrToObj() 함수에 인자로 현재의 쿼리스트링을 넘겨주고 결과로 Iterator를 전달 받을 수 있습니다. 이 값을 paramsToObj() 함수를 사용하여 객체의 key와 value로 조합합니다.
queryStrToObj = () => {
const entries = new URLSearchParams(location.search).entries();
const obj = paramsToObject(entries);
return obj;
};
function paramsToObject(entries) {
const result = {}
for(const [key, value] of entries) {
result[key] = value;
}
return result;
};
출력 결과는 동일합니다.
console.log(searchObj );
// 출력 결과
{a: 'web', b: 'is', c: 'free')
여기까지 두 가지 방법의 자바스크립트 쿼리스트링 문자열을 객체로 변환하는 방법에 대하여 알아보았습니다. 참고로 두 가지 방법 중에서 후자인 URLSearchParams를 많이 사용하고 선호합니다.
! 팁과 정보
이와같이 쿼리스트링을 객체로 변환하면 단점도 있는데요... 바로
쿼리스트링에 같은 파라미터가 중복해 존재하는 경우입니다. 즉
객체는 동일한 네이밍의 키 값을 가질 수 없기 때문이죠. 이런 이유로 중복된 파라미터 키가 존재한다면 객체로 변환하는 방법이 아닌 다른 방법을 사용하는게 좋습니다.