parse URL with JavaScript or jQuery

Question

Ok lets say I have a URL

example.com/hello/world/20111020 (with or without the trailing slash). What I would like to do is strip from the url the domain example.com. and then break the hello world 20111020 into an array. But my other problem is. Sometimes the URL has no /hello/world/20111020 or just /hello/ so I need to first determine if there is anything after example.com if there not, then do nothing as obviously there's nothing to work with. However if there is something there for each / I need to add it to this array in order. So I can work with the array[0] and know it was hello.

I tried something a couple days back but was running into issues with trailing slashes it kept breaking the script, I unfortunately abandoned that idea. And today I am looking for fresh ideas.

Narendra Yadala · Accepted Answer · 2011-10-26 04:32:46Z

18

This should work

var url = 'example.com/hello/world/20111020/';
//get rid of the trailing / before doing a simple split on /
var url_parts = url.replace(/\/\s*$/,'').split('/'); 
//since we do not need example.com
url_parts.shift();

Now url_parts will point to the array ["hello", "world", "20111020"].

edited Oct 26, 2011 at 4:32

answered Oct 20, 2011 at 19:20

Narendra Yadala

9,6641 gold badge31 silver badges44 bronze badges

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

2 Comments

jave.web Over a year ago

var url = window.location.href; to parse current url :)

Narendra Yadala Over a year ago

@johnny You should take the contents of url_parts array and not the output of command url_parts.shift()

James Johnson · Accepted Answer · 2011-10-20 18:35:23Z

3

You can use the jQuery-URL-Parser plugin:

var file = $.url.attr("file");

In your case you'd probably want to use segment():

var segments = $.url('http://allmarkedup.com/folder/dir/example/index.html').segment(); 

// segments = ['folder','dir','example','index.html']

edited Oct 20, 2011 at 18:35

answered Oct 20, 2011 at 18:28

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

Comments

DefyGravity · Accepted Answer · 2011-10-20 18:31:09Z

2

   <script type="text/javascript">
    function splitThePath(incomingUrl){
     var url = document.createElement("a");
     url.href = incomingUrl;
    //url.hash  Returns the anchor portion of a URL
    //url.host  Returns the hostname and port of a URL
    //url.hostname  Returns the hostname of a URL
    //url.href  Returns the entire URL
    //url.pathname  Returns the path name of a URL
    //url.port  Returns the port number the server uses for a URL
    //url.protocol  Returns the protocol of a URL
    //url.search    Returns the query portion of a URL
    if(url.pathname && url.pathname != ""){
   var pathnameArray = url.pathname.split("/");
 }else{

}


}
</script>

answered Oct 20, 2011 at 18:31

DefyGravity

6,0915 gold badges35 silver badges48 bronze badges

1 Comment

DefyGravity Over a year ago

when you set the url.href is set the first time, the client's browser fills in the rest of the values.

Ed Heal · Accepted Answer · 2011-10-20 18:32:39Z

0

I have created the following regular expression for URLs

^https?://(((0|([1-9][0-9]{0,1}))(\.(0|([1-9][0-9]{0,1}))){3})|([a-zA-Z]([a-zA-Z0-9$\-_@\.&+!*"\'\(\),]|(%[0-9a-fA-F][0-9a-fA-F]))*(\.([a-zA-Z]([a-zA-Z0-9$\-_@\.&+!*"\'\(\),]|(%[0-9a-fA-F][0-9a-fA-F]))*))*))(/|((/([a-zA-Z]([a-zA-Z0-9$\-_@\.&+!*"\'\(\),]|(%[0-9a-fA-F][0-9a-fA-F]))*))*))$

It has been written for MySql - I am sure with a bit of fiddling you can get it you work for your needs.

BTW - I took the idea from an RFC - The number escapes me at this moment

answered Oct 20, 2011 at 18:32

Ed Heal

60.3k18 gold badges90 silver badges137 bronze badges

Comments

Shoaib Nawaz · Accepted Answer · 2015-12-01 06:34:22Z

0

For parsing URLs, one different approach can be using anchor DOM object.

var a = document.createElement("A");
a.href = 'http://example.com:8080/path/to/resources?param1=val1&params2=val2#named-anchor';

a.protocol; // http:
a.host; // example.com:8080
a.hostname; //example.com
a.port; // 8080 (in case of port 80 empty string returns)
a.pathname; // /path/to/resources
a.hash; // #named-anchor
a.search // ?param1=val1&params2=val2

edited Dec 1, 2015 at 6:34

answered Nov 30, 2015 at 18:23

Shoaib Nawaz

2,3304 gold badges30 silver badges38 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2024-10-22 21:33:43Z

0

You could make use of JS's URL constructor, and retrieve the pathnames array by splitting the URL's pathname value by /

const urlParts = (url) => {
  if (!/^https?:\/\//.test(url)) url = `https://${url}`;
  const data = new URL(url);
  data.pathnames = data.pathname.split("/").filter(Boolean);
  return data;
};

console.log(urlParts("example.com/hello/world/20111020").pathnames);
console.log(urlParts("example.com/hello/world/20111020/").pathnames);
console.log(urlParts("example.com/hello/world/20111020?xyz=123").pathnames);
console.log(urlParts("example.com/hello/").pathnames);
console.log(urlParts("example.com").pathnames);

answered Oct 22, 2024 at 21:33

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

parse URL with JavaScript or jQuery

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related