仕事で久しぶりに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で取得できるのとほぼ同じ情報取得ができるようになったので、良しとしよう！