안녕하세요. 혀코입니다.
이번 시간에서 JavaScript를 사용해 URL의 특정 정보를 추출해서 조작하는 방법에 대해서 알아보겠습니다.
현재 웹사이트의 url 값을 가져오는 방법
const url = window.location.href;
console.log(url)
// https://www.tistory.com
URL에서 ID 값을 추출하는 방법
어느 웹페이지의 특정 섹션으로 바로 이동할 수 있도록 특정 섹션에 ID 값이 걸려 있는 URL의 경우, URL 마지막에 # 심볼과 같이 쓰인 단어를 알아내는 방법입니다.
let address = 'https://smilehugo.tistory.com/entry/how-to-manipulate-url-using-javascript#examples';
const url = new URL(address);
console.log(url.hash);
// #examples
URL에서 http 프로토콜 값을 추출하는 방법
프로토콜 값으로 https: 또는 http: 값을 추출하는 방법입니다.
const address = window.location.href;
const url = new URL(address);
console.log(url.protocol);
// https:URL에서 도메인 값을 추출하는 방법
포트번호를 제외한 도메인 주소를 가져오는 방법입니다.
let address = 'https://smilehugo.tistory.com:4402/entry/how-to-manipulate-url-using-javascript#examples';
const url = new URL(address);
console.log(url.hostname);
// smilehugo.tistory.com
URL에서 포트 값을 추출하는 방법
port를 사용합니다.
let address = 'https://smilehugo.tistory.com:4402/entry/how-to-manipulate-url-using-javascript#examples';
const url = new URL(address);
console.log(url.port);
// 4402
URL에서 도메인 값 + 포트 값을 추출하는 방법
도메인 값 + 포트 값을 같이 추출하려면 host 를 사용합니다. 이때, http: 프로토콜의 기본 포트 80과 https: 프로토콜의 기본 포트 443인 경우 포트 값을 출력하지 않습니다.
let address = 'https://smilehugo.tistory.com:4402/entry/how-to-manipulate-url-using-javascript#examples';
const url = new URL(address);
console.log(url.host);
// smilehugo.tistory.com:4402
URL에서 프로토콜 + 도메인 + 포트 값을 한번에 추출하는 방법
origin을 사용합니다. 프로토콜 앞의 blob은 추출하지 않습니다.
let address = 'blob:https://smilehugo.tistory.com:4402/entry/how-to-manipulate-url-using-javascript#examples';
const url = new URL(address);
console.log(url.origin);
// https://smilehugo.tistory.com:4402
URL에서 도메인 뒤의 path 값을 추출하는 방법
pathname을 사용합니다. 이때 URL의 끝의 # 또는 ? 심볼 이후의 값을 추출되지 않습니다. 또한 url이 앞에 blob:을 포함하지 않아야 정상적으로 추출할 수 있습니다.
let address = 'https://smilehugo.tistory.com:4402/entry/how-to-manipulate-url-using-javascript#examples';
const url = new URL(address);
console.log(url.pathname);
// /entry/how-to-manipulate-url-using-javascript
URL에서 Query 값을 추출하는 방법
search를 사용합니다.
let address = 'https://smilehugo.tistory.com:4402/entry/how-to-manipulate-url-using-javascript?q=123&r=234';
const url = new URL(address);
console.log(url.search);
// ?q=123&r=234
URL에서 Query 값 중 특정 Key 값을 추출하는 방법
searchParams.get() 메소드를 사용합니다.
let address = 'https://smilehugo.tistory.com:4402/entry/how-to-manipulate-url-using-javascript?q=123&r=234';
const url = new URL(address);
console.log(url.searchParams.get('q'));
// 123
URL에서 Query 값 중 특정 Key 값을 변경하는 방법
searchParams.set() 메소드를 사용합니다.
let address = 'https://smilehugo.tistory.com:4402/entry/how-to-manipulate-url-using-javascript?q=123&r=234';
const url = new URL(address);
url.searchParams.set('q', '456');
console.log(url.href)
// https://smilehugo.tistory.com:4402/entry/how-to-manipulate-url-using-javascript?q=456&r=234
위에 방법들을 응용해 보자면, if .. else 구문을 통해 특정 URL을 확인해서 특정 스크립트를 실행해서 웹페이지 컨텐츠를 변경할 수 있고, 웹사이트의 URL들을 조건에 맞게 변경해서 새로운 URL로 보내주는 것이 가능합니다.
이렇게 JavaScript를 사용해 URL의 특정 정보를 추출해서 조작하는 방법에 대해서 알아봤습니다.
해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글