JavaScript-URLパスの一部を取得

JavaScriptを使用してURLからパスのみを取得する正しい方法は何ですか？

例：http://www.somedomain.com/account/search?
filter
= a# topというURLがあります
が、この部分を取得したいのですが、
/ account / search

活用できるものがあれば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]：ポートを含むプロパティのブラウザーサポートに一貫性がありません。参照：http : //jessepollak.me/chrome-was-wrong-ie-was-right

これはChromeとFirefoxの最新バージョンで動作します。テストするInternet Explorerのバージョンがないので、JSFiddleの例を使用してテストしてください。

JSFiddleの例

URLアンカー要素なしで、URL自体にこのサポートを提供する次のオブジェクトもあります。現在のところ、安定したブラウザではサポートされていないようですが、Firefox 26で提供される予定 です。サポートされていると思われる場合は、こちらからお試しください。

window.location.href.split('/');

通常の配列のようにアクセスできるすべてのURL部分を含む配列を提供します。

または、パスの部分のみを含む、@ Dylanによって提案されたよりエレガントなソリューション：

window.location.pathname.split('/');

これが現在の URLの場合はwindow.location.pathnameを使用し、それ以外の場合はこの正規表現を使用します。

var reg = /.+?\:\/\/.+?(\/.+?)(?:#|\?|$)/;
var pathname = reg.exec( 'http://www.somedomain.com/account/search?filter=a#top' )[1];

URLと呼ばれる便利なWeb APIメソッドがあります。

const url = new URL('http://www.somedomain.com/account/search?filter=a#top');
console.log(url.pathname.split('/'));
const params = new URLSearchParams(url.search)
console.log(params.get("filter"))

変数に格納したURLの一部を取得したい場合は、URL-Parseをお勧めします

const Url = require('url-parse');
const url = new Url('https://github.com/foo/bar');

ドキュメントによると、次の部分を抽出します。

返されたURLインスタンスには、次のプロパティが含まれています。

protocol：URLのプロトコルスキーム（http：など）。スラッシュ：プロトコルの後に2つのスラッシュ（//）が続くかどうかを示すブール値。auth：認証情報部分（例：ユーザー名：パスワード）。username：基本認証のユーザー名。password：基本認証のパスワード。host：ポート番号付きのホスト名。hostname：ポート番号なしのホスト名。port：オプションのポート番号。pathname：URLパス。query：解析がfalseに設定されていない限り、クエリ文字列を含む解析されたオブジェクト。ハッシュ：シャープ記号（＃）を含むURLの「フラグメント」部分。href：完全なURL。origin：URLの起点。

（現在のものではなく）抽象URL文字列がある場合は、window.location次のトリックを使用できます。

let yourUrlString = "http://example.com:3000/pathname/?search=test#hash";

let parser = document.createElement('a');
parser.href = yourUrlString;

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

おかげjlong