Parse an URL in JavaScript

Question

How do I parse an URL with JavaScript (also with jQuery)?

For instance I have this in my string,

url = "http://example.com/form_image_edit.php?img_id=33"

I want to get the value of img_id

I know I can do this easily with PHP with parse_url(), but I want to know how it is possible with JavaScript.

With php you dont need to use the parse_url() function to get the img_id, just use $_GET['img_id] — mdaguerre
– mdaguerre, Commented Jul 11, 2011 at 0:28
The correct answer below is totally ridiculous when all you need is window.location.search.split('=')[1]. I can't believe he got 75 votes for that!! — Adam Spence
– Adam Spence, Commented Sep 29, 2014 at 11:32
@AdamSpence window.location only works for the page url, not an arbitrary url string. — Fraser Harris
– Fraser Harris, Commented Nov 23, 2014 at 23:32

congusbongus · Accepted Answer · 2017-06-22 06:43:28Z

122

You can use a trick of creating an a-element, add the url to it, and then use its Location object.

function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

parseUrl('http://example.com/form_image_edit.php?img_id=33').search

Which will output: ?img_id=33

You could also use php.js to get the parse_url function in JavaScript.

Update (2012-07-05)

I would recommend using the excellent URI.js library if you need to do anything more than super simple URL handling.

edited Jun 22, 2017 at 6:43

congusbongus

15.1k8 gold badges82 silver badges105 bronze badges

answered Jul 11, 2011 at 0:47

Sindre Sorhus

63.6k40 gold badges176 silver badges236 bronze badges

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

11 Comments

RobG Over a year ago

Which is equivalent to url.match(/\?.+/)[0], which is somewhat shorter and likely a lot faster.

Greg Guida Over a year ago

wow, never knew about this trick, it made my day after sorting through all the worlds ugliest regular expressions =)

Sindre Sorhus Over a year ago

@Christophe No it shows you what properties are available. When you assign an url to the href property of an anchor element, it get's all the properties of the Location object.

Christophe Over a year ago

@SindreSorhus Amazing! Could you share a reference that explains it and details browser support? Is this also true for elements that have a src attribute (link, iframe)?

Adam Spence Over a year ago

window.location.search

|

Ray Toal · Accepted Answer · 2011-07-11 00:29:22Z

36

If your string is called s then

var id = s.match(/img_id=([^&]+)/)[1]

will give it to you.

answered Jul 11, 2011 at 0:29

Ray Toal

88.7k20 gold badges186 silver badges245 bronze badges

Comments

Arslan Ali · Accepted Answer · 2016-05-09 11:19:16Z

10

Try this:

var url = window.location;
var urlAux = url.split('=');
var img_id = urlAux[1]

edited May 9, 2016 at 11:19

Arslan Ali

17.9k9 gold badges64 silver badges84 bronze badges

answered Jul 11, 2011 at 0:30

mdaguerre

1,2771 gold badge10 silver badges22 bronze badges

1 Comment

Tyler Over a year ago

Upon using this method, how can I find how many this has been split up into please?

Ilya Kharlamov · Accepted Answer · 2015-03-31 08:13:55Z

8

One liner:

location.search.replace('?','').split('&').reduce(function(s,c){var t=c.split('=');s[t[0]]=t[1];return s;},{})

answered Mar 31, 2015 at 8:13

Ilya Kharlamov

3,9912 gold badges35 silver badges36 bronze badges

1 Comment

Realitätsverlust Over a year ago

Well, in JS, everything is a one-liner :P

A. Masson · Accepted Answer · 2013-11-27 18:46:10Z

6

Existing good jQuery plugin Purl (A JavaScript URL parser).This utility can be used in two ways - with jQuery or without...

edited Nov 27, 2013 at 18:46

answered Feb 14, 2013 at 20:48

A. Masson

2,4774 gold badges33 silver badges38 bronze badges

Comments

kobe · Accepted Answer · 2011-07-11 00:39:15Z

4

got it from google, try to use this method

function getQuerystring2(key, default_) 
{ 
    if (default_==null) 
    { 
        default_=""; 
    } 
    var search = unescape(location.search); 
    if (search == "") 
    { 
        return default_; 
    } 
    search = search.substr(1); 
    var params = search.split("&"); 
    for (var i = 0; i < params.length; i++) 
    { 
        var pairs = params[i].split("="); 
        if(pairs[0] == key) 
        { 
            return pairs[1]; 
        } 
    } 


return default_; 
}

answered Jul 11, 2011 at 0:39

kobe

15.9k15 gold badges67 silver badges93 bronze badges

1 Comment

michielbdejong Over a year ago

This will fail if the value of a query parameter contains '%3D' ('=') or '%26' ('&'). To fix, use this inside the for loop: ```` if (pairs.shift() == key) { return pairs.join('='); } ```` and do the unescape after splitting on '&'.

michielbdejong · Accepted Answer · 2016-01-05 15:55:38Z

This should fix a few edge-cases in kobe's answer:

function getQueryParam(url, key) {
  var queryStartPos = url.indexOf('?');
  if (queryStartPos === -1) {
    return;
  }
  var params = url.substring(queryStartPos + 1).split('&');
  for (var i = 0; i < params.length; i++) {
    var pairs = params[i].split('=');
    if (decodeURIComponent(pairs.shift()) == key) {
      return decodeURIComponent(pairs.join('='));
    }
  }
}

