J'ai une URL avec certains paramètres GET comme suit:
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
J'ai besoin d'obtenir la valeur totale de c
. J'ai essayé de lire l'URL, mais je n'ai obtenu que m2
. Comment faire cela en utilisant JavaScript?
J'ai une URL avec certains paramètres GET comme suit:
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
J'ai besoin d'obtenir la valeur totale de c
. J'ai essayé de lire l'URL, mais je n'ai obtenu que m2
. Comment faire cela en utilisant JavaScript?
Réponses:
JavaScript lui-même n'a rien intégré pour gérer les paramètres de chaîne de requête.
Code fonctionnant dans un navigateur (moderne), vous pouvez utiliser l'
URL
objet (qui fait partie des API fournies par les navigateurs à JS):Pour les navigateurs plus anciens (y compris Internet Explorer), vous pouvez utiliser ce polyfill ou le code de la version originale de cette réponse antérieure à
URL
:Vous pouvez y accéder
location.search
, ce qui vous donnerait du?
caractère à la fin de l'URL ou au début de l'identificateur de fragment (#foo), selon la première éventualité.Ensuite, vous pouvez l'analyser avec ceci:
Vous pouvez obtenir la chaîne de requête à partir de l'URL de la page actuelle avec:
la source
URL
en plus de celui pourURLSearchParams
. Ou vous pouvez esquiver ce problème en remplaçant la lignevar c = url.searchParams.get("c");
de la réponse ci-dessus parvar c = new URLSearchParams(window.location.search).get("c");
.new URL()
s'attend à recevoir une URL correctement codée comme argument.decodeURIComponent
s'attend à recevoir un composant d'une URL, pas une URL entière.decodeURIComponent
ne devrait pas être utilisé dans ce casparse_query_string
fonction effectue un double décodage devalue
. Le=
problème mentionné par @ManelClos peut être résolu en ajoutant un second paramètre2
(limit
) àvars[i].split()
.La plupart des implémentations que j'ai vues manquent le décodage d'URL des noms et des valeurs.
Voici une fonction d'utilité générale qui effectue également le décodage d'URL approprié:
la source
qs.split('+').join(' ');
et nonqs.replace(/\+/g, ' ');
?la source
la source
C'est un moyen simple de vérifier un seul paramètre:
Exemple d'URL:
Exemple Javascript:
si "myParam" existe dans l'URL ... la variable myParam contiendra "2", sinon elle ne sera pas définie.
Vous souhaitez peut-être une valeur par défaut, dans ce cas:
Mise à jour: cela fonctionne mieux:
Et cela fonctionne bien même lorsque l'URL est pleine de paramètres.
la source
http://myserver/action?myParam=2&anotherParam=3
ne donnerait pas"2"
mais"2&anotherParam=3"
.(location.search.split('myParam=')[1]||'').split('&')[0]
- à utiliser avec plusieurs paramètres ou possibliy manquantmyParam
.location.search.split('myParam=').splice(1).join('').split('&')[0]
[?|&]
comme dans[?|&]myParam=([^&]+)
result = decodeURIComponent(result);
Les fournisseurs de navigateurs ont mis en œuvre une manière native de le faire via URL et URLSearchParams.
Actuellement pris en charge dans Firefox, Opera, Safari, Chrome et Edge. Pour une liste de prise en charge du navigateur, voir ici .
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
https://url.spec.whatwg.org/
Eric Bidelman, ingénieur chez Google, recommande d' utiliser ce polyfill pour les navigateurs non pris en charge.
la source
new URLSearchParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5").get('a')
revientnull
pour moi? (Sur Chrome stable).b
etc
semblent bien fonctionner.url.searchParams
plutôtnew URLSearchParams(url.search)
.J'ai trouvé cela il y a très longtemps, très facile:
Ensuite, appelez-le comme ceci:
la source
decodeURIComponent()
sur la valeur, car c'est ce avec quoi vous voulez habituellement travailler; utilisezwindow.location.search
plutôtwindow.location.href
, car vous ne vous intéressez qu'aux paramètres, pas à l'url entière.var vars = {}; window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars;
Vous pouvez obtenir la chaîne de requête
location.search
, puis vous pouvez tout fractionner après le point d'interrogation:la source
?array[]=1&array[]=2
produit{"array[]": "2"}
, ce qui est clairement faux.[]
modèle n'a de sens que dans certains cas (par exemple, PHP), mais pas dans d'autres. Donc, pas "clairement faux" - tout simplement pas implémenté pour gérer un cas non standard que vous pourriez ou non avoir besoin de gérer.J'ai écrit une solution plus simple et élégante.
la source
[0-9]
pour\d
Une manière super simple d'utiliser URLSearchParams .
Il est actuellement pris en charge dans Chrome, Firefox, Safari, Edge et autres .
la source
Voici une solution récursive qui n'a pas de regex et a une mutation minimale (seul l'objet params est muté, ce qui, je pense, est inévitable dans JS).
C'est génial parce que:
Code:
la source
J'ai créé une fonction qui fait ceci:
Mise à jour 5/26/2017, voici une implémentation ES7 (s'exécute avec babel preset stage 0, 1, 2 ou 3):
Quelques tests:
Mise à jour 26/03/2018, voici une implémentation de Typographie:
Mise à jour du 13/02/2019, voici une implémentation mise à jour de TypeScript qui fonctionne avec TypeScript 3.
la source
Object {"": ""}
Regarde ça
la source
Solution ECMAScript 6:
la source
function urlParams(url) { const [, searchParams = ''] = url.split('?') return searchParams.split('&') .map(v => v.split('=')) .reduce((map, [key = '', value]) => key.length ? map.set(key, decodeURIComponent(value)) : map, new Map())
}j'utilise
la source
window.location.search
pas de hachage comme#id
.location.href
pour faire correspondre le résultat au lieu dulocation.search
.Merci.J'utilise la bibliothèque parseUri . Il vous permet de faire exactement ce que vous demandez:
la source
Voici ma solution. Comme conseillé par Andy E en répondant à cette question , ce n'est pas bon pour les performances de votre script s'il construit à plusieurs reprises différentes chaînes d'expression régulière, exécute des boucles, etc. juste pour obtenir une valeur unique. Donc, j'ai trouvé un script plus simple qui renvoie tous les paramètres GET dans un seul objet. Vous ne devez l'appeler qu'une seule fois, affecter le résultat à une variable puis, à tout moment dans le futur, obtenir la valeur souhaitée de cette variable à l'aide de la clé appropriée. Notez qu'il prend également en charge le décodage URI (c'est-à-dire des choses comme% 20) et remplace + par un espace:
Voici donc quelques tests du script à voir:
la source
Ou si vous ne voulez pas réinventer la roue d'analyse d'URI, utilisez URI.js
Pour obtenir la valeur d'un paramètre nommé foo:
Qu'est-ce que cela fait
(passer true lui indique de sortir un objet)
Voici un violon pour cela .... http://jsfiddle.net/m6tett01/12/
la source
Pour une valeur de paramètre unique comme celle-ci, index.html? Msg = 1, utilisez le code suivant,
Pour toutes les valeurs de paramètre, utilisez le code suivant,
la source
Ici, je poste un exemple. Mais c'est dans jQuery. J'espère que cela aidera les autres:
la source
Le chemin le plus court:
la source
new URL(location.href).searchParams.get("my_key")
overURLSearchParams
car ce dernier échouera lors de la récupération du premier paramètre de requête d'une URL.cette question a trop de réponses, donc j'en ajoute une autre.
usage:
cela permet de gérer les paramètres vides (les clés présentes sans
"=value"
), l'exposition à la fois d'une API de récupération de valeurs scalaire et basée sur un tableau, ainsi que le décodage des composants URI appropriés.la source
La façon la plus simple d'utiliser la
replace()
méthode:De la
urlStr
chaîne:ou à partir de l' URL actuelle :
Explication:
document.URL
- l'interface renvoie l'emplacement du document (URL de la page) sous forme de chaîne.replace()
- La méthode renvoie une nouvelle chaîne avec certaines ou toutes les correspondances d'un modèle remplacées par un remplacement ./.*param_name=([^&]*).*/
- le modèle d' expression régulière entouré de barres obliques, ce qui signifie:.*
- zéro ou plusieurs caractères,param_name=
- nom du param qui est desséché,()
- groupe en expression régulière,[^&]*
- un ou plusieurs caractères quelconques à l'exclusion&
,|
- alternance,$1
- référence au premier groupe dans l'expression régulière.la source
Encore une autre suggestion.
Il y a déjà de bonnes réponses, mais je les ai trouvées inutilement complexes et difficiles à comprendre. C'est court, simple et renvoie un tableau associatif simple avec des noms de clé correspondant aux noms de jeton dans l'URL.
J'ai ajouté une version avec des commentaires ci-dessous pour ceux qui veulent apprendre.
Notez que cela repose sur jQuery ($ .each) pour sa boucle, que je recommande au lieu de forEach. Je trouve plus simple de garantir la compatibilité entre les navigateurs en utilisant jQuery sur toute la ligne plutôt que de brancher des correctifs individuels pour prendre en charge les nouvelles fonctions qui ne sont pas prises en charge dans les anciens navigateurs.
Edit: Après avoir écrit cela, j'ai remarqué la réponse d'Eric Elliott, qui est presque la même, bien qu'elle utilise forEach, alors que je suis généralement contre (pour les raisons énoncées ci-dessus).
Version commentée:
Pour les exemples ci-dessous, nous supposerons cette adresse:
Vous pouvez attribuer les jetons URL à votre propre variable:
Référez-vous ensuite à chaque jeton d'URL par nom comme ceci:
Cela afficherait "4".
Vous pouvez également simplement vous référer directement à un nom de jeton à partir de la fonction:
... qui imprimerait "murray".
la source
A partir d'ici: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html
la source
Manière simple
puis appelez-le comme getParams (url)
la source
J'avais besoin de lire une variable URL GET et de terminer une action basée sur le paramètre url. J'ai cherché haut et bas une solution et suis tombé sur ce petit morceau de code. Il lit essentiellement l'URL de la page actuelle, effectue une expression régulière sur l'URL puis enregistre les paramètres d'URL dans un tableau associatif, auquel nous pouvons facilement accéder.
Donc, à titre d'exemple, si nous avions l'URL suivante avec le javascript en bas en place.
Tout ce que nous aurions besoin de faire pour obtenir l'ID et la page des paramètres est d'appeler ceci:
Le code sera:
la source
la source
Ce Gist par Eldon McGuinness est de loin l'implémentation la plus complète d'un analyseur de chaînes de requête JavaScript que j'ai vue jusqu'à présent.
Malheureusement, il est écrit en tant que plugin jQuery.
Je l'ai réécrit sur vanilla JS et j'ai apporté quelques améliorations:
Voir aussi ce violon .
la source
Solution de style élégante et fonctionnelle
Créons un objet contenant des noms de paramètres d'URL sous forme de clés, puis nous pouvons facilement extraire le paramètre par son nom:
la source
return
Voici ce que je fais:
la source