web-dev-qa-db-fra.com

Comment puis-je obtenir un paramètre spécifique de location.search?

Si j'avais une URL telle que

http://localhost/search.php?year=2008

Comment pourrais-je écrire une fonction JavaScript pour récupérer la variable year et voir si elle contient quelque chose?

Je sais que cela peut être fait avec location.search mais je ne peux pas comprendre comment il saisit les paramètres.

javascripturl
48
sarmenhb

Mon moyen préféré pour obtenir les paramètres d'URL est cette approche: 

var parseQueryString = function() {

    var str = window.location.search;
    var objURL = {};

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
            objURL[ $1 ] = $3;
        }
    );
    return objURL;
};

//Example how to use it: 
var params = parseQueryString();
alert(params["foo"]);
54
Alex

Une approche non regex, vous pouvez simplement diviser par le caractère '&' et parcourir la paire clé/valeur:

function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      i, val, params = searchString.split("&");

  for (i=0;i<params.length;i++) {
    val = params[i].split("=");
    if (val[0] == paramName) {
      return val[1];
    }
  }
  return null;
}
30
CMS

Vous pouvez utiliser window.URL class:

new URL(location.href).searchParams.get('year')
// Returns 2008 for href = "http://localhost/search.php?year=2008".
// Or in two steps:
const params = new URL(location.href).searchParams;
const year = params.get('year');
22
TheNamelessOne

Cette question est ancienne et les choses ont évolué en JavaScript . Vous pouvez maintenant le faire:

const params = {}
document.location.search.substr(1).split('&').forEach(pair => {
  [key, value] = pair.split('=')
  params[key] = value
})

et vous obtenez params.year contenant 2008. Vous obtiendrez également d'autres paramètres de requête dans votre objet params.

Edit : une façon plus courte/plus propre de faire ceci:

const params = new Map(location.search.slice(1).split('&').map(kv => kv.split('=')))

Vous pouvez ensuite tester si le paramètre year existe avec:

params.has('year')  // true

Ou le récupérer avec:

params.get('year')  // 2008
10
vinyll
function gup( name ) {
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
    if( results == null )
        return "";
    else
        return results[1];
}
var year = gup("year"); // returns "2008"
7
Luca Matteis

Ce qui suit utilise des expressions régulières et recherche uniquement dans la partie chaîne de requête de l'URL. 

Plus important encore, cette méthode prend en charge les paramètres normal et tableau comme dans http://localhost/?fiz=Zip&foo[]=!!=&bar=7890#hashhashhash

function getQueryParam(param) {
    var result =  window.location.search.match(
        new RegExp("(\\?|&)" + param + "(\\[\\])?=([^&]*)")
    );

    return result ? result[3] : false;
}

console.log(getQueryParam("fiz"));
console.log(getQueryParam("foo"));
console.log(getQueryParam("bar"));
console.log(getQueryParam("zxcv"));

Sortie: 

Zip
!!=
7890
false
7
Justin Johnson

Il m'a fallu un certain temps pour trouver la réponse à cette question. La plupart des gens semblent suggérer des solutions de regex. Je préfère fortement utiliser un code qui a fait ses preuves, par opposition à une regex que moi-même ou quelqu'un d'autre avons imaginé à la volée.

J'utilise la bibliothèque parseUri disponible ici: http://stevenlevithan.com/demo/parseuri/js/

Cela vous permet de faire exactement ce que vous demandez:

var uri = 'http://localhost/search.php?year=2008';
var year = uri.queryKey['year'];
// year = '2008'
6
Chris Dutrow

Le plus simple est d’avoir

if (document.location.search.indexOf('yourtext=') >= 0) {
    // your code
} else {
    // what happens?
}

indice de()

La fonction indexOf(text) renvoie

  • Un numéro entier inférieur à 0 lorsque le texte transmis dans la fonction ne se trouve ni dans la variable ni dans la chaîne recherchées - dans ce cas, document.location.search.
  • Un numéro entier égal à 0 OR HIGHER lorsque le texte transmis dans la fonction est dans la variable ou la chaîne que vous recherchez - dans ce cas, document.location.search.

