How to retrieve GET parameters from JavaScript

Question

Consider  http   example com page html returnurl  2Fadmin  For js within page html  how can it retrieve GET parameters  For the above simple example  func  returnurl   should be  admin  But it should also work for complex query strings

User · Answer

My solution expands on  tak3r s  It returns an empty object when there are no query parameters and supports the array notation  a 1 amp a 2 amp a 3  function getQueryParams        function identity  e    return e      function toKeyValue  params  param        var keyValue   param split           var key   keyValue 0   value   keyValue 1        params key    params key   value  concat params key   value      return params        return decodeURIComponent window location search       replace            split   amp         filter identity       reduce toKeyValue

User · Answer

window location search will return everything from the   on   This code below will remove the    use split to separate into key value arrays  then assign named properties to the params object  function getSearchParameters         var prmstr   window location search substr 1       return prmstr    null  amp  amp  prmstr     quot  quot    transformToAssocArray prmstr           function transformToAssocArray  prmstr         var params           var prmarr   prmstr split  quot  amp  quot        for   var i   0  i  lt  prmarr length  i              var tmparr   prmarr i  split  quot   quot            params tmparr 0     tmparr 1             return params     var params   getSearchParameters     You can then get the test parameter from http   myurl com  test 1 by calling params test

User · Answer

var getQueryParam   function param        var found      window location search substr 1  split   amp    forEach function item            if  param     item split      0                 found   item split      1                         return found

User · Answer

Here is another example based on Kat s and Bakudan s examples  but making it a just a bit more generic  function getParams          var result           var tmp            location search          substr  1           split   quot  amp  quot            forEach  function  item                        tmp   item split   quot   quot                result  tmp 0     decodeURIComponent  tmp 1                     return result     location getParams   getParams   console log  location getParams     console log  location getParams    quot returnurl quot

User · Answer

To get the parameters as a JSON object   alert getUrlParameters   toSource     function explode delim  str        return str split delim      function getUrlParameters         var out           var str   window location search replace               var subs   explode   amp    str       for var i   0  i  lt  subs length    i                var vals   explode      subs i            out vals 0     vals 1             return out

User · Answer

You can use the search function available in the location object  The search function gives the parameter part of the URL  Details can be found in Location Object  You will have to parse the resulting string for getting the variables and their values  e g  splitting them on

User · Answer

Here I ve made this code to transform the GET parameters into an object to use them more easily     Get Nav URL function getNavUrl            Get URL     return window location search replace  quot   quot    quot  quot        function getParameters url           Params obj     var params              To lowercase     url   url toLowerCase           To array     url   url split   amp             Iterate over URL parameters array     var length   url length      for var i 0  i lt length  i                 Create prop         var prop   url i  slice 0  url i  search                   Create Val         var value   url i  slice url i  search       replace                      Params New Attr         params prop    value            return params         Call of getParameters console log getParameters getNavUrl

User · Answer

If you are using AngularJS  you can use  routeParams using ngRoute module You have to add a module to your app angular module  myApp     ngRoute     Now you can use service  routeParams   controller  AppCtrl   function  routeParams      console log  routeParams      JSON object

User · Answer

This one uses a regular expression and returns null if the parameter doesn t exist or doesn t have any value  function getQuery q       return  window location search match new RegExp     amp      q         amp              null   1

User · Answer

With the window location object  This code gives you GET without the question mark   window location search substr 1    From your example it will return returnurl  2Fadmin  EDIT  I took the liberty of changing Qwerty s answer  which is really good  and as he pointed I followed exactly what the OP asked   function findGetParameter parameterName        var result   null          tmp           location search          substr 1           split   amp             forEach function  item              tmp   item split                 if  tmp 0      parameterName  result   decodeURIComponent tmp 1                    return result      I removed the duplicated function execution from his code  replacing it a variable   tmp   and also I ve added decodeURIComponent  exactly as OP asked  I m not sure if this may or may not be a security issue   Or otherwise with plain for loop  which will work even in IE8   function findGetParameter parameterName        var result   null          tmp           var items   location search substr 1  split   amp         for  var index   0  index  lt  items length  index              tmp   items index  split               if  tmp 0      parameterName  result   decodeURIComponent tmp 1              return result

User · Answer

