[Javascript] locationプロパティ以外のURLを簡単に分解する方法

仕事で久しぶりにSaaSプログラムを書くことになったのだが、最新のJavascript処理で書こうと思ったら、CORS制限に引っかかってしまうので、type='module'は使わないように気を使ってレトロ記述で書くことにした。 おかげで、javascriptのURLが取得できないやら、無駄にパケット通信を行わなければいけないやらで、レガシー記述はやっぱりタイヘンと再確認してしまいました。 その中で、アドレスバーのURLを分解する処理は、以前にブログで書いた事があるんだけど、今回はscriptタグ内のsrc属性のURLを分解する必要性があった。 [Javascript] 意外と知らかった「location」 phpで言うところのurlinfo()に当たる機能が、javascriptには、なかなか該当するものが無い。 とりあえず、正規表現でなんとかならないかと思ってやってみたら、何とかなったし、汎用性もあるコードが書けたので、ブログに残しておくことにする。

取得できるデータ

- プロトコル - ポート - ドメイン、階層、ファイル名(ポート) - クエリ - ハッシュ

ソースコード

httpから始まるURIをそれぞれのパートで分解します。 const uri = 'https://example.com:88/a/b/test.php?a=1&b=2#sample' const urlmatch = uri.match(/(http|https):\/\/(.+?)(:.+?|)\/(.*?)(\?.+?|)(#.+?|)$/) const path_arr = urlmatch[4].split('/') const urlinfo = { url : uri, queries : Object.fromEntries(new URLSearchParams(urlmatch[5]).entries()), protocol : urlmatch[1], domain : urlmatch[2], port : urlmatch[3] ? urlmatch[3].replace(':','') : '', filename : path_arr[path_arr.length -1], path : path_arr.splice(0,path_arr.length-1).join('/'), hash : urlmatch[6].replace('#',''), }

Response

{ "url": "https://example.com:88/a/b/test.php?a=1&b=2#sample", "queries": { "a": "1", "amp;b": "2" }, "protocol" : "https", "domain": "example.com", "port": "88", "filename": "test.php", "path": "a/b", "hash": "sample" }

解説

これは、手打ちできるレベルのスニペットではないので、コピペで使ってもらえるといいかと思います。 または、自分で何かしらの関数化をして、それを叩いてもらうとか・・・ 基本的には、match処理で正規表現で、プロトコル、ドメイン、パス、ファイル名、クエリ、ハッシュの領域で分解して、 クエリは、連想配列に変換しています。 ハッシュやポートなどは、いらない文字列がくっついてくるので、それを文字列削除しています。 とにかくこれで、locationで取得できるのとほぼ同じ情報取得ができるようになったので、良しとしよう!