JavaScript - Get Portion of URL Path

Question

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

User · Answer

There is a useful Web API method called URL

_x000D_

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

_x000D_

User · Answer

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

User · Answer

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       gt   http   parser hostname       gt   example com  parser port           gt   3000  parser pathname       gt    pathname   parser search         gt    search test  parser hash           gt    hash  parser host           gt   example com 3000    Thanks to jlong

User · Answer

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

User · Answer

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    quot http   www somedomain com account search filter a top quot    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

User · Answer

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

[javascript] JavaScript - Get Portion of URL Path

Examples related to javascript

Examples related to jquery

Examples related to url