JavaScript - Get Portion of URL Path
JavascriptJqueryUrlJavascript Problem Overview
What is the correct way to pull out just the path from a URL using JavaScript?
Example:
I have URL
http://www.somedomain.com/account/search?filter=a#top
but I would just like to get this portion
/account/search
I am using jQuery if there is anything there that can be leveraged.
Javascript Solutions
Solution 1 - Javascript
There is a property of the built-in window.location
object that will provide that for the current window.
// 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
Update, use the same properties for any URL:
It turns out that this schema is being standardized as an interface called URLUtils, and guess what? Both the existing window.location
object and anchor elements implement the interface.
So you can use the same properties above for any URL — just create an anchor with the URL and access the properties:
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]: Browser support for the properties that include port is not consistent, See: http://jessepollak.me/chrome-was-wrong-ie-was-right
This works in the latest versions of Chrome and Firefox. I do not have versions of Internet Explorer to test, so please test yourself with the JSFiddle example.
JSFiddle example
There's also a coming URL
object that will offer this support for URLs themselves, without the anchor element. Looks like no stable browsers support it at this time, but it is said to be coming in Firefox 26. When you think you might have support for it, try it out here.
Solution 2 - Javascript
window.location.href.split('/');
Will give you an array containing all the URL parts, which you can access like a normal array.
Or an ever more elegant solution suggested by @Dylan, with only the path parts:
window.location.pathname.split('/');
Solution 3 - Javascript
If this is the current url use window.location.pathname otherwise use this regular expression:
var reg = /.+?:\/\/.+?(\/.+?)(?:#|\?|$)/;
var pathname = reg.exec( 'http://www.somedomain.com/account/search?filter=a#top' )[1];
Solution 4 - Javascript
There is a useful Web API method called URL
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"))
Solution 5 - Javascript
If you have an abstract URL string (not from the current window.location
), you can use this trick:
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"
Thanks to jlong
Solution 6 - Javascript
In case you want to get parts of an URL that you have stored in a variable, I can recommend URL-Parse
const Url = require('url-parse');
const url = new Url('https://github.com/foo/bar');
According to the documentation, it extracts the following parts:
> The returned url instance contains the following properties:
>
> protocol: The protocol scheme of the URL (e.g. http:).
> slashes: A boolean which indicates whether the protocol is followed by two forward slashes (//).
> auth: Authentication information portion (e.g. username:password).
> username: Username of basic authentication.
> password: Password of basic authentication.
> host: Host name with port number.
> hostname: Host name without port number.
> port: Optional port number.
> pathname: URL path.
> query: Parsed object containing query string, unless parsing is set to false.
> hash: The "fragment" portion of the URL including the pound-sign (#).
> href: The full URL.
> origin: The origin of the URL.