JavaScript로 URL 매개변수 가져오기

URL 매개변수(쿼리 매개변수 또는 쿼리 문자열이라고도 함)는 URL 끝에 연결된 키 값 쌍 집합입니다. URL을 통해 페이지에서 페이지로 또는 클라이언트에서 서버로 소량의 데이터를 보내는 데 사용됩니다.

TL; DR

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

// https://example.com/path/to/page?color=purple&size=M&size=L

urlParams.get('color')     // purple
urlParams.getAll('size')   // ['M', 'L']

URL 매개변수 구조

쿼리 매개변수는 ?(물음표)가 있는 URL 경로와 구분됩니다.

https://example.com/path/to/page?color=purple

첫 번째 매개변수 이후의 각 매개변수는 &(앰퍼샌드)로 결합됩니다.

https://example.com/path/to/page?color=purple&size=M&size=L

이 경우 쿼리 문자열은 color=purple 입니다.

URL의 일부가 될 수 없는 문자(예: 공백)가 있고 일부 다른 문자는 URL에서 특별한 의미를 갖습니다(문자 # ). 이러한 유형의 문자는 인코딩해야 합니다(예: 공백은 %20 로 인코딩됨).

URL 매개변수 가져오기

window.location.search 를 사용하여 쿼리 문자열을 가져올 수 있습니다.

const queryString = window.location.search;

그런 다음 URLSearchParams 을 사용하여 쿼리 문자열의 매개변수를 구문 분석할 수 있습니다.

const urlParams = new URLSearchParams(queryString);

이제 URLSearchParams.get()를 사용하여 지정된 검색 매개변수와 연결된 첫 번째 값을 가져올 수 있습니다.

// https://example.com/path/to/page?color=purple&size=M&size=L

urlParams.get('color')   // purple
urlParams.get('size')    // M
urlParams.get('nothing') // empty string

URL 매개변수의 모든 값 가져오기

이제 URLSearchParams.getAll()를 사용하여 지정된 검색 매개변수와 관련된 모든 값을 가져올 수 있습니다.

// https://example.com/path/to/page?color=purple&size=M&size=L

urlParams.getAll('color') // ['purple']
urlParams.getAll('size')  // ['M', 'L']

URL 매개변수가 존재하는지 확인

URLSearchParams.has()를 사용하여 주어진 매개변수가 존재하는지 확인할 수 있습니다.

// https://example.com/path/to/page?color=purple&size=M&size=L

urlParams.has('color')   // true
urlParams.has('size')    // true
urlParams.has('nothing') // false

URL 매개변수 반복

모든 키를 반복합니다.

const keys = urlParams.keys();

for (const key of keys) {
  console.log(key);
} 

모든 값을 반복합니다.

const values = urlParams.values();

for (const value of values) {
  console.log(value);
}

모든 키/값 쌍을 반복합니다.

const entries = urlParams.entries();

for(const entry of entries) {
  console.log(`${entry[0]} = ${entry[1]}`);
}

인터넷 익스플로러의 경우

URLSearchParams는 IE에서 지원되지 않으므로 URL을 구문 분석하고 쿼리 매개변수를 가져와야 합니다.

function getParameterByName(name) {
  cont url = window.location.search;
  name = name.replace(/[\[\]]/g, '\\$&');

  let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
  let results = regex.exec(url);

  if (!results) {
    return null;
  } 

  if (!results[2]) {
    return '';
  }

  return decodeURIComponent(results[2]);
}

이제 getParameterByName를 사용하여 지정된 검색 매개변수와 연결된 첫 번째 값을 가져올 수 있습니다.

// https://example.com/path/to/page?color=purple&size=M&size=L

getParameterByName('color')   // purple
getParameterByName('size')    // M
getParameterByName('nothing') // null