[JavaScript]URL Query String 파싱 방법

URL Query String 파싱 방법

웹 애플리케이션을 개발할 때, 중요한 정보를 BackEnd에 전달하기 위해 Query String방식을 사용할 수 있습니다. 예를 들어, Naver와 Google은 웹 사이트에서 특정 키워드를 검색하는 경우 해당 키워드를 Query String으로 설정합니다.

 

다음 예시는 stackabuse 사이트에서 url이라는 단어를 검색했을 경우의 URL입니다.

https://stackabuse.com/search/?q=url

참고로 stackabuse 사이트는 개발 자료를 참고하기 위해 제가 주로 방문하는 곳입니다.

 

URL의 Query String은 물음표(?)부터 시작하며, 검색 키워드인 url이 Query String에 포함된 것을 확인할 수 있습니다.

위 URL은 간단한 예시이므로 파싱 하는데, 큰 어려움이 없지만, 다음 예시처럼 Naver 또는 Google은 Query String이 상당히 복잡합니다.

 

다음 예시는 Naver에서 맛집이라는 단어를 검색했을 경우의 URL입니다.

https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=맛집&oquery=맛집&tqi=hz19wlprvxZsscqdQmRssssst04-255238

물음표(?)부터 시작하는 Query String이 상당히 복잡한 것을 확인할 수 있으며, 웹 개발자는 이렇게 복잡한 Query String을 파싱해야하는 상황이 종종 발생합니다.

 

URL이 Query String을 사용했는지 확인할 수 있는 간단한 방법은 크롬과 같은 웹 브라우저의 URL에서 물음표(?) 존재 유무를 확인하면 됩니다.

이번 포스팅은 Query String에서 문자열을 가져오는 몇 가지 방법을 소개합니다.

---

방법 1. URL

가장 기본적인 방법으로 new 키워드를 사용하여 URL 객체 생성 후 searchParams 프로퍼티로 Query String만 가져옵니다. 그다음 get() 메서드로 원하는 값을 가져옵니다.

const urlObject = new URL(`https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=맛집&oquery=맛집&tqi=hz19wlprvxZsscqdQmRssssst04-255238`);

const queryString = urlObject.searchParams;

console.log(queryString.get('sm'));     // tab_hty.top
console.log(queryString.get('where'));  // nexearch
console.log(queryString.get('query'));  // 맛집
console.log(queryString.get('oquery')); // 맛집

---

방법 2. URLSearchParams

두 번째 방법으로 new 키워드를 사용하여 URLSearchParams 객체 생성 후 get() 메서드로 원하는 값을 가져옵니다.

 

다음 예제는 new URLSearchParams()에 URL을 전달 후 get() 메서드로 where, query, oquery에 해당하는 값을 가져옵니다.

const urlSearchParamsObject = new URLSearchParams('https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=맛집&oquery=맛집&tqi=hz19wlprvxZsscqdQmRssssst04-255238');

console.log(urlSearchParamsObject.get('where'));  // nexearch
console.log(urlSearchParamsObject.get('query'));  // 맛집
console.log(urlSearchParamsObject.get('oquery')); // 맛집

 

URL이 너무 길다면, 다음 예제처럼 URL의 Query String만 new URLSearchParams()에 전달할 수 있습니다.

const urlSearchParamsObject = new URLSearchParams('sm=tab_hty.top&where=nexearch&query=맛집&oquery=맛집&tqi=hz19wlprvxZsscqdQmRssssst04-255238');

console.log(urlSearchParamsObject.get('sm'));     // tab_hty.top
console.log(urlSearchParamsObject.get('where'));  // nexearch
console.log(urlSearchParamsObject.get('query'));  // 맛집
console.log(urlSearchParamsObject.get('oquery')); // 맛집

 

URL에 존재하는 모든 Query String을 가져오고 싶다면, 다음 예제처럼 URLSearchParams에서 제공하는 keys() 메서드를 사용하여 모든 키를 추출한 뒤 반복문으로 해당 키에 해당하는 값을 가져옵니다.

const urlSearchParamsObject = new URLSearchParams('sm=tab_hty.top&where=nexearch&query=맛집&oquery=맛집&tqi=hz19wlprvxZsscqdQmRssssst04-255238');

for (const key of urlSearchParamsObject.keys()) {
  console.log(urlSearchParamsObject.get(key));
}

[실행 결과]