Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

フロントエンド 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 でコンパイルしてくれって書いてある

結末

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away