[Javascript] URL 파라미터 값 가져오기 (쿼리스트링 값)

 

Javascript에서 URL에 포함된 파라미터(쿼리스트링)의 값을 읽어오는 방법입니다.

 

1. 현재 페이지의 URL과 파라미터 읽기
2. 특정 파라미터 값 읽기
3. 특정 파라미터가 있는지 체크하기
4. 파라미터 추가, 변경, 삭제하기
5. 전체 파라미터 목록 가져오기

 

1. 현재 페이지의 URL과 파라미터 읽기

현재 페이지의 URL을 가져오는 방법과 쿼리스트링을 가져오는 방법은 지난 포스팅에서 소개했습니다.

[Javascript] 현재 페이지 URL 가져오기

 

간단하게 다시 정리하면

현재 페이지의 URL을 가져오기 위해서는 아래와 같이 하고,

// "https://hianna.tistory.com/325?category=764998"
window.location.href

전체 URL중 쿼리스트링(파라미터)만 가져오고 싶은 경우에는 아래 속성을 참조합니다.

// "?category=764998"
window.location.search

 

 

2. 특정 파라미터 값 읽기

https://dic.daum.net/word/view.do?wordid=ekw000033653&q=coffee

위 URL에는 'wordid', 'q'. 이렇게 2개의 파라미터가 있습니다.

 

전체 URL에서 'wordid'의 값, 'q'의 값을 읽을 수 있습니다.

const url = new URL("https://dic.daum.net/word/view.do?wordid=ekw000033653&q=coffee");

// URLSearchParams 객체
const urlParams = url.searchParams;

// URLSearchParams.get()
document.write(urlParams.get('wordid') + '<br>'); // ekw000033653
document.write(urlParams.get('q') + '<br>'); // coffee

// URLSearchParams.getAll()
document.write(urlParams.getAll('q') + '<br>'); // ['coffee']

const url = new URL("URL문자열")

new URL()을 사용하여 생성된 URL 객체는, URL의 여러 구성 요소를 쉽게 다룰 수 있도록 도와줍니다.

 

url.searchParams

URL 객체중 searchParams 속성은, URL의 파라미터를 다룰 수 있는 객체인 URLSearchParams 객체를 리턴합니다.

 

urlParams.get('파라미터명')

URLSearchParams.get() 함수는 URL의 쿼리스트링에서 '파라미터명'으로 조회된 첫번째 값을 리턴합니다.

 

urlParams.getAll('파라미터명')

URLSearchParams.getAll() 함수는 URL의 쿼리스트링에서 '파라미터명'으로 조회된 모든 값을 배열로 리턴합니다.

위 예제에서는 쿼리스트링에 중복되는 파라미터가 없으므로,

'coffee' 값 1개만을 가지는 배열이 출력되었습니다.

 

 

3. 특정 파라미터가 있는지 체크하기

const urlParams 
= new URLSearchParams("?wordid=ekw000033653&q=coffee");

// URLSearchParams.has()
document.writeln(urlParams.has('wordid')); // true
document.writeln(urlParams.has('name')); // false

new URLSearchParams("쿼리스트링");

URLSearchParams에 쿼리스트링을 전달하여,

URLSearchParams 객체를 직접 생성할 수도 있습니다.

 

urlParams.has('파라미터명')

URLSearchParams.has() 함수를 사용하면,

쿼리스트링에 '파라미터명'에 해당하는 파라미터가 있는지 확인 할 수 있습니다.

 

 

4. 파라미터 추가, 변경, 삭제하기

URLSearchParams 객체의 메서드를 사용하여 파라미터를 추가, 삭제할 수도 있습니다.

const urlParams 
= new URLSearchParams("?wordid=ekw000033653&q=coffee");

// 파라미터 추가(append())
urlParams.append('lang', 'ko');
urlParams.append('lang', 'en');
document.write(urlParams + '<br>'); //wordid=ekw000033653&q=coffee&lang=ko&lang=en

// 파라미터 변경(set())
urlParams.set('lang', 'cn');
document.write(urlParams + '<br>'); // wordid=ekw000033653&q=coffee&lang=cn
urlParams.set('page', '1');
document.write(urlParams + '<br>'); // wordid=ekw000033653&q=coffee&lang=cn&page=1

// 파라미터 삭제
urlParams.delete('lang');
document.write(urlParams); // wordid=ekw000033653&q=coffee&page=1

 파라미터 추가 

urlParams.append('파라미터명', '값')

URLSearchParams.append() 메소드의 파라미터로 전달 된 2개의 값 파라미터에 추가합니다.

위 예제에서 'lang' 파라미터를 2번 추가하고, 

2개의 key가 같은 파라미터가 추가된 것을 확인할 수 있습니다.

 

 파라미터 변경 

urlParams.set('파라미터명', '값')

URLSearchParams.set() 메소드를 이용하면,

기존의 파라미터 값을 변경할 수 있습니다.

만약 같은 key값이 여러개 존재하면 (위 예제처럼),

나머지는 모두 제거하고 1개만 남기고, 그 값을 변경합니다.

만약, 해당 파라미터가 존재하지 않으면 append() 처럼 파라미터를 새로 생성합니다.

 

 파라미터 삭제 

urlParams.delete('파라미터명')

URLSearchParams.delete() 메소드를 사용하면

파라미터의 값을 삭제할 수 있습니다.

이 메소드는 전달된 '파라미터명'인 모든 파리미터를 삭제합니다.

 

 

5. 전체 파라미터 목록 가져오기

key 목록 가져오기 - URLSearchParams.keys()

const urlParams 
= new URLSearchParams("?wordid=ekw000033653&q=coffee");

// key 목록
const keys = urlParams.keys();

for(const key of keys)  {
  document.write(key + '<br>')
}

URLSearchParams.keys() 메소드는 key 목록을 순회할 수 있는 iterator를 반환합니다.

위 예제와 같은 방법으로 key 목록을 가져올 수 있습니다.

 

value 목록 가져오기 - URLSearchParams.values()

const urlParams 
= new URLSearchParams("?wordid=ekw000033653&q=coffee");

// value 목록
const values = urlParams.values();

for(const value of values)  {
  document.write(value + '<br>')
}

URLSearchParams.values() 메소드는 value 목록을 순회할 수 있는 iterator를 반환합니다.

 

key, value 목록 가져오기 - URLSearchParams.entries()

const urlParams 
= new URLSearchParams("?wordid=ekw000033653&q=coffee");

// value 목록
const entries = urlParams.entries();

for(entry of entries)  {
  document.write(`${entry[0]}, ${entry[1]} <br>`)
}

URLSearchParams.entries() 메소드는 key/value 목록을 순회할 수 있는 iterator를 반환합니다.

 

---

 

URL의 파라미터를 받아와서 key, value를 활용하는 방법을 알아보았습니다.

주의해야 할 것은,

이 포스팅에서 소개한 URL, URLSearchParams 객체는

인터넷 익스플로러와 사파리 일부 버전에서는 사용할 수 없다는 것입니다.

사용가능 브라우저는 아래 링크를 참조하세요.

developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#Browser_compatibility

URLSearchParams - Web APIs | MDN