[JavaScript] URL 파라미터 값 가져오기 (feat. location.search / getParameterByName)

- URL 파라미터 값 가져오기 -

---

URL상에 보이는 파라미터나

 

location.href 를 이용하여 이동할때 보내는 파라미터 값을

 

스크립트로 가져와서 사용해 보도록 하자

---

기본적으로 자바스크립트의 내장 함수인

 

location.search 를 이용하여 URL에 물음표 뒤에 있는 파라미터들을 가져올수 있다.

 

 

 

위와같이 파라미터 정보를 가져오며 저기서 이제 원하는 값을 뽑아와야하는데

 

널리 퍼져 많은 사람들이 사용하고있는 함수들이 있다 

 

내장되어 있는게 아니라 선언을 해줘야한다.

 

선언만 해주면 여타 함수를 호출하는것과 마찬가지로 호출해 사용해주면 된다.

---

1. 정규식 표현을 이용한 함수

 

 

1 2 3 4 5 6

function getParameterByName(name) {         name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");         var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),                 results = regex.exec(location.search);         return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));     } Colored by Color Scripter

cs

 

getParameterByName(파라미터 이름) 함수를 사용해 쉽게 가져올 수 있다. 사용법은 다음과 같다.

 

1

var patId = getParameterByName('category'); // 1060192

cs

 

 

2. 모든 파라미터를 객체 형식으로 가져오는 함수

 

1 2 3 4 5 6 7 8 9

function get_query(){     var url = document.location.href;     var qs = url.substring(url.indexOf('?') + 1).split('&');     for(var i = 0, result = {}; i < qs.length; i++){         qs[i] = qs[i].split('=');         result[qs[i][0]] = decodeURIComponent(qs[i][1]);     }     return result; } Colored by Color Scripter

cs

 

사용법은 역시 여타 함수들과 마찬가지로 호출만 해준다.

 

1

var result = get_query();

cs

 

만약 파라미터가 ?name=mineIt&age=goodDay&you=andMe&test 라고 가정하여 사용한다 치면

 

결과는 다음과 같다.

 

1 2 3 4 5 6

{   name: "minelt",   age: "goodDay",   you: "andMe",   test : undefined }

cs

---

 

출처 : mine-it-record.tistory.com/278

 

출처 : https://fellowtuts.com/jquery/getting-query-string-values-in-javascript/?a=a