web-dev-qa-db-fra.com

Analyser la chaîne de requête en JavaScript

Duplicate possible:
Comment puis-je obtenir les valeurs d'une chaîne de requête?

Je dois analyser la chaîne de requête www.mysite.com/default.aspx?dest=aboutus.aspx. Comment obtenir la variable dest en JavaScript?

323
sinaw

Voici un moyen rapide et facile d’analyser les chaînes de requête en JavaScript:

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 (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
    console.log('Query variable %s not found', variable);
}

Maintenant, faites une demande à page.html? X = Hello:

console.log(getQueryVariable('x'));
320
Tarik
function parseQuery(queryString) {
    var query = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    }
    return query;
}

Transforme la chaîne de requête telle que hello=1&another=2 en objet {hello: 1, another: 2}. À partir de là, il est facile d'extraire la variable dont vous avez besoin.

Cela dit, il ne traite pas les cas de tableaux tels que "hello=1&hello=2&hello=3". Pour travailler avec cela, vous devez vérifier si une propriété de l'objet que vous créez existe avant de l'ajouter, puis en transformer la valeur en tableau, en transmettant les bits supplémentaires.

142
Raivo Fishmeister

Vous pouvez également utiliser l'excellente bibliothèque RI.js par Rodney Rehm . Voici comment:-

var qs = URI('www.mysite.com/default.aspx?dest=aboutus.aspx').query(true); // == { dest : 'aboutus.aspx' }
    alert(qs.dest); // == aboutus.aspx

Et pour analyser la chaîne de requête de la page actuelle: -

var $_GET = URI(document.URL).query(true); // ala PHP
    alert($_GET['dest']); // == aboutus.aspx 
55
Salman for Hire

Moi aussi! http://jsfiddle.net/drzaus/8EE8k/

(Remarque: sans vérification imbriquée fantaisie ou en double)

deparam = function (querystring) {
  // remove any preceding url and split
  querystring = querystring.substring(querystring.indexOf('?')+1).split('&');
  var params = {}, pair, d = decodeURIComponent;
  // march and parse
  for (var i = querystring.length - 1; i >= 0; i--) {
    pair = querystring[i].split('=');
    params[d(pair[0])] = d(pair[1] || '');
  }

  return params;
};//--  fn  deparam

Et des tests:

var tests = {};
tests["simple params"] = "ID=2&first=1&second=b";
tests["full url"] = "http://blah.com/?" + tests["simple params"];
tests['just ?'] = '?' + tests['simple params'];

var $output = document.getElementById('output');
function output(msg) {
  $output.innerHTML += "\n" + Array.prototype.slice.call(arguments, 0).join("\n");
}
$.each(tests, function(msg, test) {
  var q = deparam(test);
  // Prompt, querystring, result, reverse
  output(msg, test, JSON.stringify(q), $.param(q));
  output('-------------------');
});

Résulte en:

simple params
ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
full url
http://blah.com/?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
just ?
?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
21
drzaus

Voici ma version basée vaguement sur la version de Braceyard ci-dessus, mais analysée dans un 'dictionnaire' et supportant les arguments de recherche sans '='. À utiliser dans ma fonction JQuery $ (document) .ready (). Les arguments sont stockés sous forme de paires clé/valeur dans argsParsed, que vous voudrez peut-être sauvegarder quelque part ...

'use strict';

function parseQuery(search) {

    var args = search.substring(1).split('&');

    var argsParsed = {};

    var i, arg, kvp, key, value;

    for (i=0; i < args.length; i++) {

        arg = args[i];

        if (-1 === arg.indexOf('=')) {

            argsParsed[decodeURIComponent(arg).trim()] = true;
        }
        else {

            kvp = arg.split('=');

            key = decodeURIComponent(kvp[0]).trim();

            value = decodeURIComponent(kvp[1]).trim();

            argsParsed[key] = value;
        }
    }

    return argsParsed;
}

parseQuery(document.location.search);
18
Henry Rusted

Dans la continuité de mon commentaire à la réponse publiée par @bobby, voici le code que je voudrais utiliser:

    function parseQuery(str)
        {
        if(typeof str != "string" || str.length == 0) return {};
        var s = str.split("&");
        var s_length = s.length;
        var bit, query = {}, first, second;
        for(var i = 0; i < s_length; i++)
            {
            bit = s[i].split("=");
            first = decodeURIComponent(bit[0]);
            if(first.length == 0) continue;
            second = decodeURIComponent(bit[1]);
            if(typeof query[first] == "undefined") query[first] = second;
            else if(query[first] instanceof Array) query[first].Push(second);
            else query[first] = [query[first], second]; 
            }
        return query;
        }

