JavaScript를 사용하여 URL에서 모든 데이터 값을 얻는 방법

JavaScript의 URL 생성자 메서드를 사용하여 URL에서 모든 데이터 값을 가져오는 방법을 알아보세요.

웹사이트에서 일종의 내부 검색 기능을 구축하고 있다고 가정해 보겠습니다. 제대로 하려면 URL 문자열의 모든 데이터 값에 액세스해야 합니다.

다행히 JavaScript에는 new URL()이라는 생성자 메서드가 있습니다. 이를 통해 URL을 URL의 모든 속성과 값에 대해 잘 정리된 개요를 제공하는 객체로 변환할 수 있습니다.

사용하려면 변수를 만들고 new URL('your-url') 값을 할당하세요. . 예를 들어, 아래에서는 TechStacker 기사 중 하나에 대한 URL을 기반으로 URL 개체를 만들고 있습니다.

const urlData = new URL('https://techstacker.com/how-to-detect-double-clicks-with-vanilla-javascript');

이제 결과에서 로그아웃해 보십시오:

console.log(urlData)

반환된 URL 개체는 다음과 유사합니다.

var url = {
	hash: "",
	host: "techstacker.com",
	hostname: "techstacker.com",
	href: "https://techstacker.com/,how-to-detect-double-clicks-with-vanilla-javascript",
	origin: "https://techstacker.com",
	password: "",
	pathname: "/how-to-detect-double-clicks-with-vanilla-javascript"
	port: "",
	protocol: "https:",
	search: "",
	searchParams: "URLSearchParams {}",
	username: ""
};

이제 각 속성에 쉽게 액세스하여 원하는 작업을 수행할 수 있습니다. 예를 들어, pathname에 대한 액세스 권한을 얻으려면 다음과 같이 하십시오.

console.log(url.pathname)
// Prints: "/how-to-detect-double-clicks-with-vanilla-javascript"