You should use URL and URLSearchParams native functions    x000D   x000D  let url   new URL  https   www google com webhp sourceid chrome-instant amp ion 1 amp espv 2 amp ie UTF-8 amp q mdn 20query 20string   x000D  let params   new URLSearchParams url search   x000D  let sourceid   params get  sourceid       chrome-instant  x000D  let q   params get  q       mdn query string  x000D  let ie   params has  ie      true x000D  params append  ping   pong   x000D   x000D  console log sourceid  x000D  console log q  x000D  console log ie  x000D  console log params toString    x000D  console log params get  ping    x000D   x000D   x000D    https   developer mozilla org en-US docs Web API URLSearchParams https   polyfill io v2 docs features

User · Answer

tl dr solution on a single line of code using vanilla JavaScript var queryDict      location search substr 1  split  quot  amp  quot   forEach function item   queryDict item split  quot   quot   0     item split  quot   quot   1     This is the simplest solution  It unfortunately does not handle multi-valued keys and encoded characters   quot  a 1 amp a  2Fadmin amp b 2 amp c 3 amp d amp e quot   gt  queryDict a   quot  2Fadmin quot      Overridden with the last value  not decoded  b   quot 2 quot  c   quot 3 quot  d  undefined e  undefined  Multi-valued keys and encoded characters  See the original answer at How can I get query string values in JavaScript    quot  a 1 amp b 2 amp c 3 amp d amp e amp a 5 amp a t 20e 20x 20t amp e http 3A 2F 2Fw3schools com 2Fmy 20test asp 3Fname 3Dst  le 26car 3Dsaab amp a  2Fadmin quot   gt  queryDict a    quot 1 quot    quot 5 quot    quot t e x t quot    quot  admin quot   b    quot 2 quot   c    quot 3 quot   d   undefined  e   undefined   quot http   w3schools com my test asp name st  le amp car saab quot     In your example  you would access the value like this   quot  returnurl  2Fadmin quot   gt  qd returnurl         quot  admin quot    gt  qd  returnurl        quot  admin quot    gt  qd returnurl 0      quot  admin quot

User · Answer

A more fancy way to do it     var options   window location search slice 1                         split   amp                           reduce function  reduce    Object   a    String   b                            b   b split                               a b 0     decodeURIComponent b 1                            return a

User · Answer

I do it like this  to retrieve a specific get-parameter  here  parameterName    var parameterValue   decodeURIComponent window location search match       amp  parameterName      amp       2

User · Answer

If you don t mind using a library instead of rolling your own implementation  check out https   github com jgallen23 querystring

User · Answer

This solution handles URL decoding   var params   function         function urldecode str            return decodeURIComponent  str     replace     g    20                function transformToAssocArray  prmstr             var params               var prmarr   prmstr split   amp             for   var i   0  i  lt  prmarr length  i                  var tmparr   prmarr i  split                   params tmparr 0     urldecode tmparr 1                      return params             var prmstr   window location search substr 1       return prmstr    null  amp  amp  prmstr         transformToAssocArray prmstr               Usage   console log  someParam GET value is   params  someParam

User · Answer

I have created a simple JavaScript function to access GET parameters from URL  Just include this JavaScript source and you can access get parameters  E g   in http   example com index php language french  the language variable can be accessed as   GET  quot language quot    Similarly  a list of all parameters will be stored in a variable   GET Params as an array   Both the JavaScript and HTML are provided in the following code snippet   x000D   x000D   lt  DOCTYPE html gt   lt html gt     lt body gt       lt  -- This script is required -- gt       lt script gt      function   GET              Get the Full href of the page e g  http   www google com files script php v 1 8 7 amp country india       var href   window location href            Get the protocol e g  http       var protocol   window location protocol                   Get the host name e g  www google com       var hostname   window location hostname            Get the pathname e g   files script php       var pathname   window location pathname            Remove protocol part       var queries   href replace protocol                 Remove host part       queries   queries replace hostname                 Remove pathname part       queries   queries replace pathname                 Presently  what is left in the variable queries is    v 1 8 7 amp country india           Perform query functions if present       if  queries        amp  amp  queries                   Remove question mark             queries   queries slice 1               Split all the different queries         queries   queries split   amp                 Get the number of queries         var length   queries length              Declare global variables to store keys and elements           GET Params   new Array              GET                   Perform functions per query         for  var i    0  i  lt  length  i                    Get the present query           var key   queries i                 Split the query and the value           key   key split                     Assign value to the   GET variable             GET key 0      key 1                  Assign value to the   GET Params variable             GET Params i    key 0                                   Execute the function       GET         lt  script gt       lt h1 gt GET Parameters lt  h1 gt       lt h2 gt Try to insert some get parameter and access it through JavaScript lt  h2 gt     lt  body gt   lt  html gt  x000D   x000D   x000D

[javascript] How to retrieve GET parameters from JavaScript

Examples related to javascript

Examples related to get