자바스크립트를 이용한 URL 쿼리스트링(Query String) 파싱 방법

웹 개발에서 URL의 쿼리스트링을 통해 사용자로부터 데이터를 전달받는 경우가 많습니다. 쿼리스트링은 URL 주소 뒤에 붙는 key-value 쌍의 집합으로, 각각의 정보는 '&' 기호로 구분됩니다. 예를 들어 https://devit.koreacreatorfesta.com?&query1=aaa&query2=ㅁㅁㅁ&query3=333와 같은 형태의 URL에서 query1, query2, query3 등의 값을 자바스크립트로 어떻게 추출할 수 있을까요? 본문에서는 URLSearchParams 객체를 이용한 쿼리스트링 값의 추출 방법에 대해 설명드리겠습니다.

 

 

1. URLSearchParams 객체란?

• URL의 쿼리스트링을 쉽게 다룰 수 있도록 설계된 웹 API입니다.
• location.search를 인자로 받아 사용자가 원하는 쿼리스트링 값을 손쉽게 가져오거나 조작할 수 있습니다.

 

2. URLSearchParams의 기본 사용법

• URLSearchParams 객체를 생성한 후, get(), set(), delete(), has()와 같은 메소드를 통해 쿼리스트링을 조작할 수 있습니다.
• 간단한 예제 코드

var strurl = window.location.search;
//strurl = `https://devit.koreacreatorfesta.com/?&query1=aaa&query2=ㅁㅁㅁ&query3=333&query3=444`;
const urlParams = new URLSearchParams(strurl);

 

3. 쿼리스트링 값 추출하기

• 특정 key에 대한 값을 가져오고자 할 때는 get(key) 메소드를 사용합니다.
• 여러 값을 가져오고 싶을 때는 getAll(key) 메소드로 모든 값을 배열로 받을 수 있습니다.

 

4. 함수를 활용한 쿼리스트링 값 추출

• 사용자 정의 함수 searchParam(key)를 통해 원하는 쿼리스트링의 값을 반환할 수 있습니다.
• 예제 함수

function searchParam(urltemp , key) {
    return new URLSearchParams(urltemp).get(key);
}

console.log(searchParam(strurl, 'query1')); //'aaa'

 

5. 복수의 쿼리스트링 파라미터 다루기

• getAll() 메소드를 사용하여 같은 이름을 가진 파라미터의 모든 값을 배열로 추출할 수 있습니다.
• 예제 코드

const urlSearch = new URLSearchParams(location.search);
console.log(urlSearch.getAll('query3')); // ['333', '444']

 

6. 예제소스

위에서 사용했던 함수들을 이용해서 예제소스를 만들었습니다.

파일을 실행하면 로컬파일이기 때문에 strurl변수는 임시( `https://devit.koreacreatorfesta.com/?&query1=aaa&query2=ㅁㅁㅁ&query3=333&query3=444` )로 넣어주었습니다.

파일을 실행하면 결과는 다음과 같습니다.

자바스크립트를 이용한 URL 쿼리스트링(Query String) 파싱 방법.zip

0.00MB

 

결론

자바스크립트의 URLSearchParams 객체는 쿼리스트링을 다루는 간편하고 강력한 방법을 제공합니다. 복잡한 문자열 처리나 정규표현식 없이도 URL의 파라미터를 손쉽게 가져올 수 있어, 웹 개발에 있어 매우 유용한 도구입니다. 현대의 웹 브라우저가 이 API를 지원하기 때문에 보다 쉬운 데이터 처리를 위해 활용해보시길 권장합니다.