[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"
}