wake-up-neo.net

Wie kann ich einen bestimmten Parameter von location.search beziehen?

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.

48
sarmenhb

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"]); 
54
Alex

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;
}
30
CMS

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');
22
TheNamelessOne

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
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

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
7
Justin Johnson

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'
6
Chris Dutrow

Der einfachste Weg ist zu haben

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

index von()

Die Funktion indexOf(text) wird zurückgegeben

  • A GANZE NUMMER UNTEN 0, wenn der in der Funktion übergebene Text nicht in der gesuchten Variable oder Zeichenfolge enthalten ist - in diesem Fall document.location.search.
  • A GANZE NUMMER GLEICH ZU 0 OR HIGHER, wenn der in der Funktion übergebene Text in der von Ihnen gesuchten Variablen oder Zeichenfolge ist - in diesem Fall 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
  • Spread-Operator ..., um ein Array in eine Liste umzuwandeln
  • location.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) }
  }
  • Split von =
  • Dekonstruieren Sie das Array in ein Array aus zwei Elementen
  • Gibt ein neues Objekt mit der dynamischen Eigenschaftssyntax zurück

sliceProperty:

  function sliceProperty(pair) {
    const position = pair.indexOf("="),
      key = pair.slice(0, position),
      value = pair.slice(position + 1, pair.length);
    return { [key]: decodeURIComponent(value) }
  }
  • Legen Sie die Position von =, Schlüssel und Wert fest
  • Gibt ein neues Objekt mit der dynamischen Eigenschaftssyntax zurück

Ich denke, splitProperty ist schöner, aber sliceProperty ist schneller. Führen Sie JsPerf aus, um weitere Informationen zu erhalten.

1
aloisdg

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...
}
1
Nicole Hemenway

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;
};
1
akaphenom

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.

0
Martin

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.

0
Harrison Smith

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"}
0
Kazuya Gosho