자바스크립트에서 URL 쿼리스트링(query string) 쉽게 가져오는 방법

웹페이지에서 url/uri를 통해서 전달된 쿼리스트링 정보를 자바스크립트에서 읽어오는 방법에 대하여 알아봅니다.

# 쿼리스트링 정보 자바스크립트 읽어오는 방법

웹페이지로 정보를 전달하고 이를 읽어오는 방법으로 쿼리스트링(query string)을 통해 전달할 수 있습니다. 이렇게 전달된 경우 아래와 같은 형태의 url 주소를 가지고 있겠죠.

만약 자바스크립트를 사용하여 전달 된 파라미터 값을 읽으려면 어떻게 할까요? 방법을 생각해보면 아래와 같이 떠오를 수 있습니다.

@ location.search 값에 split() 사용 또는 정규표현식 사용하기
split()은 특정 문자를 기준으로 문자열을 자르기 때문에 & 기호를 기준으로 잘라 원하는 값을 찾을 수 있습니다. 다만 간단한 방법은 아니죠.

@ URLSearchParams를 사용하는 방법
오늘 알아볼 방법은 바로 이 방법입니다. 최근 브라우저에서는 URLSearchParams를 사용할 수 있는데요 ~ 이를 사용하면 간단하게 원하는 값을 가장 쉽고 빠르게 가져올 수 있습니다.

URLSearchParams

사용하기 위해서는 일단 URLSearchParams()에 파라미터로 location.search를 넘겨야합니다.

이제 URLSearch를 사용하여 get(), set() 등의 편리한 메소드 역시 지원합니다.

has()  //  값의 여부를 불리언으로 반환
get()  //  일치하는 경우 해당하는 값을 반환함
getAll()  //  일치하는 값이 여러개인 경우 배열로 모두 반환함
delete()  //  특정 값을 삭제 함

append(a, b)  // 새로운 값을 append하여 추가함
set(a, b)  //  값을 변경 또는기존 값을 바꿈

그럼 아래는 간단한 예제입니다.


[[ 알아둘 것 ]] 웹사이트가 hash #를 사용하는 경우
프론트엔드의 환경 즉 vue, react 등의 프레임워크에서 history 모드가 아니라면 location.search를 통해 쿼리스트링 값을 가져올 수 없으므로 여기서의 방법은 적용하기 어렵습니다. 이 경우 location.hash 값을 사용하여 정규식을 사용하는 방법이 많이 사용됩니다. 이 점 알아두시기 바랍니다.

# URLSearchParams 예제보기

그럼 간단한 예제를 만들고 살펴보겠습니다. 먼저 값을 찾기 위해서 이를 사용하여 간단한 함수를 만들고 인자로 찾을 값을 넘기도록 해보겠습니다.

만약 주소가 아래와 같다면?

여기서 no의 값 123을 가져오기 위해서 searchParam()이라는 함수를 만들어보겠습니다.

코드는 매우 간단합니다. 위 함수 searchParam()은 어떤 값을 넘기면 URL 파라미터에서 찾아 일치하는 값을 반환하게 됩니다.

매우 간단하죠? 문자열을 자르거나 정규표현식을 이용하는 것 보다 훨씬 단순하며 더 많은 메소드를 사용하여 활용할 수 있습니다.

! 쿼리스트링으로 넘어오는 파라미터가 복수개인 경우

한 개가 아닌 만약 여러개의 값이 넘어올 경우에는 getAll() 메소드를 사용합니다. 예를들어 아래와 같은 주소인 경우


a의 값이 한 개 이상이므로 배열로 전달 받기 위해서 get()이 아닌 getAll()을 사용합니다.

이제 출력해보면 a의 값은 배열로 다음과 같이 나타납니다.


여기까지 URLSearchParams API에 대하여 알아봤습니다.