Verwenden des GET-Parameters einer URL in JavaScript
Wenn ich auf einer Seite bin wie
http://somesite.com/somepage.php?param1=asdf
In dem JavaScript dieser Seite möchte ich eine Variable auf den Wert des Parameters im GET-Teil der URL setzen.
Also in JavaScript:
<script>
param1var = ... // ... would be replaced with the code to get asdf from URI
</script>
Was wäre wenn?
Hier sind einige Beispielcode dafür.
<script>
var param1var = getQueryVariable("param1");
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 (pair[0] == variable) {
return pair[1];
}
}
alert('Query Variable ' + variable + ' not found');
}
</script>
Sie können den Teil "Suche" des Standortobjekts abrufen und dann auswerten.
var matches = /param1=([^&#=]*)/.exec(window.location.search);
var param1 = matches[1];
Ich habe diese Variante von Gnarfs Lösung gemacht, daher ist der Aufruf und das Ergebnis ähnlich wie in PHP:
function S_GET(id){
var a = new RegExp(id+"=([^&#=]*)");
return decodeURIComponent(a.exec(window.location.search)[1]);
}
Da das Aufrufen in einer Funktion den Prozess verlangsamt, ist es besser, sie als global zu verwenden:
window['var_name'] = decodeURIComponent( /var_in_get=([^&#=]*)/.exec(window.location.search)[1] );
UPDATE
Da ich noch JS lerne, habe ich eine bessere Antwort in einem JS-Verhalten erstellt:
Url = {
get get(){
var vars= {};
if(window.location.search.length!==0)
window.location.search.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));}
});
return vars;
}
};
Dies erlaubt es, nur mit Url.get Aufgerufen zu werden.
Beispiel Die URL ?param1=param1Value¶m2=param2Value Kann wie folgt aufgerufen werden:
Url.get.param1 //"param1Value"
Url.get.param2 //"param2Value"
hier ist ein Schnipsel:
// URL GET params
url = "?a=2&a=3&b=2&a=4";
Url = {
get get(){
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));}
});
return vars;
}
};
document.querySelector('log').innerHTML = JSON.stringify(Url.get);<log></log>Hier ist, wie Sie es in Coffee Script tun können (nur wenn jemand interessiert ist).
decodeURIComponent( v.split( "=" )[1] ) if decodeURIComponent( v.split( "=" )[0] ) == name for v in window.location.search.substring( 1 ).split( "&" )
Aus meinem Programmierarchiv:
function querystring(key) {
var re=new RegExp('(?:\\?|&)'+key+'=(.*?)(?=&|$)','gi');
var r=[], m;
while ((m=re.exec(document.location.search)) != null) r[r.length]=m[1];
return r;
}
Wenn der Wert nicht existiert, wird ein leeres Array zurückgegeben.
Wenn der Wert vorhanden ist, wird ein Array zurückgegeben, das ein Element, den Wert, enthält.
Wenn mehrere Werte mit dem Namen vorhanden sind, wird ein Array mit jedem Wert zurückgegeben.
Beispiele:
var param1var = querystring("param1")[0];
document.write(querystring("name"));
if (querystring('id')=='42') alert('We apoligize for the inconvenience.');
if (querystring('button').length>0) alert(querystring('info'));
Hier ist eine Version, die JSLint gefällt:
/*jslint browser: true */
var GET = {};
(function (input) {
'use strict';
if (input.length > 1) {
var param = input.slice(1).replace(/\+/g, ' ').split('&'),
plength = param.length,
tmp,
p;
for (p = 0; p < plength; p += 1) {
tmp = param[p].split('=');
GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
}
}
}(window.location.search));
window.alert(JSON.stringify(GET));
Oder wenn Sie Unterstützung für mehrere Werte für einen Schlüssel benötigen, wie z. ? key = value1 & key = value2 können Sie dies verwenden:
/*jslint browser: true */
var GET = {};
(function (input) {
'use strict';
if (input.length > 1) {
var params = input.slice(1).replace(/\+/g, ' ').split('&'),
plength = params.length,
tmp,
key,
val,
obj,
p;
for (p = 0; p < plength; p += 1) {
tmp = params[p].split('=');
key = decodeURIComponent(tmp[0]);
val = decodeURIComponent(tmp[1]);
if (GET.hasOwnProperty(key)) {
obj = GET[key];
if (obj.constructor === Array) {
obj.Push(val);
} else {
GET[key] = [obj, val];
}
} else {
GET[key] = val;
}
}
}
}(window.location.search));
window.alert(JSON.stringify(GET));
Sie können diese Funktion verwenden
function getParmFromUrl(url, parm) {
var re = new RegExp(".*[?&]" + parm + "=([^&]+)(&|$)");
var match = url.match(re);
return(match ? match[1] : "");
}
Wenn Sie bereits eine PHP-Seite betreiben, dann
pHP-Bit:
$json = json_encode($_REQUEST, JSON_FORCE_OBJECT);
print "<script>var getVars = $json;</script>";
js bit:
var param1var = getVars.param1var;
Aber für HTML-Seiten sieht die Lösung von Jose Basilio für mich gut aus.
Viel Glück!
Sie müssen eigentlich nichts Besonderes tun. Sie können JavaScript und PHP zusammenmischen, um Variablen aus PHP direkt in JavaScript zu erhalten.
var param1val = '<?php echo $_GET['param1'] ?>';
Verwenden Sie JQuery? Ich habe das schon mal benutzt: http://projects.allmarkedup.com/jquery_url_parser/ und es hat ziemlich gut funktioniert.
Das sah ok aus:
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];
}