JavaScriptでURLを分解する

こんにちは、さるまりんです。

JavaScriptでURLを分解してパスの部分を取得する必要があったのでやってみました。
メモにしておくと便利そうなので記録しておきます。

window.locationを使うと、現在表示してるURLが取得できるので、これの中から色々取ってみます。

このページならば

location.href は https://salumarine.com/parsing-url-in-javascript/
location.protocol は https:
location.host は salumarine.com
location.pathname は /parsing-url-in-javascript/

です。

もっとややこしいURLならこんな感じで色々とれます。

例えば

https://salumarine.com:8081/parsing-url-in-javascript/?p=2#complex

だと、

location.href → https://salumarine.com:8081/parsing-url-in-javascript/?p=2#complex
location.protocol → https:
location.host → salumarine.com:8081
location.hostname → salumarine.com
location.port → 8081
location.pathname → /parsing-url-in-javascript/
location.search → p=2
location.hash → #complex

のようになります。

ちなみにhttp(80)やhttps(443)などのウェルノウンポート(port 0から1023)は:80や:443と指定しても取得できないようです。

window.locationは現在のURLしか取れないので、別の任意のURLを分解したいときはこうします。

var url = new URL('https://salumarine.com:8081/parsing-url-in-javascript/?p=2#complex');

このurlからurl.hostnameやurl.pathnameとして取得します。

パスによって処理を切り替えたりする必要がありこの方法でできました。こんなケースはどれくらいあるのかな。

JavaScript、得意ではないのですが、色々使えるようになるといいなと思います。
勉強します!

読んでくれてありがとうございました。

それではまた!