Ce code prend en compte la chaîne de requête fournie (sous la forme 'str') et retourne un objet. La chaîne est scindée à toutes les occurrences de &, ce qui donne un tableau. le tableau est alors parcouru et chaque élément de celui-ci est divisé par "=". Il en résulte des sous-tableaux dans lesquels le 0ème élément est le paramètre et le 1er élément est la valeur (ou indéfini si aucun signe =). Celles-ci sont mappées sur des propriétés d'objet. Ainsi, par exemple, la chaîne "hello = 1 & another = 2 & quelque chose" est transformée en:

{
hello: "1",
another: "2",
something: undefined
}

De plus, ce code remarque la répétition de répétitions telles que "hello = 1 & hello = 2" et convertit le résultat en un tableau, par exemple:

{
hello: ["1", "2"]
}

Vous remarquerez également qu'il traite des cas dans lesquels le signe = n'est pas utilisé. Il ignore également s'il existe un signe égal immédiatement après un symbole &.

Un peu exagéré pour la question initiale, mais une solution réutilisable si vous avez besoin de travailler avec des chaînes de requête en javascript :)

13
jsdw

Si vous savez que vous ne disposez que de cette variable, vous pouvez simplement faire:

var dest = location.search.replace(/^.*?\=/, '');
7
CB01

La fonction suivante analysera la chaîne de recherche avec une expression régulière, mettra en cache le résultat et renverra la valeur de la variable demandée:

window.getSearch = function(variable) {
  var parsedSearch;
  parsedSearch = window.parsedSearch || (function() {
    var match, re, ret;
    re = /\??(.*?)=([^\&]*)&?/gi;
    ret = {};
    while (match = re.exec(document.location.search)) {
      ret[match[1]] = match[2];
    }
    return window.parsedSearch = ret;
  })();
  return parsedSearch[variable];
};

Vous pouvez soit l'appeler une fois sans aucun paramètre et travailler avec l'objet window.parsedSearch, soit appeler getSearch ultérieurement. Je n'ai pas encore complètement testé cela, l'expression régulière pourrait encore nécessiter quelques modifications ...

7
amiuhle

Je voulais une fonction simple qui prenait une URL en entrée et renvoyait une carte des paramètres de la requête. Si je devais améliorer cette fonction, je prendrais en charge la norme pour les données de tableau dans l'URL et/ou les variables imbriquées.

Cela devrait fonctionner avec la fonction jQuery.param (qparams).

function getQueryParams(url){
    var qparams = {},
        parts = (url||'').split('?'),
        qparts, qpart,
        i=0;

    if(parts.length <= 1 ){
        return qparams;
    }else{
        qparts = parts[1].split('&');
        for(i in qparts){

            qpart = qparts[i].split('=');
            qparams[decodeURIComponent(qpart[0])] = 
                           decodeURIComponent(qpart[1] || '');
        }
    }

    return qparams;
};
5
jdavid.net

Que dis-tu de ça?

function getQueryVar(varName){
    // Grab and unescape the query string - appending an '&' keeps the RegExp simple
    // for the sake of this example.
    var queryStr = unescape(window.location.search) + '&';

    // Dynamic replacement RegExp
    var regex = new RegExp('.*?[&\\?]' + varName + '=(.*?)&.*');

    // Apply RegExp to the query string
    val = queryStr.replace(regex, "$1");

    // If the string is the same, we didn't find a match - return false
    return val == queryStr ? false : val;
}

..then il suffit d'appeler avec:

alert('Var "dest" = ' + getQueryVar('dest'));

À votre santé

2
Madbreaks

Je voulais récupérer des liens spécifiques dans un élément DOM sur une page , envoyez ces utilisateurs vers une page de redirection sur un minuteur, puis transmettez-les à l'URL d'origine sur laquelle vous avez cliqué. Voici comment je l'ai fait en utilisant du javascript régulier intégrant l'une des méthodes ci-dessus.

Page avec des liens: Head

  function replaceLinks() {   
var content = document.getElementById('mainContent');
            var nodes = content.getElementsByTagName('a');
        for (var i = 0; i < document.getElementsByTagName('a').length; i++) {
            {
                href = nodes[i].href;
                if (href.indexOf("thisurl.com") != -1) {

                    nodes[i].href="http://www.thisurl.com/redirect.aspx" + "?url=" + nodes[i];
                    nodes[i].target="_blank";

                }
            }
    }
}

Corps

<body onload="replaceLinks()">

page de redirection Head

   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 (decodeURIComponent(pair[0]) == variable) {
                return decodeURIComponent(pair[1]);
            }
        }
        console.log('Query variable %s not found', variable);
    }
    function delayer(){
        window.location = getQueryVariable('url')
    }

Corps

<body onload="setTimeout('delayer()', 1000)">
2
bobby