JavaScriptでURLの解析をしたかった

フロントエンド JavaScript で「URL 文字列からパス部分を抽出したい」という有りがちな処理をやりたかった時に、気持良く解決できなかったという作業ログです。

誰の役に立つのかわからないですが、とりあえず書いてみました。

window.location オブジェクト

• 解析対象の URL は当ページの URL ではない
• 文字列として URL を解析出来る方法が必要なので NG

URL オブジェクト

• 担当サービスの対応ブラウザである IE10, IE11 に無い
  • 正確には存在するけど function ではない別物

URL オブジェクトを polyfill

• よろしい、ならば polyfill だ
• https://github.com/Polymer/URL を使ってみた
  • '' を '/' にするかしないかが Chrome と異なっていた
• https://github.com/inexorabletash/polyfill/blob/master/url.js を使ってみた
  • 相対パスを展開するかしないかが Chrome と異なっていた
• そもそも URL オブジェクトの仕様はまだ未確定
  • Ref) https://url.spec.whatwg.org/
• 仕様が安定していないものを polyfill するのは止めた方が良さそう

DOM を介して解析

• var a = document.createElement('a'); a.href = 'http://example.com'; から解析するハックがある
• ブラウザ内でもいわゆるモデルっぽい場所で使われるので、そこで DOM に依存したくない
• すみません、何か気分的に無理
  • あえて言うなら、速度感が単体関数とかけ離れそう（未調査ですが）

npm から探す

• https://www.npmjs.com/package/url-parse
  • API は Node.js の url モジュール準拠で良さそう
  • しかし、browser 用のビルドが無い（単品で欲しかった）
  • オレオレで fork して browserify を掛けるのは、ちょっとなぁ
• https://www.npmjs.com/package/url
  • 大体↑の url-parse と同じような状況
• https://medialize.github.io/URI.js/
  • API は独自、不要に柔軟な印象を受ける
  • ビルドがココからオプションを指定してやる方式、できれば唯一のソースが良かった
  • jQuery とか入ってるし・・・。
• 他に や DL 数が多そうなものがわかりませんでした
  • 良さそうなのは大抵 browserify でコンパイルしてくれって書いてある

結末

今回は正規表現さんで対応しました。