J'espère que cela a été utile, @gumbo

5
David Sevilla Martín

J'ai un peu joué avec ce problème et à cette fin j'ai utilisé ceci:

function getJsonFromUrl() {
  return Object.assign(...location.search.substr(1).split("&").map(sliceProperty));
}
  • Object.assign pour transformer une liste d'objets en un seul objet
  • Opérateur Spread ... pour transformer un tableau en une liste
  • location.search.substr(1).split("&") pour obtenir tous les paramètres en tant que tableau de propriétés (foo=bar)
  • map parcourez chaque propriété et les divisez en un tableau (appelez splitProperty ou sliceProperty).

splitProperty:

  function splitProperty(pair) {
    [key, value] = pair.split("=")
    return { [key]: decodeURIComponent(value) }
  }
  • Fractionner par =
  • Déconstruire le tableau en un tableau de deux éléments
  • Renvoyer un nouvel objet avec la syntaxe de propriété dynamique

sliceProperty:

  function sliceProperty(pair) {
    const position = pair.indexOf("="),
      key = pair.slice(0, position),
      value = pair.slice(position + 1, pair.length);
    return { [key]: decodeURIComponent(value) }
  }
  • Définir la position de =, clé et valeur
  • Renvoyer un nouvel objet avec la syntaxe de propriété dynamique

Je pense que splitProperty est plus joli mais sliceProperty est plus rapide. Exécutez JsPerf pour plus d'informations.

1
aloisdg

Saisissez les paramètres de location.search avec une seule ligne:

const params = new Map(this.props.location.search.slice(1).split('&').map(param => param.split('=')))

Ensuite, simplement:

if(params.get("year")){
  //year exists. do something...
} else {
  //year doesn't exist. do something else...
}
1
Nicole Hemenway

J'ai utilisé une variante de Alex - mais je devais convertir le paramètre apparaissant plusieurs fois en tableau. Il semble y avoir beaucoup d'options. Je ne voulais pas compter sur une autre bibliothèque pour quelque chose d'aussi simple. Je suppose que l’une des autres options publiées ici est peut-être meilleure: j’ai adapté celui d’Alex à cause de la franchise.

parseQueryString = function() {
    var str = window.location.search;
    var objURL = {};

    // local isArray - defer to underscore, as we are already using the lib
    var isArray = _.isArray

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){

            if(objURL[ $1 ] && !isArray(objURL[ $1 ])){
                // if there parameter occurs more than once, convert to an array on 2nd
                var first = objURL[ $1 ]
                objURL[ $1 ] = [first, $3]
            } else if(objURL[ $1 ] && isArray(objURL[ $1 ])){
                // if there parameter occurs more than once, add to array after 2nd
                objURL[ $1 ].Push($3)
            }
            else
            {
                // this is the first instance
                objURL[ $1 ] = $3;
            }

        }
    );
    return objURL;
};
1
akaphenom

C'est ce que j'aime faire:

window.location.search
    .substr(1)
    .split('&')
    .reduce(
        function(accumulator, currentValue) {
            var pair = currentValue
                .split('=')
                .map(function(value) {
                    return decodeURIComponent(value);
                });

            accumulator[pair[0]] = pair[1];

            return accumulator;
        },
        {}
    );

Bien sûr, vous pouvez le rendre plus compact en utilisant une syntaxe moderne ou en écrivant le tout sur une seule ligne ... 

Je vous laisse cela.

0
Martin

Utilisez cette compact one-liner pour obtenir un objet de la chaîne de requête:

var query = Object.assign.apply(0,location.search.slice(1).split('&').map(a=>({[a.split('=')[0]]:a.split('=')[1]})));

Maintenant, utilisez simplement query['key'] pour obtenir la valeur de ladite clé.

0
Harrison Smith