getQueryParam('http://example.com/form_image_edit.php?img_id=33', 'img_id');
// outputs "33"

Kevin Cox · Accepted Answer · 2013-10-20 12:44:16Z

2

I wrote a javascript url parsing library, URL.js, you can use it for this.

Example:

url.parse("http://mysite.com/form_image_edit.php?img_id=33").get.img_id === "33"

edited Oct 20, 2013 at 12:44

answered Apr 1, 2013 at 22:36

Kevin Cox

3,2531 gold badge39 silver badges32 bronze badges

3 Comments

Kevin Cox Over a year ago

No, I've never heard of purl.js berfore.

Steven Vachon Over a year ago

The answer just above yours. Your code is 28 times faster and much cleaner than purl, but I cannot use it in its current state. I've created an issue on github for you to look at. Thank you

Kevin Cox Over a year ago

You are just forgetting to run the build step. However the new version doesn't require the build step any more so there is no need to worry about it now :D

Mittal Patel · Accepted Answer · 2014-03-09 15:36:49Z

Something like this should work for you. Even if there are multiple query string values then this function should return the value of your desired key.

function getQSValue(url) 
{
    key = 'img_id';
    query_string = url.split('?');
    string_values = query_string[1].split('&');
    for(i=0;  i < string_values.length; i++)
    {
        if( string_values[i].match(key))
            req_value = string_values[i].split('=');    
    }
    return req_value[1];
}

Md. Afsar Uddin · Accepted Answer · 2014-01-27 13:19:20Z

1

You can use the jquery plugin http://plugins.jquery.com/url. $.url("?img_id") will return 33

answered Jan 27, 2014 at 13:19

Md. Afsar Uddin

412 bronze badges

Comments

Muhammad Tahir · Accepted Answer · 2015-08-25 13:06:20Z

function parse_url(str, component) {
  //       discuss at: http://phpjs.org/functions/parse_url/
  //      original by: Steven Levithan (http://blog.stevenlevithan.com)
  // reimplemented by: Brett Zamir (http://brett-zamir.me)
  //         input by: Lorenzo Pisani
  //         input by: Tony
  //      improved by: Brett Zamir (http://brett-zamir.me)
  //             note: original by http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js
  //             note: blog post at http://blog.stevenlevithan.com/archives/parseuri
  //             note: demo at http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js
  //             note: Does not replace invalid characters with '_' as in PHP, nor does it return false with
  //             note: a seriously malformed URL.
  //             note: Besides function name, is essentially the same as parseUri as well as our allowing
  //             note: an extra slash after the scheme/protocol (to allow file:/// as in PHP)
  //        example 1: parse_url('http://username:password@hostname/path?arg=value#anchor');
  //        returns 1: {scheme: 'http', host: 'hostname', user: 'username', pass: 'password', path: '/path', query: 'arg=value', fragment: 'anchor'}

  var query, key = ['source', 'scheme', 'authority', 'userInfo', 'user', 'pass', 'host', 'port',
      'relative', 'path', 'directory', 'file', 'query', 'fragment'
    ],
    ini = (this.php_js && this.php_js.ini) || {},
    mode = (ini['phpjs.parse_url.mode'] &&
      ini['phpjs.parse_url.mode'].local_value) || 'php',
    parser = {
      php: /^(?:([^:\/?#]+):)?(?:\/\/()(?:(?:()(?:([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?()(?:(()(?:(?:[^?#\/]*\/)*)()(?:[^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
      strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
      loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/\/?)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/ // Added one optional slash to post-scheme to catch file:/// (should restrict this)
    };

  var m = parser[mode].exec(str),
    uri = {},
    i = 14;
  while (i--) {
    if (m[i]) {
      uri[key[i]] = m[i];
    }
  }

  if (component) {
    return uri[component.replace('PHP_URL_', '')
      .toLowerCase()];
  }
  if (mode !== 'php') {
    var name = (ini['phpjs.parse_url.queryKey'] &&
      ini['phpjs.parse_url.queryKey'].local_value) || 'queryKey';
    parser = /(?:^|&)([^&=]*)=?([^&]*)/g;
    uri[name] = {};
    query = uri[key[12]] || '';
    query.replace(parser, function($0, $1, $2) {
      if ($1) {
        uri[name][$1] = $2;
      }
    });
  }
  delete uri.source;
  return uri;
}

reference

Andrei G. · Accepted Answer · 2017-10-26 12:28:59Z

1

var url = window.location;
var urlAux = url.split('=');
var img_id = urlAux[1]

Worked for me. But the first var should be var url = window.location.href

answered Oct 26, 2017 at 12:28

Andrei G.

1613 silver badges5 bronze badges

Comments

fxp · Accepted Answer · 2019-02-19 14:51:01Z

0

Web Workers provide an utils URL for url parsing.

answered Feb 19, 2019 at 14:51

fxp

7,0925 gold badges36 silver badges45 bronze badges

Collectives™ on Stack Overflow

Parse an URL in JavaScript

13 Answers 13

Update (2012-07-05)

11 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

Update (2012-07-05)

11 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related