[JavaScript] 자바스크립트로 URL 파라미터 값 가져오기

요즘은 언어들이 사용하기도 편해지고, 퍼포먼스도 꽤나 좋아져서, 한 가지 언어로만 개발하는 추세는 절대 아닌 듯 합니다..

저도 C++을 주력으로 하는 개발을 하고 있지만, 어쩌다보니 자바스크립트를 건드리고 있네요..

아주 간단한 자바스크립트이기 때문에 부담스럽지는 않지만..

이번 기회에 자바스크립트도 알 수 있으면 더욱 좋은 기회가 아닐까 싶어서, 생각날 때마다 정리해보려고 합니다.

이번 포스팅에서 정리하려는 내용은 자바스크립트를 이용하여 URL 내용에서 파라미터 값을 가져오는 방법입니다.

쉽게 설명하면 다음과 같습니다.

http://blankspace-dev.tistory.com?age=99&name=blankspace

위에 주소에서 age를 함수에 입력하면 99라는 값을 얻고, name을 blankspace 라는 값을 얻고자 하는 함수를 만들어 보려고 합니다.

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

위 함수를 이용하면, 위에 예로 설명한 url에서 각각의 값들을 가져올 수 있습니다.

함수 설명은 다음과 같습니다.

먼저, 함수 인자로 파라미터의 name과 url을 받습니다.

이때, url을 받지 않아도 되는 데, url을 입력하지 않을 경우에 아래 함수에서 현재의 url을 가져오는 코드입니다.

if (!url) url = window.location.href;

이제, url을 name에 따라 값을 가져올 수 있도록 가공해야겠죠.

그래서 아래와 같은 replace와 정규식을 이용하여 url을 변경합니다.

name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);

이후, results[2]로 값을 가져오면, name에 따른 값을 가져올 수 있습니다.

사용 방법은 다음과 같습니다.

기존 url뒤에 ?age=99&name=blankspace 라고 적습니다.

var age = getParameterByName('age'); // "99"
var name = getParameterByName('name'); // "blankspace"
var blank = getParameterByName('blank'); // "" 해당하는 값이 없

직접, html 코드에 적용해봤기 때문에 잘 될겁니다.

이상 포스팅을 마치겠습니다.

서로 이웃 추가는 항상 환영입니다. :)