URL の相対パスを解決する
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ 相対パスの解決は URL 関数でできる
今のパスが
みたいなパスの最終的なパスがほしいときにどうしますか?
Node.js にはあった気がするけど JavaScript にそんな便利機能なかったと思うし自分で実装しようかーと考えていて location みたいに origin とか pahtname とか分けてくれる奴なかったかなと探していて見つけた URL 関数
実はこれに 相対パスや絶対パスの解決をする機能までありました
ひとつ目の引数にパスを入れて 2 つ目の引数に今の URL を入れます
では上のやつをやってみます
暇な人は結果どうなるか考えてみてください
http://var.blog.jp/sample/test.html のページ内の a タグの href にリストのパスを書いた時のリンク先です
どうですか
当たってました?
そろそろ大体の関数知ってるかなー と思ってましたがまだまだ知らない機能がありますね
web でできること全部に関わるわけですし もしかしてブラウザ JavaScript が全言語の中で標準でサポートしてる機能が一番機能が多い言語だったりするのかな?
http://var.blog.jp/sample/test.html
として../abc/def.html
/test/sample.html
//www.google.com
test2.js
dummy/../../../../abc/deg/../def.html
./test2.css
#hash
https://developer.mozilla.org/
/test/sample.html
//www.google.com
test2.js
dummy/../../../../abc/deg/../def.html
./test2.css
#hash
https://developer.mozilla.org/
みたいなパスの最終的なパスがほしいときにどうしますか?
Node.js にはあった気がするけど JavaScript にそんな便利機能なかったと思うし自分で実装しようかーと考えていて location みたいに origin とか pahtname とか分けてくれる奴なかったかなと探していて見つけた URL 関数
実はこれに 相対パスや絶対パスの解決をする機能までありました
ひとつ目の引数にパスを入れて 2 つ目の引数に今の URL を入れます
では上のやつをやってみます
暇な人は結果どうなるか考えてみてください
http://var.blog.jp/sample/test.html のページ内の a タグの href にリストのパスを書いた時のリンク先です
var paths = [
"../abc/def.html",
"/test/sample.html",
"//www.google.com",
"test2.js",
"dummy/../../../../abc/deg/../def.html",
"./test2.css",
"#hash",
"https://developer.mozilla.org/"
]
paths.forEach(e => console.log(new URL(e, "http://var.blog.jp/sample/test.html").toString()))
"../abc/def.html",
"/test/sample.html",
"//www.google.com",
"test2.js",
"dummy/../../../../abc/deg/../def.html",
"./test2.css",
"#hash",
"https://developer.mozilla.org/"
]
paths.forEach(e => console.log(new URL(e, "http://var.blog.jp/sample/test.html").toString()))
http://var.blog.jp/abc/def.html
http://var.blog.jp/test/sample.html
http://www.google.com/
http://var.blog.jp/sample/test2.js
http://var.blog.jp/abc/def.html
http://var.blog.jp/sample/test2.css
http://var.blog.jp/sample/test.html#hash
https://developer.mozilla.org/
http://var.blog.jp/test/sample.html
http://www.google.com/
http://var.blog.jp/sample/test2.js
http://var.blog.jp/abc/def.html
http://var.blog.jp/sample/test2.css
http://var.blog.jp/sample/test.html#hash
https://developer.mozilla.org/
どうですか
当たってました?
そろそろ大体の関数知ってるかなー と思ってましたがまだまだ知らない機能がありますね
web でできること全部に関わるわけですし もしかしてブラウザ JavaScript が全言語の中で標準でサポートしてる機能が一番機能が多い言語だったりするのかな?