javascript URL객체 총정리

오늘은 URL객체에 대해 알아볼 것이다. Javascript에는 url을 간편하게 다룰 수 있도록 URL객체가 마련되어 있다. 이것을 사용하면 프로토콜, 파라미터, 호스트 네임 변경과 같은 작업을 편하게 할 수 있다. 먼저 아래의 코드를 보자.

var url = new URL("http://testurl.co.kr:8080/path/main.html?param1=1&param2=3");

hash: ""
host: "testurl.co.kr:8080"
hostname: "testurl.co.kr"
href: "http://testurl.co.kr:8080/path/main.html?param1=1&param2=3"
origin: "http://testurl.co.kr:8080"
password: ""
pathname: "/path/main.html"
port: "8080"
protocol: "http:"
search: "?param1=1&param2=3"
searchParams: URLSearchParams {}
username: ""

위의 코드는 javascript로 URL객체를 생성한 것이다. URL객체를 생성하기 위해서는 생성자에 기본적인 URL을 입력해주어야 한다. 'http://'또는 'https://'부터 url 형식에 맞게 작성해야한다. 아래는 생성된 URL객체가 갖고 있는 값이다. URL객체는 hash, host, hostname, href 등 여러가지 내용을 담고 있는데, 이 객체가 갖고있는 값들을 하나씩 살펴보자.

 

1. 현재 페이지 내 위치

<div id="top">
.
.
.

<a href="#top">top</a>

var url = new URL("http://testurl.co.kr?param1=1&param2=3#top")
console.log(url.hash) 	//결과 : top

url.hash="bottom"
console.log(url.hash) 	//결과 : bottom

hash값은 페이지 내에서 위치를 이동하는 경우에 사용할 수 있는 값이다. 위의 코드를 살펴보자. div 아래에 많은 내용이 담겨있어서 스크롤이 생겼다. 이 때, 하단에 top버튼이 있어서, 이것을 클릭하면 id가 top인 곳으로 이동하게 된다. 이때 사용할 수 있는 것이 hash이다.  

 

위와같은 방법으로 이동을 하고나면, url뒤에 "#top"이 생긴다. url.hash를 통해서 값을 받아올 수도 있고, 값을 설정할 수도 있다.

 

2. URL이 표시하는 경로

var url = new URL("http://testurl.co.kr:8080/path/main.html");
console.log(url.port)		//결과 : "8080"
console.log(url.hostName)	//결과 : "testurl.co.kr"
console.log(url.host)		//결과 : "testurl.co.kr:8080"
console.log(url.path)		//결과 : "/path/main.html"
console.log(url.origin)		//결과 : "http://testurl.co.kr:8080"

URL에는 여러가지 정보가 담겨있다. host(주인, 주체자)는 내가 접근하려는 서버를 의미한다.hostName은 사이트의 도메인 또는 아이피를 의미한다.  host는 웹사이트 또는 프로그램이 실행되고 있는 포트번호를 함께 표한다. path는 해당 서버에 요청할 자원의 위치 또는 수행할 일을 의미한다. origin은 프로토콜, 서버이름, 포트를 포함한다.

 

 

 

3. 파라미터

var url = new URL("http://testurl.co.kr?param1=1&param2=3#top")
console.log(url.search)			//결과 : "?param1=1&param2=3"
console.log(url.searchParams)		//결과 : URLSearchParams

값을 전달하기 위해서 파라미터를 사용하는데, search를 url의 파라미터부분을 그대로 가져올 수 있다. searchParams 속성은, 또 하나의 객체로 이루어져 있는데 이를 사용면 파라미터를 간편하게 다룰 수 있다.

 

 
//파라미터에 값을 설정할 수 있는 함수
append([파라미터명], [파라미터값]) : 파라미터를 추가
url.searchParams.delete("param1", "value")

delete([파라미터명]) : 파라미터 삭제
url.searchParams.delete("param1")

set([파라미터명], [파라미터값]) : 파라미터 값이 있으면, 값을 입력한 값으로 바꾸고, 없으면 값을 설정함
searchParams.set("param1","111")


//파라미터의 값 가져오기 또는 존재여부 확인
get([파라미터명]) : 특정 파라미터 값 가져올 수 있는 함수
url.searchParams.get("param1") //결과 : 1

has([파라미터명]) : 파라미터가 있는지 확인 
url.searchParams.has("param1") //결과 : true


//파라미터의 값을 순차적으로 접근할 수 있는 함수
forEach([함수]) : 모든 파라미터에 담긴 값을 가져올 수 있는 함수
url.searchParams.forEach(function(value,key) {console.log(key,value)}) //결과 : param1 1 / param2 2

entries() : 모든 파라미터에 접근할 수 있는 Iterator 반환
keys() : 모든 key에 접근할 수 있는Iterator 반환
values() : 모든 값들을 가져올 수 있는 함수

url.searchParams.keys();
url.searchParams.values();
url.entries();

var keys = url.searchParams.keys();
while(true) {
	var itrKeys = keys.next()
	if (itrKeys.done) break;
	console.log(itrKeys.value);
}

//기타
sort() : 파라미터명을 오름차순으로 정렬 
url.searchParams.sort();

toString() : url중 ?이후로 값을 리턴
url.searchParams.toString() //결과 : param1=1&param2=2

 

4. URL값을 string으로 받기

아래의 속성 및 함수들은 동일한 결과를 리턴합니다. 한글 및 특수문자가 있는 경우에는 url에 사용할 수 있는 값으로 자동으로 변환한 뒤 리턴합니다.

var url = new URL("http://testurl.co.kr?param1=1&param2='특수문자'#top")
console.log(url.href)		//결과 : "http://testurl.co.kr/?param1=1&param2=%27%ED%8A%B9%EC%88%98%EB%AC%B8%EC%9E%90%27#top"
console.log(url.toString())	//결과 : "http://testurl.co.kr/?param1=1&param2=%27%ED%8A%B9%EC%88%98%EB%AC%B8%EC%9E%90%27#top"
console.log(url.toJSON())	//결과 : "http://testurl.co.kr/?param1=1&param2=%27%ED%8A%B9%EC%88%98%EB%AC%B8%EC%9E%90%27#top"