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

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

---

URL상에 보이는 파라미터나

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

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

 

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

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

---

---

위와같이 파라미터 정보를 가져왔으니

이제 원하는 값을 뽑아와야하는데

 

여기저기 찾아보면 사람들이 잘 선언해둔 함수들이 존재한다.

역시 잘 만들어둔건 잘 사용해야 옳다고 생각된다.

 

코드를 통해 접근해보자.

---

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

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, " "));
}

위 함수를 이용하여 파라미터 이름만 알면 값을 쉽게 뽑아올 수 있다.

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

 

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

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;
}

이 함수는 그냥 호출만 해주면 된다. 

그러면 파라미터가 객체에 담긴 값을 받을수 있다.

var result = get_query();

//result
{
  category: "1060192",
}

---

이것들 외에도 한두명이 만들어 놓은게 아니니까

많을 수는 있는데

일단 저정도로 충분해 보인다.

 

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