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



# 쿼리스트링 정보 자바스크립트 읽어오는 방법웹페이지로 정보를 전달하고 이를 읽어오는 방법으로 쿼리스트링(query string)을 통해 전달할 수 있습니다. 이렇게 전달된 경우 아래와 같은 형태의 url 주소를 가지고 있겠죠.
https://webisfree.com/?name=webisfree&no=123&order=5

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

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

@ URLSearchParams를 사용하는 방법
오늘 알아볼 방법은 바로 이 방법입니다. 최근 브라우저에서는 URLSearchParams를 사용할 수 있는데요 ~ 이를 사용하면 간단하게 원하는 값을 가장 쉽고 빠르게 가져올 수 있습니다. get(), set() 등의 편리한 메소드 역시 지원합니다.

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

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


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




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

만약 주소가 아래와 같다면?
https://webisfree.com/?name=webisfree&no=123&order=5

여기서 no의 값 123을 가져오기 위해서 searchParam()이라는 함수를 만들어보겠습니다.
function searchParam(key) {
  return new URLSearchParams(location.search).get(key);
};

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

// 123을 출력함

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