How to get values ​​from URL (GET) in JavaScript?

In JavaScript there are no intrinsic functions that allow us to obtain the values ​​of GET parameters, as is the case in languages ​​such as PHP that can obtain these values ​​from the global variable $GET. Instead, regular expressions can be used to achieve a result that simulates such behavior and obtain an expected value.

Solution

In the following url (English) we can get a support function: How can I get query string values ​​in JavaScript?

Quoting the original source of the previous link, we have that:

/**
 * @param String name
 * @return String
 */
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Use

Taking into account that we have a URL like the following:

http://www.ejemplo.com.mx/producto?prodId=88

The value to obtain would be 88 and we would obtain it with:

var prodId = getParameterByName('prodId');

Explanation

The getParameterByName function receives a parameter of the type String (text string) that will be used to evaluate by means of a regular expression that searches for all the content between the end of the received string followed by an equals symbol (=) and the end of the string to search for ( location.search) or until the symbol "et" also known as "ampersand" (&) is found. At the end said text found decoded and returned. In the rare event that no matches are found, it will return an empty string.

I have been using the function created by Chris Coyier for some time now , it works very well for me, I have had no problems and it does not use regular expressions:

function getQueryVariable(variable) {
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0; i < vars.length; i++) {
       var pair = vars[i].split("=");
       if(pair[0] == variable) {
           return pair[1];
       }
   }
   return false;
}

Example :

URL: http://store.com/shop.php?product_id=32&cat_id=1&sessionid=123

<div>
    <button type="button" onclick="alert(getQueryVariable('sessionid'));">
        sessionid
    </button>
    <button type="button" onclick="alert(getQueryVariable('xyz'));">
        xyz
    </button>
    <button type="button" onclick="alert(getQueryVariable('product_id'));">
        product_id 
    </button>
</div>
<script type="text/javascript">
    function getQueryVariable(variable) {
        // Estoy asumiendo que query es window.location.search.substring(1);
        var query = "product_id=32&cat_id=1&sessionid=123";
        var vars = query.split("&");
        alert(vars);
        for (var i=0; i < vars.length; i++) {
            var pair = vars[i].split("="); 
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return false;
    }
</script>

References:

• Get URL Variables

let params = new URLSearchParams(location.search);
var contract = params.get('contrato');

Well this has worked fine for me.

The URLSearchParams interface defines useful methods for working with the search parameters of a URL.

Reference

You can avoid using Regex or similar solutions, by using URLSearchParams. You can check out the documentation on MDN for more info on compatibility and more.

const url = new URL('http://midominio.com/ruta/?param1=valor1&param2=valor2')

const searchParams = url.searchParams

const keys = [...searchParams.keys()]

const object1 = keys
  .reduce((obj, key) =>({...obj, [key]: searchParams.get(key) }), {})
  
const object2 = [...searchParams.entries()]
  .reduce((obj, [key, value]) => ({...obj, [key]: value }), {})

console.log(object1)
console.log(object2)

// [[key1, value1], ...]
console.log([...searchParams.entries()])
// [key1, key2, ...]
console.log([...searchParams.keys()])
// [value1, value2, ...]
console.log([...searchParams.values()])

NOTE: The implemented code may not work in some browsers.

Here at the time I programmed an extension for jquery that gives the parameters both in resful and with unfriendly urls in the readme are the instructions

https://github.com/marcmayol/jquery_extension_url_reader