Wenn ich eine URL hätte
http://localhost/search.php?year=2008
Wie schreibe ich eine JavaScript-Funktion, um die Variable year zu greifen und zu sehen, ob sie etwas enthält?
Ich weiß, dass es mit location.search
möglich ist, aber ich kann nicht herausfinden, wie Parameter erfasst werden.
Mein bevorzugter Weg, um URL-Parameter zu erhalten, ist dieser Ansatz:
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"]);
Bei einem Ansatz ohne Regex können Sie einfach nach dem Zeichen '&' spalten und das Schlüssel/Wert-Paar durchlaufen:
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;
}
Sie können window.URL
class verwenden:
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');
Diese Frage ist alt und die Dinge haben sich in JavaScript weiterentwickelt .. Sie können dies nun tun:
const params = {}
document.location.search.substr(1).split('&').forEach(pair => {
[key, value] = pair.split('=')
params[key] = value
})
und Sie erhalten params.year
, der 2008
..__ enthält. Sie würden auch andere Abfrageparameter in Ihrem params
-Objekt erhalten.
Bearbeiten : Eine kürzere/sauberere Methode, dies zu tun:
const params = new Map(location.search.slice(1).split('&').map(kv => kv.split('=')))
Sie können dann testen, ob der Parameter year
existiert:
params.has('year') // true
Oder rufen Sie es ab mit:
params.get('year') // 2008
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"
Im Folgenden werden reguläre Ausdrücke verwendet und nur im Abfragezeichenfolge-Teil der URL gesucht.
Am wichtigsten ist, dass diese Methode normale Parameter und Array-Parameter wie in http://localhost/?fiz=Zip&foo[]=!!=&bar=7890#hashhashhash
unterstützt.
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"));
Ausgabe:
Zip
!!=
7890
false
Ich habe eine Weile gebraucht, um die Antwort auf diese Frage zu finden. Die meisten Leute scheinen Regex-Lösungen vorzuschlagen. Ich ziehe es vor, Code zu verwenden, der sich im Vergleich zu Regex, den ich oder jemand anderes spontan ausgedacht habe, bewährt hat.
Ich verwende die parseUri-Bibliothek, die hier zur Verfügung steht: http://stevenlevithan.com/demo/parseuri/js/
Sie können genau das tun, wonach Sie fragen:
var uri = 'http://localhost/search.php?year=2008';
var year = uri.queryKey['year'];
// year = '2008'
Der einfachste Weg ist zu haben
if (document.location.search.indexOf('yourtext=') >= 0) {
// your code
} else {
// what happens?
}
Die Funktion indexOf(text)
wird zurückgegeben
document.location.search
.document.location.search
.Ich hoffe das war nützlich, @gumbo
Ich habe ein bisschen mit diesem Problem gespielt und an diesem Ende habe ich Folgendes verwendet:
function getJsonFromUrl() {
return Object.assign(...location.search.substr(1).split("&").map(sliceProperty));
}
Object.assign
, um eine Objektliste in ein Objekt umzuwandeln...
, um ein Array in eine Liste umzuwandelnlocation.search.substr(1).split("&")
, um alle Parameter als Array von Eigenschaften abzurufen (foo=bar
)map
durchläuft die einzelnen Eigenschaften und teilt sie in ein Array auf (entweder splitProperty
oder sliceProperty
).splitProperty
:
function splitProperty(pair) {
[key, value] = pair.split("=")
return { [key]: decodeURIComponent(value) }
}
=
sliceProperty
:
function sliceProperty(pair) {
const position = pair.indexOf("="),
key = pair.slice(0, position),
value = pair.slice(position + 1, pair.length);
return { [key]: decodeURIComponent(value) }
}
=
, Schlüssel und Wert festIch denke, splitProperty
ist schöner, aber sliceProperty
ist schneller. Führen Sie JsPerf aus, um weitere Informationen zu erhalten.
Holen Sie sich die Parameter von location.search mit einer Zeile:
const params = new Map(this.props.location.search.slice(1).split('&').map(param => param.split('=')))
Dann einfach:
if(params.get("year")){
//year exists. do something...
} else {
//year doesn't exist. do something else...
}
Ich habe eine Variante von Alex verwendet - musste aber den Parameter mehrfach in ein Array umwandeln. Es scheint viele Möglichkeiten zu geben. Ich wollte nicht auf eine andere Bibliothek für etwas so einfaches zurückgreifen. Ich nehme an, eine der anderen Optionen, die hier veröffentlicht werden, ist möglicherweise besser - ich habe die von Alex wegen der Geradlinigkeit angepasst.
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;
};
Das mache ich gerne:
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;
},
{}
);
Natürlich können Sie es mit moderner Syntax kompakter gestalten oder alles in eine Zeile schreiben ...
Das überlasse ich dir.
Verwenden Sie diesen kompakten Einzeiler , um ein Objekt des Querstrings zu erhalten:
var query = Object.assign.apply(0,location.search.slice(1).split('&').map(a=>({[a.split('=')[0]]:a.split('=')[1]})));
Verwenden Sie jetzt einfach query['key']
, um den Wert des Schlüssels abzurufen.
ES6 Antwort:
const parseQueryString = (path = window.location.search) =>
path.slice(1).split('&').reduce((car, cur) => {
const [key, value] = cur.split('=')
return { ...car, [key]: value }
}, {})
zum Beispiel:
parseQueryString('?foo=bar&foobar=baz')
// => {foo: "bar", foobar: "baz"}