How to split url to get url path in JavaScript

Question

I have constructed a url path that are pointing to different hostname www.mysite.com, so for example:

var myMainSite = 'www.mymainsite.com' + '/somepath';

so this is equivalent to www.mymainsite.com/path/path/needthispath/somepath.

How I'm doing it now is like the code below and this gives me a bunch of indexes of the url in the console.log.

var splitUrl = myMainSite.split('/');

console.log looks like:

0: http://
1: www.
2: mysite.com
3: path
4: path
5: needthispath
6: somepath

and I concat them like splitUrl[5]+'/'+splitUrl[6] and it doesn't look pretty at all.

So my question is how to split/remove url location http://www.mymainsite.com/ to get the url path needthispath/somepath in js? Is there a quicker and cleaner way of doing this?

@AyyoubDahhane this would only work if the current url is the URL he is aiming to split. The I have constructed a url path that are pointing to _different_ hostname makes me believe otherwise — N.J.Dawson
– N.J.Dawson, Commented Sep 5, 2016 at 16:21
@nCore what is it that you didn't like with my answer that you didn't accept it? was it not explaining well? — Inanc Gumus
– Inanc Gumus, Commented Sep 6, 2016 at 19:05
@inanc oh I did click the tick not sure why it didn't show up. Ah nvm could be because I like the other one too so had to wait for few seconds. — nCore
– nCore, Commented Sep 6, 2016 at 20:09

Inanc Gumus · Accepted Answer · 2020-05-26 15:40:23Z

87

First solution (URL object)

The URL object can be used for parsing, constructing, normalizing, encoding URLs, and so on.

var url = 'http://www.mymainsite.com/somepath/path2/path3/path4';

var pathname = new URL(url).pathname;

console.log(pathname);

The URL interface represents an object providing static methods used for creating object URLs.

See the documentation for URL interface on Mozilla MDN
The Browser support is pretty good in 2017 (~ 90% but not IE11 nor below)

Second solution (a kind of a hack)

var urlHack = document.createElement('a');
urlHack.href = 'http://www.mymainsite.com/somepath/path2/path3/path4';

console.log(urlHack.pathname);

// you can even call this object with these properties:
// protocol, host, hostname, port, pathname, hash, search, origin

edited May 26, 2020 at 15:40

answered Sep 5, 2016 at 16:23

Inanc Gumus

28.2k10 gold badges89 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The Gav Lad · Accepted Answer · 2016-09-05 16:46:28Z

14

Why don't you use the split function and work from there. The split function will break your URL out fully and from there you just need to look for the second last and last items.

Here is an example:

var initial_url = 'http://www.mymainsite.com/path/path/needthispath/somepath';
var url = initial_url .split( '/' );

var updated_url= document.location.hostname + '/' + url[ url.length - 2 ] + '/' + url[ url.length - 1 ];

answered Sep 5, 2016 at 16:46

The Gav Lad

3104 silver badges9 bronze badges

1 Comment

nCore Over a year ago

that's what I'm using now using the .split function. But I found a way now. :) thanks for the answer.

Leandro Sciola · Accepted Answer · 2021-06-23 23:24:24Z

1

function url($url) {
  var url = $url.split( '//' );
  if (url[0] === "http:" || url[0] === "https:") {
    var protocol = url[0] + "//";
    var host = url[1].split( '/' )[0];
    url = protocol + host;
    var path = $url.split(url)[1];
    return {
      protocol: protocol,
      host: host,
      path: path
    };
  }
}

var $url = url("http://www.mymainsite.com/path/path/needthispath/somepath");

console.log($url.protocol); // http://
console.log($url.host); // www.mymainsite.com
console.log($url.path); // /path/path/needthispath/somepath

answered Jun 23, 2021 at 23:24

Leandro Sciola

1192 bronze badges

1 Comment

Sean Feb 28 at 14:24

Good answers include some explanation, not just code

Collectives™ on Stack Overflow

How to split url to get url path in JavaScript

3 Answers 3

First solution (URL object)

Second solution (a kind of a hack)

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

First solution (URL object)

Second solution (a kind of a hack)

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related