자바스크립트에서 쿼리 스트링 값을 가져오는 방법

쿼리 스트링이란 무엇인가?

쿼리 스트링은 웹 URL의 끝부분에 위치하며, 특정 데이터를 서버에 전달하기 위해 사용됩니다. 예를 들어, http://example.com/?key=value에서 ?key=value 부분이 쿼리 스트링입니다. 여기서 key는 변수의 이름이고, value는 그 변수의 값입니다.

자바스크립트로 쿼리 스트링 분석하기

자바스크립트에서는 다양한 방법으로 쿼리 스트링을 분석할 수 있습니다. 가장 간단한 방법 중 하나는 window.location.search를 사용하는 것입니다. 이 변수는 현재 페이지의 URL에 있는 쿼리 스트링 부분을 가져옵니다.

var queryString = window.location.search;

이제 queryString 변수에 쿼리 스트링 전체가 저장됩니다.

쿼리 스트링 값을 추출하는 함수 만들기

function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

이 함수는 쿼리 스트링에서 특정 name에 해당하는 값을 반환합니다. 함수를 사용하면 아래와 같이 쉽게 쿼리 스트링 값을 가져올 수 있습니다.

var myValue = getParameterByName('key');

myValue 변수에는 key라는 이름의 쿼리 스트링 값이 저장됩니다.

정규표현식이 중요한 이유

위 함수에서는 정규표현식(Regular Expression)을 사용합니다. 정규표현식은 문자열에서 특정 패턴을 찾을 때 사용되는 도구입니다. 복잡한 문자열 검색 작업을 단순화 할 수 있기 때문에, 쿼리 스트링을 분석할 때 유용하게 사용됩니다.

마무리

쿼리 스트링은 웹 개발에서 중요한 요소 중 하나입니다. 자바스크립트를 활용하면 쿼리 스트링을 쉽게 다룰 수 있으며, 위에서 소개한 함수는 이 작업을 더 간단하고 효과적으로 만들어 줍니다.