2694 votes

Comment puis-je obtenir des valeurs de chaîne de requête en JavaScript?

Est-il un plugin-moins de moyen de récupérer la chaîne de requête de valeurs via jQuery (ou sans)?

Si oui, comment? Si non, est-il un plugin qui peut le faire?

10338voto

Artem Barger Points 18789

Vous n'avez pas besoin de jQuery pour cette fin. Vous pouvez utiliser juste quelques pur JavaScript:

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, " "));
}

Utilisation:

var prodId = getParameterByName('prodId');

1776voto

Andy E Points 132925

Certaines des solutions postées ici sont inefficaces. Répéter l'expression régulière de recherche chaque fois que le script a besoin d'accéder à un paramètre est complètement inutile, une seule fonction pour séparer les paramètres dans un cadre associatif-tableau de style de l'objet est assez. Si vous ne travaillez pas avec le HTML 5 de l'Histoire de l'API, c'est nécessaire une seule fois par chargement de la page. Les autres suggestions ici aussi ne parviennent pas à décoder l'URL correctement.

var urlParams;
(window.

Exemple querystring:

onpopstate

Résultat:

 = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return 

Cela pourrait facilement être amélioré pour gérer la matrice de style chaînes de requête trop. Un exemple de cela ici, mais depuis le tableau de style les paramètres ne sont pas définis dans la RFC 3986 je ne vais pas polluer cette réponse avec le code source. Pour ceux intéressés par un "pollué" version, regardez campbeln la réponse ci-dessous.

Aussi, comme l'a souligné dans les commentaires, decodeURIComponent est un délimiteur (s.replace(pl, " ")); }, query = window. paires. Elle aurait besoin d'un plus compliqué regex pour manipuler location ou .search., je pense que c'est inutile, car il est rare qu' substring est utilisé, et je dirais même plus rare que les deux devraient être utilisés. Si vous avez besoin de soutien (1); urlParams = {}; while (match = search. au lieu de exec, il suffit de le remplacer dans l'expression régulière.


Si vous utilisez un serveur de prétraitement de la langue, vous pouvez utiliser ses JSON native des fonctions pour effectuer le levage lourd pour vous. Par exemple, en PHP, vous pouvez écrire:

(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

Beaucoup plus simple!

1326voto

BrunoLM Points 26573

Sans jQuery

var qs = (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('&'));

Avec une URL de la forme ?topic=123&name=query+string, le suivant sera de retour:

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

Google méthode

La déchirure de Google code, j'ai trouvé la méthode qu'ils utilisent: getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

Il est obscurci, mais c'est compréhensible.

Ils commencent à regarder pour les paramètres de l'url à partir d' ? et également à partir de la table de hachage #. Ensuite, pour chaque paramètre, ils se sont séparés dans le signe égal b[f][p]("=") (qui ressemble indexOf, ils utilisent la position du char pour obtenir la clé/valeur). Après avoir fendu de vérifier si le paramètre a une valeur ou pas, si il a ils stocker la valeur de l' d, si non il suffit de continuer.

En fin de compte l'objet d est retournée, de la manipulation de l'évasion et de l' + signe. Cet objet est, comme la mienne, il a le même comportement.


Ma méthode comme un plugin jQuery

(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);

L'utilisation de la

$.QueryString["param"]

Test de Performance (méthode de fractionnement à l'encontre de la regex de la méthode) (jsPerf)

Préparation code: déclaration de méthodes

Split code de test

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

Regex code de test

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Test de Firefox 4.0 x86 sur Windows Server 2008 R2 / 7 x64

  • Méthode de fractionnement: 144,780 ±2.17% plus rapide
  • Regex méthode: 13,891 ±0.85% | 90% plus lent

681voto

James Points 56229

Version améliorée de Artem Barger réponse:

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

Pour plus d'informations sur l'amélioration de la voir: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

402voto

AlfaTeK Points 2675

Juste une autre recommandation. Le plugin Purl permet de récupérer toutes les parties de l'URL, y compris d'ancrage, d'accueil, etc.

Il peut être utilisé avec ou sans jQuery.

L'utilisation est très simple et cool:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X