How to obtain the query string from the current URL with JavaScript

Question

I have URL like this   http   localhost PMApp temp htm ProjectID 462   What I need to do is to get the details after the   sign  query string  - that is ProjectID 462  How can I get that using JavaScript   What I ve done so far is this   var url   window location toString    url match       I don t know what to do next

User · Answer

You should take a look at the URL API that has helper methods to achieve this in it as the URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

This is not currently supported by all modern browsers, so don't forget to polyfill it (Polyfill available using https://qa.polyfill.io/).

User · Answer

You can simply use URLSearchParams    Lets see we have a page with url   https   example com  product 1 amp category game  On that page  you can get the query string using window location search and then extract them with URLSearchParams   class  const params   new URLSearchParams window location search   console log params get  product      1  console log params get  category      game  Another example using a dynamic url  not from window location   you can extract the url using URL object  const url   new URL  https   www youtube com watch v 6xJ27BtlM0c amp ab channel FliteTest    console log url search      v 6xJ27BtlM0c amp ab channel FliteTest  This is a simple working snippet   x000D   x000D  const urlInput   document querySelector  input type url    const keyInput   document querySelector  input name key    const button   document querySelector  button   const outputDiv   document querySelector   output    button addEventListener  click        gt        const url   new URL urlInput value      const params   new URLSearchParams url search      output innerHTML   params get keyInput value     x000D  div   margin-bottom  1rem    x000D   lt div gt     lt label gt URL lt  label gt   lt br gt     lt input type  url  value  https   www youtube com watch v 6xJ27BtlM0c amp ab channel FliteTest  gt   lt  div gt    lt div gt     lt label gt Params key lt  label gt   lt br gt     lt input type  text  name  key  value  v  gt   lt  div gt    lt div gt     lt button gt Get Value lt  button gt   lt  div gt    lt div id  output  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Try this one         Get the value of a querystring     param   String  field The field to get the value of     param   String  url   The URL to get the value from  optional      return  String        The field value     var getQueryString   function   field  url         var href   url   url   window location href      var reg   new RegExp      amp      field         amp         i         var string   reg exec href       return string   string 1    null       Let   s say your URL is http   example com amp this chicken amp that sandwich  You want to get the value of this  that  and another   var thisOne   getQueryString  this       returns  chicken  var thatOne   getQueryString  that       returns  sandwich  var anotherOne   getQueryString  another       returns null   If you want to use a URL other than the one in the window  you can pass one in as a second argument   var yetAnotherOne   getQueryString  example    http   another-example com amp example something       returns  something    Reference

User · Answer

This will return query parameters as an associative array var queryParams      var query  document location search replace  quot   quot      split  quot  amp  quot    for var i  0  i lt  query length  i        if query i        var temp   query i  split  quot   quot        queryParams temp 0     temp 1

User · Answer

For React Native  React  and For Node project  below one is working yarn add  query-string  import queryString from  query-string    const parsed   queryString parseUrl  quot https   pokeapi co api v2 pokemon offset 10 amp limit 10 quot     console log parsed offset  will display 10

User · Answer

q    location search replace       amp          amp     g    k v   gt q k  v  q

User · Answer

You can use the search property of the window location object to obtain the query part of the URL  Note that it includes the question mark     at the beginning  just in case that affects how you intend to parse it

User · Answer

I think it is way more safer to rely on the browser than any ingenious regex    x000D   x000D  const parseUrl   function url     x000D    const a   document createElement  a   x000D    a href   url x000D    return   x000D      protocol  a protocol   a protocol   null  x000D      hostname  a hostname   a hostname   null  x000D      port  a port   a port   null  x000D      path  a pathname   a pathname   null  x000D      query  a search   a search   null  x000D      hash  a hash   a hash   null  x000D      host  a host   a host   null   x000D      x000D    x000D   x000D  console log  parseUrl window location href      stacksnippet x000D    to obtain a query x000D  console log  parseUrl   https   example com qwery this   query   x000D   x000D   x000D

User · Answer

Have a look at the MDN article about window location   The QueryString is available in window location search   Solution that work in legacy browsers as well  MDN provide an example  no longer available in the above referenced article  of how to the get value of a single key available in the QueryString  Something like this   function getQueryStringValue  key        return decodeURIComponent window location search replace new RegExp          amp         encodeURIComponent key  replace           g       amp                 amp               i      1               Would write the value of the QueryString-variable called name to the console   console log getQueryStringValue  name        In modern browsers  In modern browsers you have the searchParams property of the URL interface  which returns a URLSearchParams object  The returned object has a number of convenient methods  including a get-method  So the equivalent of the above example would be   let params    new URL document location   searchParams  let name   params get  name      The URLSearchParams interface can also be used to parse strings in a querystring format  and turn them into a handy URLSearchParams object   let paramsString    name foo amp age 1337  let searchParams   new URLSearchParams paramsString    searchParams has  name       true     true searchParams get  age        1337      true   Notice that the browser support is still limited on this interface  so if you need to support legacy browsers  stick with the first example or use a polyfill

