Ich habe eine URL mit einigen GET-Parametern wie folgt:
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
Ich muss den gesamten Wert von c
erhalten. Ich habe versucht, die URL zu lesen, bekam aber nur m2
. Wie mache ich das mit JavaScript?
In JavaScript selbst ist nichts für die Verarbeitung von Abfragezeichenfolge-Parametern integriert.
Code, der in einem (modernen) Browser ausgeführt wird, kann das URL
object verwenden (das Teil der APIs-Browser von Browsern zu JS ist):
var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);
Bei älteren Browsern (einschließlich Internet Explorer) können Sie this polyfill oder den Code der Originalversion dieser Antwort verwenden, die älter als URL
ist:
Sie können auf location.search
zugreifen, das Sie vom ?
-Zeichen bis zum Ende der URL oder vom Beginn des Fragment-Identifiers (#foo) aus, je nachdem, was zuerst eintritt, liefert.
Dann können Sie es mit diesem analysieren:
function parse_query_string(query) {
var vars = query.split("&");
var query_string = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
var key = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair[1]);
// If first entry with this name
if (typeof query_string[key] === "undefined") {
query_string[key] = decodeURIComponent(value);
// If second entry with this name
} else if (typeof query_string[key] === "string") {
var arr = [query_string[key], decodeURIComponent(value)];
query_string[key] = arr;
// If third or later entry with this name
} else {
query_string[key].Push(decodeURIComponent(value));
}
}
return query_string;
}
var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);
Sie können die Abfragezeichenfolge von der URL der aktuellen Seite abrufen:
var query = window.location.search.substring(1);
var qs = parse_query_string(query);
Bei den meisten Implementierungen fehlt die URL-Dekodierung der Namen und Werte.
Hier ist eine allgemeine Dienstprogrammfunktion, die auch die richtige URL-Dekodierung ausführt:
function getQueryParams(qs) {
qs = qs.split('+').join(' ');
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params;
}
//var query = getQueryParams(document.location.search);
//alert(query.foo);
function gup( name, url ) {
if (!url) url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( url );
return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')
Dies ist eine einfache Möglichkeit, nur einen Parameter zu überprüfen:
Beispiel URL:
http://myserver/action?myParam=2
Beispiel Javascript:
var myParam = location.search.split('myParam=')[1]
wenn "myParam" in der URL vorhanden ist ... Variable "myParam" wird "2" enthalten, andernfalls ist es undefiniert.
Vielleicht möchten Sie einen Standardwert, in diesem Fall:
var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';
Update: Das funktioniert besser:
var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
var result = captured ? captured : 'myDefaultValue';
Und es funktioniert auch dann richtig, wenn die URL mit Parametern gefüllt ist.
Browser-Hersteller haben eine native Methode implementiert, um dies über URL und URLSearchParams zu erreichen.
let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c')); // outputs "m2-m3-m4-m5"
Derzeit unterstützt in Firefox, Opera, Safari, Chrome und Edge. Für eine Liste der Browserunterstützung siehe hier .
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParamshttps://developer.mozilla.org/en-US/docs/Web/API/URL/URL
Eric Bidelman, Ingenieur bei Google, empfiehlt mit diesem Polyfill für nicht unterstützte Browser.
Sie können die Abfragezeichenfolge in location.search
abrufen. Anschließend können Sie nach dem Fragezeichen alles aufteilen:
var params = {};
if (location.search) {
var parts = location.search.substring(1).split('&');
for (var i = 0; i < parts.length; i++) {
var nv = parts[i].split('=');
if (!nv[0]) continue;
params[nv[0]] = nv[1] || true;
}
}
// Now you can get the parameters you want like so:
var abc = params.abc;
Ich habe das vor langer Zeit gefunden, sehr einfach:
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
Dann nennen Sie es so:
var fType = getUrlVars()["type"];
Ich habe eine einfachere und elegantere Lösung geschrieben.
var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];
Hier ist eine rekursive Lösung, die keinen Regex hat und eine minimale Mutation aufweist (nur das Params-Objekt ist mutiert, was meiner Meinung nach in JS unvermeidbar ist).
Es ist fantastisch, weil es:
Code:
var get_params = function(search_string) {
var parse = function(params, pairs) {
var pair = pairs[0];
var parts = pair.split('=');
var key = decodeURIComponent(parts[0]);
var value = decodeURIComponent(parts.slice(1).join('='));
// Handle multiple parameters of the same name
if (typeof params[key] === "undefined") {
params[key] = value;
} else {
params[key] = [].concat(params[key], value);
}
return pairs.length == 1 ? params : parse(params, pairs.slice(1))
}
// Get rid of leading ?
return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}
var params = get_params(location.search);
// Finally, to get the param you want
params['c'];
function getURLParameters(paramName)
{
var sURL = window.document.URL.toString();
if (sURL.indexOf("?") > 0)
{
var arrParams = sURL.split("?");
var arrURLParams = arrParams[1].split("&");
var arrParamNames = new Array(arrURLParams.length);
var arrParamValues = new Array(arrURLParams.length);
var i = 0;
for (i = 0; i<arrURLParams.length; i++)
{
var sParam = arrURLParams[i].split("=");
arrParamNames[i] = sParam[0];
if (sParam[1] != "")
arrParamValues[i] = unescape(sParam[1]);
else
arrParamValues[i] = "No Value";
}
for (i=0; i<arrURLParams.length; i++)
{
if (arrParamNames[i] == paramName)
{
//alert("Parameter:" + arrParamValues[i]);
return arrParamValues[i];
}
}
return "No Parameters Found";
}
}
Ein super einfacher Weg mit URLSearchParams .
function getParam(param){
return new URLSearchParams(window.location.search).get(param);
}
Es wird derzeit in Chrome, Firefox, Safari, Edge und anderen unterstützt.
ECMAScript 6-Lösung:
var params = window.location.search
.substring(1)
.split("&")
.map(v => v.split("="))
.reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())
Ich habe eine Funktion erstellt, die dies tut:
var getUrlParams = function (url) {
var params = {};
(url + '?').split('?')[1].split('&').forEach(function (pair) {
pair = (pair + '=').split('=').map(decodeURIComponent);
if (pair[0].length) {
params[pair[0]] = pair[1];
}
});
return params;
};
Update 26.05.2017, hier ist eine ES7-Implementierung (läuft mit der voreingestellten Babel-Stufe 0, 1, 2 oder 3):
const getUrlParams = url => `${url}?`.split('?')[1]
.split('&').reduce((params, pair) =>
((key, val) => key ? {...params, [key]: val} : params)
(...`${pair}=`.split('=').map(decodeURIComponent)), {});
Einige Tests:
console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('https://google.com/')); // Will log {}
console.log(getUrlParams('a=1&b=2&c')); // Will log {}
Update 26.03.2014, hier ist eine TypeScript-Implementierung:
const getUrlParams = (search: string) => `${search}?`
.split('?')[1]
.split('&')
.reduce(
(params: object, pair: string) => {
const [key, value] = `${pair}=`
.split('=')
.map(decodeURIComponent)
return key.length > 0 ? { ...params, [key]: value } : params
},
{}
)
Update 2/13/2019, hier ist eine aktualisierte TypeScript-Implementierung, die mit TypeScript 3 funktioniert.
interface IParams { [key: string]: string }
const paramReducer = (params: IParams, pair: string): IParams => {
const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)
return key.length > 0 ? { ...params, [key]: value } : params
}
const getUrlParams = (search: string): IParams =>
`${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})
Ich verwende die Bibliothek " parseUri ". Sie können genau das tun, wonach Sie fragen:
var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5';
var c = uri.queryKey['c'];
// c = 'm2-m3-m4-m5'
Ich benutze
function getVal(str) {
var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
return v ? v[1] : null;
}
Hier ist meine Lösung. Wie von Andy E empfohlen, während Sie diese Frage beantworteten, ist es nicht gut für die Leistung Ihres Skripts, wenn Sie wiederholt verschiedene Regex-Strings erstellen, Schleifen ausführen usw., um nur einen einzigen Wert zu erhalten. Ich habe also ein einfacheres Skript entwickelt, das alle GET-Parameter in einem einzigen Objekt zurückgibt. Sie sollten es nur einmal aufrufen, das Ergebnis einer Variablen zuweisen und dann zu einem beliebigen Zeitpunkt in der Zukunft mithilfe der entsprechenden Taste einen beliebigen Wert aus dieser Variablen ermitteln. Beachten Sie, dass es sich auch um die URI-Dekodierung kümmert (d. H. Dinge wie% 20) und + durch ein Leerzeichen ersetzt:
function getUrlQueryParams(url) {
var queryString = url.split("?")[1];
var keyValuePairs = queryString.split("&");
var keyValue = [];
var queryParams = {};
keyValuePairs.forEach(function(pair) {
keyValue = pair.split("=");
queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(/\+/g, " ");
});
return queryParams;
}
Hier sind einige Tests des Skripts, die Sie sehen können:
// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".
// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".
// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".
Für Single Parameter Value wie diese index.html? Msg = 1 folgenden Code verwenden,
$(window).load(function(){
queryString();
});
function queryString()
{
var queryString = window.location.search.substring(1);
var varArray = queryString.split("="); //eg. index.html?msg=1
var param1 = varArray[0];
var param2 = varArray[1];
}
Für All Parameter Value verwenden Sie folgenden Code,
$(window).load(function(){
queryString();
});
function queryString()
{
var queryString = window.location.search;
var varArray = queryString.split("&");
for (var i=0;i<varArray.length;i++) {
var param = varArray[i].split("=");
//parameter-value pair
}
}
diese Frage hat zu viele Antworten, also füge ich noch eine hinzu.
/**
* parses and returns URI query parameters
*
* @param {string} param parm
* @param {bool?} asArray if true, returns an array instead of a scalar
* @returns {Object|Array}
*/
function getURIParameter(param, asArray) {
return document.location.search.substring(1).split('&').reduce(function(p,c) {
var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); });
if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
}, []);
}
verwendungszweck:
getURIParameter("id") // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids
dies geschieht mit leeren Parametern (diese Schlüssel sind ohne "=value"
vorhanden), die Anzeige einer skalaren und Array-basierten API zum Abrufen von Werten sowie die korrekte Dekodierung von URI-Komponenten.
Hier poste ich ein Beispiel. Aber es ist in jQuery. Hoffe, es wird anderen helfen:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>
<!-- URL: www.example.com/correct/?message=done&year=1990-->
<script type="text/javascript">
$(function(){
$.url.attr('protocol') // --> Protocol: "http"
$.url.attr('path') // --> Host: "www.example.com"
$.url.attr('query') // --> path: "/correct/"
$.url.attr('message') // --> query: "done"
$.url.attr('year') // --> query: "1990"
});
</script>
Oder wenn Sie das URI-Analyserad nicht neu erfinden möchten, verwenden Sie URI.js
So erhalten Sie den Wert eines Parameters mit dem Namen foo:
new URI((''+document.location)).search(true).foo
Was das macht, ist
Hier ist eine Geige dafür .... http://jsfiddle.net/m6tett01/12/
Einfacher Weg
function getParams(url){
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while(match = regex.exec(url)) {
params[match[1]] = match[2];
}
return params;
}
dann nennen Sie es getParams (URL)
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.Push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];
Von hier: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html
// http:localhost:8080/path?param_1=a¶m_2=b
var getParamsMap = function () {
var params = window.location.search.split("&");
var paramsMap = {};
params.forEach(function (p) {
var v = p.split("=");
paramsMap[v[0]]=decodeURIComponent(v[1]);
});
return paramsMap;
};
// -----------------------
console.log(getParamsMap()["param_1"]); // should log "a"
Noch ein Vorschlag.
Es gibt bereits einige gute Antworten, aber ich fand sie unnötig komplex und schwer zu verstehen. Dies ist kurz und einfach und gibt ein einfaches assoziatives Array mit Schlüsselnamen zurück, die den Token-Namen in der URL entsprechen.
Ich habe eine Version mit Kommentaren für diejenigen hinzugefügt, die etwas lernen wollen.
Beachten Sie, dass dies auf jQuery ($ .each) für die Schleife angewiesen ist, die ich anstelle von forEach empfehle. Ich finde es einfacher, die Cross-Browser-Kompatibilität mit jQuery durchgängig zu gewährleisten, anstatt einzelne Fixes einzufügen, um die neuen Funktionen zu unterstützen, die in älteren Browsern nicht unterstützt werden.
Edit: Nachdem ich das geschrieben habe, fiel mir Eric Elliotts Antwort auf, die fast gleich ist, obwohl sie für jeden verwendet wird, obwohl ich generell dagegen bin (aus den oben genannten Gründen).
function getTokens(){
var tokens = [];
var query = location.search;
query = query.slice(1);
query = query.split('&');
$.each(query, function(i,value){
var token = value.split('=');
var key = decodeURIComponent(token[0]);
var data = decodeURIComponent(token[1]);
tokens[key] = data;
});
return tokens;
}
Kommentierte Version:
function getTokens(){
var tokens = []; // new array to hold result
var query = location.search; // everything from the '?' onward
query = query.slice(1); // remove the first character, which will be the '?'
query = query.split('&'); // split via each '&', leaving us an array of something=something strings
// iterate through each something=something string
$.each(query, function(i,value){
// split the something=something string via '=', creating an array containing the token name and data
var token = value.split('=');
// assign the first array element (the token name) to the 'key' variable
var key = decodeURIComponent(token[0]);
// assign the second array element (the token data) to the 'data' variable
var data = decodeURIComponent(token[1]);
tokens[key] = data; // add an associative key/data pair to our result array, with key names being the URI token names
});
return tokens; // return the array
}
Für die folgenden Beispiele gehen wir von dieser Adresse aus:
http://www.example.com/page.htm?id=4&name=murray
Sie können die URL-Token Ihrer eigenen Variablen zuweisen:
var tokens = getTokens();
Verweisen Sie dann wie folgt auf jedes URL-Token:
document.write( tokens['id'] );
Dies würde "4" drucken.
Sie können auch einfach auf einen Token-Namen direkt von der Funktion verweisen:
document.write( getTokens()['name'] );
... was "murray" drucken würde.
Hier ist der angleJs Quellcode zum Analysieren von URL-Abfrageparametern in ein Objekt:
function tryDecodeURIComponent(value) {
try {
return decodeURIComponent(value);
} catch (e) {
// Ignore any invalid uri component
}
}
function isDefined(value) {return typeof value !== 'undefined';}
function parseKeyValue(keyValue) {
keyValue = keyValue.replace(/^\?/, '');
var obj = {}, key_value, key;
var iter = (keyValue || "").split('&');
for (var i=0; i<iter.length; i++) {
var kValue = iter[i];
if (kValue) {
key_value = kValue.replace(/\+/g,'%20').split('=');
key = tryDecodeURIComponent(key_value[0]);
if (isDefined(key)) {
var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true;
if (!hasOwnProperty.call(obj, key)) {
obj[key] = val;
} else if (isArray(obj[key])) {
obj[key].Push(val);
} else {
obj[key] = [obj[key],val];
}
}
}
};
return obj;
}
alert(JSON.stringify(parseKeyValue('?a=1&b=3&c=m2-m3-m4-m5')));
Sie können diese Funktion zu window.location
hinzufügen:
window.location.query = function query(arg){
q = parseKeyValue(this.search);
if (!isDefined(arg)) {
return q;
}
if (q.hasOwnProperty(arg)) {
return q[arg];
} else {
return "";
}
}
// assuming you have this url :
// http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
console.log(window.location.query())
// Object {a: "1", b: "3", c: "m2-m3-m4-m5"}
console.log(window.location.query('c'))
// "m2-m3-m4-m5"
Ich musste eine URL-GET-Variable lesen und eine Aktion basierend auf dem URL-Parameter ausführen. Ich habe nach einer Lösung gesucht und bin auf dieses kleine Stück Code gestoßen. Es liest im Wesentlichen die aktuelle Seiten-URL, führt einige reguläre Ausdrücke für die URL aus und speichert die URL-Parameter in einem assoziativen Array, auf das wir leicht zugreifen können.
Also als Beispiel, wenn wir die folgende URL mit dem Javascript unten hätten.
http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July
Um die Parameter id und page zu erhalten, müssen Sie Folgendes aufrufen:
Der Code wird sein:
<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];
alert(first);
alert(second);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
window.location.href.split("?")
ignorieren Sie dann den ersten Index
Array.prototype.slice.call(window.location.href.split("?"), 1)
gibt ein Array Ihrer URL-Parameter zurück
var paramArray = Array.prototype.slice.call(window.location.href.split(/[?=]+/), 1);
var paramObject = paramArray.reduce(function(x, y, i, a){ (i%2==0) ? (x[y] = a[i+1]) : void 0; return x; }, {});
Ein wenig ausführlicher/hacky, aber auch funktional, enthält paramObject alle Parameter, die als js-Objekt zugeordnet sind
Wir können die Parameter der Parameter c auf eine einfachere Weise abrufen, ohne alle Parameter in einer Schleife zu durchlaufen.
1. Um den Parameterwert zu erhalten:
var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"")
(oder)
url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"")
gibt als String zurück
"m2-m3-m4-m5"
2. Den Parameterwert ersetzen:
var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)
function getParamValue(param) {
var urlParamString = location.search.split(param + "=");
if (urlParamString.length <= 1) return "";
else {
var tmp = urlParamString[1].split("&");
return tmp[0];
}
}
Dies sollte für Ihren Fall funktionieren, egal ob der Parameter zuletzt ist oder nicht.
Folgendes mache ich:
var uriParams = getSearchParameters();
alert(uriParams.c);
// background functions:
// Get object/associative array of URL parameters
function getSearchParameters () {
var prmstr = window.location.search.substr(1);
return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}
// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
var params = {},
prmarr = prmstr.split("&");
for (var i = 0; i < prmarr.length; i++) {
var tmparr = prmarr[i].split("=");
params[tmparr[0]] = tmparr[1];
}
return params;
}
Der kürzeste Weg:
new URL(location.href).searchParams.get("my_key");
Dieser Gist von Eldon McGuinness ist bei weitem die vollständigste Implementierung eines JavaScript-Abfrage-String-Parsers, den ich bisher gesehen habe.
Leider ist es als jQuery-Plugin geschrieben.
Ich habe es an Vanilla JS geschrieben und ein paar Verbesserungen vorgenommen:
function parseQuery(str) {
var qso = {};
var qs = (str || document.location.search);
// Check for an empty querystring
if (qs == "") {
return qso;
}
// Normalize the querystring
qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
while (qs.indexOf("&&") != -1) {
qs = qs.replace(/&&/g, '&');
}
qs = qs.replace(/([\&]+$)/, '');
// Break the querystring into parts
qs = qs.split("&");
// Build the querystring object
for (var i = 0; i < qs.length; i++) {
var qi = qs[i].split("=");
qi = qi.map(function(n) {
return decodeURIComponent(n)
});
if (typeof qi[1] === "undefined") {
qi[1] = null;
}
if (typeof qso[qi[0]] !== "undefined") {
// If a key already exists then make this an object
if (typeof (qso[qi[0]]) == "string") {
var temp = qso[qi[0]];
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = [];
qso[qi[0]].Push(temp);
qso[qi[0]].Push(qi[1]);
} else if (typeof (qso[qi[0]]) == "object") {
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]].Push(qi[1]);
}
} else {
// If no key exists just set it as a string
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = qi[1];
}
}
return qso;
}
// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));
Siehe auch this Fiddle .
Verwenden Sie Dojo. Keine andere Lösung hier ist so kurz oder so gut getestet:
require(["dojo/io-query"], function(ioQuery){
var uri = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ";
var query = uri.substring(uri.indexOf("?") + 1, uri.length);
var queryObject = ioQuery.queryToObject(query);
console.log(queryObject.c); //prints m2-m3-m4-m5
});
PHP parse_str
Nachahmer .. :)
// Handles also array params well
function parseQueryString(query) {
var pars = (query != null ? query : "").replace(/&+/g, "&").split('&'),
par, key, val, re = /^([\w]+)\[(.*)\]/i, ra, ks, ki, i = 0,
params = {};
while ((par = pars.shift()) && (par = par.split('=', 2))) {
key = decodeURIComponent(par[0]);
// prevent param value going to be "undefined" as string
val = decodeURIComponent(par[1] || "").replace(/\+/g, " ");
// check array params
if (ra = re.exec(key)) {
ks = ra[1];
// init array param
if (!(ks in params)) {
params[ks] = {};
}
// set int key
ki = (ra[2] != "") ? ra[2] : i++;
// set array param
params[ks][ki] = val;
// go on..
continue;
}
// set param
params[key] = val;
}
return params;
}
var query = 'foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last';
var params = parseQueryString(query);
console.log(params)
console.log(params.foo) // 1
console.log(params.bar) // The bar!
console.log(params.arr[0]) // a0
console.log(params.arr[1]) // a1
console.log(params.arr.s) // as
console.log(params.arr.none) // undefined
console.log("isset" in params) // true like: isset($_GET['isset'])
/*
// in php
parse_str('foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last', $query);
print_r($query);
Array
(
[foo] => 1
[bar] => The bar!
[arr] => Array
(
[0] => a0
[1] => a1
[s] => as
[2] => last
)
[isset] =>
)*/
replace()
: Aus der urlStr
Zeichenfolge:
_paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
_
oder aus der aktuellen URL:
_paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
_
Erklärung:
document.URL
- Die Schnittstelle gibt den Speicherort des Dokuments (Seiten-URL) als Zeichenfolge zurück.replace()
- Methode gibt eine neue Zeichenfolge mit einigen oder allen Übereinstimmungen eines Musters zurück, das durch eine Ersetzung ersetzt wurde ./.*param_name=([^&]*).*/
- das regulärer Ausdruck Muster zwischen Schrägstrichen, was bedeutet: .*
_ - ein oder mehrere beliebige Zeichen,param_name=
_ - Name des Parameters, der gesucht wird,()
_ - Gruppe in regulärem Ausdruck,[^&]*
_ - ein oder mehrere beliebige Zeichen außer _&
_,|
_ - Wechsel,$1
_ - Verweis auf die erste Gruppe im regulären Ausdruck._var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);
_
Sie können ein Eingabefeld hinzufügen und den Benutzer dann bitten, den Wert in das Feld zu kopieren. So einfach ist das:
<h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1>
<input type='text' id='the-url-value' />
<input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' />
<script>
//...read the value on click
Ok, im Ernst ... ich habe diesen Code gefunden und es scheint gut zu funktionieren:
http://www.developerdrive.com/2013/08/turning-the-querystring-into-a-json-object-using-javascript/
function queryToJSON() {
var pairs = location.search.slice(1).split('&');
var result = {};
pairs.forEach(function(pair) {
pair = pair.split('=');
result[pair[0]] = decodeURIComponent(pair[1] || '');
});
return JSON.parse(JSON.stringify(result));
}
var query = queryToJSON();
Ich schreibe so gerne wie möglich eine Kurzschrift:
URL: example.com/mortgage_calc.htm?pmts=120&intr=6.8&prin=10000
Vanilla Javascript:
for ( var vObj = {}, i=0, vArr = window.location.search.substring(1).split('&');
i < vArr.length; v = vArr[i++].split('='), vObj[v[0]] = v[1] ){}
// vObj = {pmts: "120", intr: "6.8", prin: "10000"}
Elegante, funktionale Lösung
Erstellen wir ein Objekt, das URL-Parameternamen als Schlüssel enthält, dann können wir den Parameter einfach anhand seines Namens extrahieren:
// URL: https://example.com/?test=true&orderId=9381
// Build an object containing key-value pairs
const urlParams = window.location.search
.split('?')[1]
.split('&')
.map(keyValue => keyValue.split('='))
.reduce((params, [key, value]) => {
params[key] = value;
return params;
}, {});
// Return URL parameter called "orderId"
return urlParams.orderId;
Ich habe ein JavaScript-Tool entwickelt, um dies in einem einfachen Schritt zu tun
Kopieren Sie zuerst diesen Skriptlink in den Kopf Ihres HTML-Codes:
<script src="https://booligoosh.github.io/urlParams/urlParams.js"></script>
Dann einfach den Wert von c
mit urlParams.c
oder urlParams['c']
..__ abrufen. Einfach!
Sie können hier eine echte Demo mit Ihren Werten sehen.
Denken Sie auch daran, dass ich dies entwickelt habe, aber es ist eine einfache und sorglose Lösung für Ihr Problem. Dieses Tool enthält auch eine Hexadezimal-Dekodierung, die oft hilfreich sein kann.
Ich bevorzuge es, verfügbare Ressourcen zu verwenden, anstatt neu zu erfinden, wie diese Parameter analysiert werden.
const url = 'http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
const params = [... new URL(url).searchParams.entries()]
.reduce((a, c) => Object.assign(a, {[c[0]]:c[1]}), {})
console.log(params);
Ein Liner und IE11 freundlich:
> (window.location.href).match('c=([^&]*)')[1]
> "m2-m3-m4-m5"
Hier ist eine Lösung, die ich etwas lesbarer finde - aber für <IE8 ist ein Shim .forEach()
erforderlich:
var getParams = function () {
var params = {};
if (location.search) {
var parts = location.search.slice(1).split('&');
parts.forEach(function (part) {
var pair = part.split('=');
pair[0] = decodeURIComponent(pair[0]);
pair[1] = decodeURIComponent(pair[1]);
params[pair[0]] = (pair[1] !== 'undefined') ?
pair[1] : true;
});
}
return params;
}
Hier ist meine Lösung: jsfiddle
Die folgende Methode gibt ein Wörterbuch zurück, das die Parameter der angegebenen URL enthält. Falls keine Parameter vorhanden sind, sind sie null.
function getParams(url){
var paramsStart = url.indexOf('?');
var params = null;
//no params available
if(paramsStart != -1){
var paramsString = url.substring(url.indexOf('?') + 1, url.length);
//only '?' available
if(paramsString != ""){
var paramsPairs = paramsString.split('&');
//preparing
params = {};
var empty = true;
var index = 0;
var key = "";
var val = "";
for(i = 0, len = paramsPairs.length; i < len; i++){
index = paramsPairs[i].indexOf('=');
//if assignment symbol found
if(index != -1){
key = paramsPairs[i].substring(0, index);
val = paramsPairs[i].substring(index + 1, paramsPairs[i].length);
if(key != "" && val != ""){
//extend here for decoding, integer parsing, whatever...
params[key] = val;
if(empty){
empty = false;
}
}
}
}
if(empty){
params = null;
}
}
}
return params;
}
Lernen aus vielen Antworten (wie VaMoose 's, Gnarf ' s oder Blixt 's).
Sie können ein Objekt erstellen (oder das Location-Objekt verwenden) und eine Methode hinzufügen, mit der Sie die URL-Parameter decodiert und im JS-Stil abrufen können:
Url = {
params: undefined,
get get(){
if(!this.params){
var vars = {};
if(url.length!==0)
url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value){
key=decodeURIComponent(key);
if(typeof vars[key]==="undefined") {
vars[key]= decodeURIComponent(value);
}
else {
vars[key]= [].concat(vars[key], decodeURIComponent(value));
}
});
this.params = vars;
}
return this.params;
}
};
Dadurch kann die Methode nur mit Url.get
aufgerufen werden.
Beim ersten Abrufen des Objekts von der URL wird das nächste Mal die gespeicherten geladen.
In einer URL wie ?param1=param1Value¶m2=param2Value¶m1=param1Value2
können Parameter abgerufen werden:
Url.get.param1 //["param1Value","param1Value2"]
Url.get.param2 //"param2Value"
So extrahieren Sie alle URL-Parameter aus dem Suchobjekt in window.location als json
export const getURLParams = location => {
const searchParams = new URLSearchParams(location.search)
const params = {}
for (let key of searchParams.keys()) {
params[key] = searchParams.get(key)
}
return params
}
console.log(getURLParams({ search: '?query=someting&anotherquery=anotherthing' }))
// --> {query: "someting", anotherquery: "anotherthing"}