javascript - Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성

javascript] Location 객체의 주요멤버 살펴보기

[코드] getQueryString.js - URL에서 전달인자 추출

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/*
* URL에서 전달인자 추출
* URL의 질의 문자열(쿼리스트링) 에서 &로 구분된 이름=값 전달인자 쌍들을 파싱하여 추출
* 추출한 이름=값 쌍들을 객체의 프로퍼티에 저장하여 이 객체를 결과로서 반환
*
* 함수 사용예)
* var args = getArgs(); //URL에서 args를 파싱
* var q = args.q || ''; //정의된 전달인자가 있으면 사용하고 없으면 기본값 사용
* var n = args.n ? parseInt(args.n) : 10;
*/

function getArgs() {
     var args = new Object();
     var query = location.search.substring(1);  //질의문자열을 얻어온다. (?제거를 위해 문자열자름)
     var pairs = query.split("&");              //&위치에서 분리

     for (var i = 0; i < pairs.length; i++) {
        var pos = pairs[i].indexOf('=');          // "이름 = 값" 을 찾는다.
        if (pos == -1) continue;                  //찾지 못했다면 건너뛴다.
        var argname = pairs[i].substring(0, pos); //이름을 추출
        var value = pairs[i].substring(pos+1);      //값을 추출
        value = decodeURIComponent(value);          //필요하다면 디코딩 수행
        args[argname] = value;                      //객체의 프로퍼티로 저장
     }

     return args; //객체를 반환
}

URL에서 전달인자(쿼리스트링)를 추출하여 다음과 같이 객체로 반환

[코드] 샘플 HTML페이지

Colored By Color Scripter™

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>URL에서 전달인자 추출하기</title>
  <script type="text/javascript" src="getQueryString.js"></script>
  <script>
    var args = getArgs(); //URL에서 args를 파싱
    var q = args.q || ''; //정의된 전달인자가 있으면 사용하고 없으면 기본값 사용
    var n = args.n ? parseInt(args.n) : 10;

    console.log(args);
    document.write("q:"+q);
    document.write("<br/>");
    document.write("n:"+n);
  </script>
</head>
<body>
</body>
</html>

전달인자가 없을경우 기본값이 출력된 모습

전달인자가 있을경우

Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성

단축키

Articles