JavaScriptを使用してURLからすべてのデータ値を取得する方法

JavaScriptのURLコンストラクタメソッドを使用してURLからすべてのデータ値を取得する方法を学びます。

ウェブサイトにある種の内部検索機能を構築しているとしましょう。これを適切に行うには、URL文字列のすべてのデータ値にアクセスする必要があります。

幸い、JavaScriptにはnew URL()というコンストラクターメソッドがあります これにより、URLをオブジェクトに変換して、URL内のすべてのプロパティと値の概要を適切に整理できます。

これを使用するには、変数を作成し、それにnew URL('your-url')の値を割り当てます。 。たとえば、以下では、TechStackerの記事の1つの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にアクセスするには あなたのURLの、あなたはこれをするでしょう：

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