웹 개발을 하다 보면 URL에 포함된 GET 매개변수(쿼리 문자열)의 값을 JavaScript로 읽어와야 하는 경우가 자주 있습니다. 예를 들어 ?imageSize=440&color=blue처럼 전달된 값을 화면에 표시하거나 로직에 활용할 수 있습니다.
JavaScript에서는 내장 객체인 URL과 URLSearchParams를 사용하면 별도의 라이브러리 없이 간단하게 매개변수 값을 가져올 수 있습니다.
핵심 코드 설명
- new URL(urlString): 문자열 형태의 URL을 URL 객체로 변환합니다.
- url.searchParams: URL 객체에서 쿼리 문자열 부분을 다루는
URLSearchParams객체를 반환합니다. - urlParams.get('키이름'): 해당 키에 대응하는 매개변수 값을 반환합니다. 키가 존재하지 않으면
null을 반환합니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>URL에서 GET 매개변수 가져오기</h1>
<div class="sample">https://www.google.com?imageSize=440&color=blue</div>
<div style="font-weight: bold;" class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 URL에서 imageSize와 color 값을 가져와 표시합니다.
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
var url = new URL(sampleEle.innerText);
var urlParams = url.searchParams;
var imageSize = urlParams.get("imageSize");
var color = urlParams.get("color");
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML += '이미지 크기 = ' + imageSize + '<br>' + '이미지 색상 = ' + color;
});
</script>
</body>
</html>실행 결과
페이지가 로드되면 빨간색으로 표시된 샘플 URL이 나타납니다.
'클릭하세요' 버튼을 누르면 아래와 같이 URL에서 추출한 매개변수 값이 결과 영역에 출력됩니다.
정리
new URL()과 searchParams.get() 조합은 현대 브라우저에서 널리 지원되므로, 정규식이나 문자열 파싱 없이도 안전하고 직관적으로 GET 매개변수를 처리할 수 있습니다. 여러 개의 매개변수를 다룰 때는 getAll(), has(), forEach() 같은 메서드도 함께 활용해 보세요.