Come ottenere i parametri passati tramite url – Javascript

A volte abbiamo bisogno di ottenere i valori passati tramite il metodo get attraverso la stringa di un URL sulla barra degli indirizzi del browser.

Ma la domanda è come ottenerli in JavaScript o JQuery?

Qui sto menzionando 4 modi per ottenere i valori dai parametri con javascript/jquery. Ho anche inserito nell’articolo alcuni esempi di utilizzo. Puoi usarne uno secondo la tua scelta e necessità nel JS o Jquery lato client.

Ecco 4 modi per ottenere i parametri url

<https://example.it?parametro1=valore1&parametro2=valore2>

1.Recupera i valori della stringa di query utilizzando URLSearchParams

Questo è il modo più semplice e consigliato per recuperare i valori dalla stringa contenente l’url. URLSearchParams è un’interfaccia integrata nei browser più recenti con una serie di metodi per ottenere e manipolare valori.

const url = window.location.search 
//url = <https://example.it?parametro1=valore1&parametro2=valore2>
const urlParams = new URLSearchParams(url);
const param_x = urlParams.get('parametro1');

Sebbene questa interfaccia supporti un numero di browser decenti, non è disponibile per tutti, specialmente per quelli vecchi. Suggerisco di controllare la documentazione ufficiale su Mozilla e Chrome. Ha vari metodi utili da utilizzare.

2.Utilizzando le espressioni regolari (regex) in JavaScript

Ecco la funzione che decodificherà in modo sicuro i componenti URL utilizzando un’espressione regolare. Possiamo chiamare questa funzione e passare il nome del parametro della stringa di query come argomento per ottenere il valore.

<script type="text/javascript">
    function getUrlParameter(name) {
        name = name.replace(/[\\[]/, "\\\\[").replace(/[\\]]/, "\\\\]");
        var regex = new RegExp("[\\\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\\+/g, " "));
    }
    var qsp = 'game',
    para = getUrlParameter(qsp);
</script>

Supponiamo di avere l’URL come segue:

<http://example.com/sports?game=football>.

Se desideriamo recuperare il valore di game, possiamo passarlo alla variabile qsp come stringa e otterremo football come valore. Se il parametro non esiste, la funzione restituirà semplicemente una stringa vuota.

3.Semplice funzione javascript per salvare i parametri in un oggetto

Possiamo anche ottenere l’intera stringa di parametri come oggetto e quindi accedere al valore di un particolare parametro tramite la sua chiave.

function get_query(){
    var url = document.location.href;
    //url = <https://example.it?parametro1=valore1&parametro2=valore2>
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

Questa funzione procede in questo modo:

1. Prende l’url della pagina (si può passare un stringa contenete l’url in caso di necessità dicerse)
2. Tramite la manipolazione delle string e la funzione split, divide l’url nel modo seguente :

qs= ["parametro1=valore1","parametro2=valore2"];

1. Tramite un ciclo for, scandisce tutti gli elementi dell’array qs appena creato e creao un oggetto result con questa forma:

result = {parametro1:"valore1",parametro2:"valore2};

4.Ottenere i parametri get di un url tramite Jquery

Se vuoi un modo jQuery per ottenere il valore di un parametro specifico, ecco la funzione:

(function($) {
    $.QueryString = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'))
})(jQuery);
 
// Esempio
var param = jQuery.QueryString["param"];

La funzione jquery appena descritta non fa altro che istanziare un’oggetto chiave valore con i parametri passati nel url, quindi chiamando JQuery,QueryString e passandogli la chiave da cercare, otteniamo il valore desiderato.

Spero che queste 4 funzioni ti aiutino a ottenere i valori dei parametri passati nel url. In caso di domande o problemi con jQuery/JavaScript, non esitare a contattarci.