User · Answer

var queryObj          if url split      length gt 0        var queryString   url split      1          now you have the query part in queryString  First replace will remove all the white spaces  second will replace all the   amp   part with     and finally the third replace will put     in place of     signs   queryObj   JSON parse        queryString replace    g         replace   amp  g         replace    g                  So let say you had a query like abc 123 amp efg 456  Now before parsing  your query is being converted into something like   abc   123   efg   456    Now when you will parse this  it will give you your query in json object

User · Answer

window location href slice window location href indexOf        1

User · Answer

Use window location search to get everything after   including    Example   var url   window location search  url   url replace              remove the   alert url     alerts ProjectID 462 is your case

User · Answer

8 years later  for a one-liner   const search   Object fromEntries new URLSearchParams location search     Down-side  it does NOT work with IE11 To explain  The URLSearchParams interface defines utility methods to work with the query string of a URL   From   https   developer mozilla org en-US docs Web API URLSearchParams  The Object fromEntries   method transforms a list of key-value pairs into an object   From  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Object fromEntries      For https   caniuse com  search fromEntries  gt  Object fromEntries new URLSearchParams location search    gt   search   quot fromEntries quot

User · Answer

Convert that into array then split with      var url   http   localhost PMApp temp htm ProjectID 462    url split      1         ProjectID 462

User · Answer

decodeURI window location search     replace             split   amp       map param   gt  param split          reduce  values    key  value      gt        values  key     value     return values

User · Answer

You can use this function  for split string from  id     function myfunction myvar     var urls   myvar    var myurls   urls split   id       var mylasturls   myurls 1     var mynexturls   mylasturls split   amp       var url   mynexturls 0     alert url    myfunction window top location href   myfunction  http   www myname com index html id dance amp emp cid in social facebook-hhp-food-moonlight-influencer s7 20160623      here is the fiddle

User · Answer

If you happened to use Typescript and have dom in your the lib of tsconfig json  you can do    const url  URL   new URL window location href   const params  URLSearchParams   url searchParams     get target key value from URLSearchParams object const yourParamValue  string   params get  yourParamKey        To append  you can also leverage api to avoid the     check  params append  newKey    newValue

User · Answer

You can use this for direct find value via params name   const urlParams   new URLSearchParams window location search   const myParam   urlParams get  myParam

User · Answer

This will add a global function to access to the queryString variables as a map      -------------------------------------------------------------------------------------    Add function for  window location query   queryString     which returns an object    of querystring keys and their values  An optional string parameter can be used as    an alternative to  window location search      -------------------------------------------------------------------------------------    Add function for  window location query makeString  object   addQuestionMark        which returns a queryString from an object  An optional boolean parameter can be    used to toggle a leading question mark     ------------------------------------------------------------------------------------- if   window location query        window location query   function  source            var map               source   source    this search           if        source                var groups   source  i               if  groups indexOf         0                    groups   groups substr 1                              groups   groups split   amp                  for  i in groups                    source   groups i  split                             For  xxx   Prevents   xxx       Forces   xxx                       groups i  slice -1             1                                        Key                 i   decodeURIComponent source 0                        Value                 source   source 1                   source   typeof source      undefined                        source                       decodeURIComponent source                       Save Duplicate Key                 if  i in map                        if  Object prototype toString call map i         object Array                              map i     map i                                               map i  push source                                         Save New Key                 else                       map i    source                                                     return map             window location query makeString   function  source  addQuestionMark            var str       i  ii  key           if  typeof source     boolean                 addQuestionMark   source              source   undefined                     if  source    undefined                str   window location search                    else               for  i in source                    key     amp     encodeURIComponent i                    if  Object prototype toString call source i         object Array                          str    key   addUndefindedValue source i                                      else                       for  ii   0  ii  lt  source i  length  ii                              str    key   addUndefindedValue source i  ii                                                                             return  addQuestionMark     false               str substr 1              function addUndefindedValue source            return typeof source      undefined                                       encodeURIComponent source             Enjoy

[javascript] How to obtain the query string from the current URL with JavaScript?

Examples related to javascript

Examples related to query-string