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

  • 2
    いいね
  • 3
    コメント

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

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

window.location オブジェクト

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

URL オブジェクト

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

URL オブジェクトを polyfill

DOM を介して解析

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

npm から探す

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

結末

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