JavaScript URL Parameter parsing (파라미터 가져오기)

JavaScript URL Parameter parsing (파라미터 가져오기)

JavaScript 에서는 URL Parameter를 파싱해주는 기본적으로 제공하는 함수가 없어서 직접 만들어서 사용해야 합니다.

자주 쓰이는 것 같아 정리하고자 합니다.

 

function getURLParams(url) {
    var result = {};
    url.replace(/[?&]{1}([^=&#]+)=([^&#]*)/g, function(s, k, v) { result[k] = decodeURIComponent(v); });
    return result;
}

많은 방법이 있겠지만 저는 정규식을 사용한 방법을 사용하고 있습니다.

간단하게 설명을 해드리자면,

인자값으로 받은 url 변수의 문자열에서,

'?'혹은 '&' 한개로 시작해서 '=', '&', '#'가 아닌 문자가 1개이상 나온 뒤, '=' 문자가 나오고 '&', '#' 이 아닌 문자가 0개 이상 나오는 문자열을 모두 찾은 뒤,

첫번째 그룹 지어준 부분인 ([^=&#]+)에 해당하는 문자열을 key로, 두번째 그룹 지어준 부분인 ([^&#]*)에 해당하는 문자열을 URI decoding 해준 값을 value로 가지는 배열을 만들어서 반환 시켜줍니다.

 

만약 URL이 "https://jsikim1.tistory.com/112?param1=value1&param2=value2&param3=value3#id1" 라면,

s	k	v
?param1=value1	param1	value1
&param2=value2	param2	value2
&param3=value3	param3	value3

위 표와 같이 나올 것입니다.

위 사진과 같이 원하는 결과가 잘 나옵니다.

 

만약 현재 url값을 파싱하고 싶으시다면

getURLParams(location.search);

위 코드와 같이 location.search를 넣어주시면 되겠죠?

 

이상으로 JavaScript 에서 URL 파라미터 가져오는 방법에 대해 알려드렸습니다.

 

 

제 글에 잘못된 정보, 더 좋은 방법 혹은 정보, 

궁금하신 점, 요청 사항 등이 있으시다면 언제든지 말씀해 주세요!

 

감사합니다.