[javascript]url에서 파라미터 추출하기

이번 포스트에서는 URL을 통해 get 방식으로 전달된 파라미터를 Javascript 영역에서 추출해서 사용하는 방법을 알아보자.

 

queryString 추출

queryString이란 url 뒤에 ? 부분 부터로 파라미터들로 구성된 부분이다. 이 값을 뽑아내기 위해서는 location 객체가 가진 search 속성을 사용할 수 있다.

    let url = location.href;
    console.log(url);
    //http://127.0.0.1:5501/12_parameterfromurl.html?name=hong&age=30
    
    let queryString = location.search;
    console.log(queryString);
    // ?name=hong&age=30

queryString은 통 문장으로 반환되기 때문에 필요한 내용들만 추출해서 사용할 필요가 있다.

사용자 정의 함수 활용

먼저 사용자 정의 함수를 이용해서 파라미터를 추출해볼 수 있다. 여기서는 간단한 문자열 처리만 들어가면 된다.

    function getParamMap(queryString) {
      let splited = queryString.replace("?", "").split(/[=?&]/);
      let param = {};
      for (let i = 0; i < splited.length; i++) {
        param[splited[i]] = splited[++i];
      }
      return param;
    }
    
    // http://127.0.0.1:5501/12_parameterfromurl.html?name=hong&age=30
    
    const paramObj = getParamMap(queryString);
    console.log(paramObj.name, paramObj.age); // hong 30

 

URLSearchParams 활용

또는 URLSearchParams라는 객체를 사용하면 보다 폼나게 관련 동작을 처리할 수 있다. 사용법이 매우 직관적이기 때문에 문서를 한번 살펴보기 바란다.

URLSearchParams - Web API | MDN (mozilla.org)

URLSearchParams - Web API | MDN

다음은 활용 예제이다.

    // http://127.0.0.1:5501/12_parameterfromurl.html?name=hong&age=30
    const urlParams = new URLSearchParams(queryString);
    console.log(urlParams.get("name"), urlParams.get("age")); // hong 30  

 

URL 객체의 활용

마지막으로 URL 객체를 활용하는 예를 살펴보자.

URL - Web API | MDN (mozilla.org)

URL - Web API | MDN

    // http://127.0.0.1:5501/12_parameterfromurl.html?name=hong&age=30
    const params = new URL(location).searchParams;
    console.log(params.get("name"), params.get("age")); // hong, 30

URLSearchParams와 유사하게 사용할 수 있는것을 알 수 있다.