1. ホーム
  2. ジャバスクリプト

[解決済み】JavaScript - URLパスの一部を取得する

2022-04-06 13:53:30

質問

JavaScriptを使用してURLからパスだけを取り出す正しい方法は何ですか?



私は、URL

http://www.somedomain.com/account/search?filter=a#top

が、この部分だけ欲しいです。

/アカウント/検索

jQueryを使用しているのですが、活用できるものがあれば教えてください。

どのように解決するのですか?

組み込みの window.location オブジェクトが、現在のウィンドウのためにそれを提供します。

// If URL is http://www.somedomain.com/account/search?filter=a#top

window.location.pathname // /account/search

// For reference:

window.location.host     // www.somedomain.com (includes port if there is one)
window.location.hostname // www.somedomain.com
window.location.hash     // #top
window.location.href     // http://www.somedomain.com/account/search?filter=a#top
window.location.port     // (empty string)
window.location.protocol // http:
window.location.search   // ?filter=a  




更新、どのURLにも同じプロパティを使用します。

というインターフェースとして、このスキーマが標準化されつつあることが判明しました。 URLUtils と、どうでしょう? 既存の window.location オブジェクト とアンカー要素 は、このインタフェースを実装しています。

そのため、上記と同じプロパティを 任意の URL - は、そのURLでアンカーを作成し、プロパティにアクセスするだけです。

var el = document.createElement('a');
el.href = "http://www.somedomain.com/account/search?filter=a#top";

el.host        // www.somedomain.com (includes port if there is one[1])
el.hostname    // www.somedomain.com
el.hash        // #top
el.href        // http://www.somedomain.com/account/search?filter=a#top
el.pathname    // /account/search
el.port        // (port if there is one[1])
el.protocol    // http:
el.search      // ?filter=a

[1]: portを含むプロパティに対するブラウザのサポートは一貫していませんので、参照してください。 http://jessepollak.me/chrome-was-wrong-ie-was-right

ChromeとFirefoxの最新バージョンで動作します。 . Internet Explorerのバージョンは持っていませんので、JSFiddleの例でご自身でテストしてください。

JSFiddleの例

また、これから登場する URL オブジェクトが提供され、アンカー要素なしで URL 自体にこのサポートを提供します。 現時点では安定したブラウザではサポートされていないようですが、Firefox 26で登場すると言われています。 対応してるかもと思ったら、こちらで試してみてください。 .