Escape-URL-Parameter abrufen

302

Ich suche nach einem jQuery-Plugin, das URL-Parameter abruft und diese Suchzeichenfolge unterstützt, ohne den JavaScript-Fehler "fehlerhafte URI-Sequenz" auszugeben. Wenn es kein jQuery-Plugin gibt, das dies unterstützt, muss ich wissen, wie ich es ändern kann, um dies zu unterstützen.

?search=%E6%F8%E5

Der Wert des URL-Parameters sollte beim Dekodieren sein:

æøå

(Die Charaktere sind Norweger).

Ich habe keinen Zugriff auf den Server, daher kann ich nichts daran ändern.

Sindre Sorhus
quelle
9
Werfen Sie
Artem Barger
1
Der Grund dafür, dass Sie eine "fehlerhafte URI-Sequenz" erhalten, ist, dass die meisten Funktionen verwendet werden decodeURIComponent(). Die norwegischen Zeichen wurden höchstwahrscheinlich mit so etwas wie codiert escape()und das Ändern des decodeURIComponent()Anrufs in ein unescape()sollte helfen.
Kevin M
Siehe meine Antwort für eine moderne Lösung: stackoverflow.com/a/19992436/64949
Sindre Sorhus

Antworten:

418
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
James
quelle
33
Mit name = 'bar', denke ich, würde dieser reguläre Ausdruck übereinstimmen 'foobar=10'und zurückkehren '10'. Vielleicht könnten Sie '[?|&]'zu Beginn Ihres regulären Ausdrucks hinzufügen. Prost!
Sébastien RoccaSerra
34
Diese Funktion gibt 'null' anstelle von null zurück, wenn der Parameter nicht definiert ist ... die Freude von js ...
Damien
12
Möglicherweise möchten Sie "decodeURIComponent ()" anstelle von "decodeURI ()", insbesondere wenn Sie interessante Daten wie Rückgabe-URLs als URL-Parameter übergeben
Perfektionist
25
Das ist gut, aber decodeURIComponent ist besser, zum Beispiel hatte ich ein Hashtag (% 23) in meinem Parameter, das von decodeURI ignoriert würde. Und ich würde nicht null zurückgeben, sondern "", weil decodeURI (null) === "null", was ein seltsamer Rückgabewert ist, "" besser ist; Sie können if (! getURLParameter ("param")) anstelle von if (getURLParameter ("param") === "null") ausführen. Also, meine verbesserte Version: decodeURIComponent ((RegExp (Name + '=' + '(. +?) (& | $)'). Exec (location.search) || [, ""]) [1])
standup75
3
Abgestimmt, da dies eine Zeichenfolge zurückgibt, unabhängig davon, ob das Ergebnis gefunden wurde oder nicht, und unabhängig davon, was Sie als alternatives Array angegeben haben, z. B. [, null], da das Ergebnis in decodeURI eingeschlossen war, das alles in eine Zeichenfolge umwandelte, hatte Sanjeev Recht, aber seinen Code wurde nicht richtig getestet und einfaches Kopieren und Einfügen funktioniert nicht. function getURLParameter(name) { var p = RegExp(name + '=' + '(.+?)(&|$)').exec(location.search); if(!!p) { p = decodeURI(p[1]); } return p; }
Lukasz 'Severiaan' Grela
295

Im Folgenden ist aufgeführt, was ich aus den Kommentaren hier erstellt habe und welche Fehler nicht erwähnt wurden (z. B. die tatsächliche Rückgabe von null und nicht 'null'):

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
Radicand
quelle
6
Wie wäre es newvor RegExp hinzuzufügen ? Weniger Flusenwarnungen.
Ripper234
18
Dies sollte die akzeptierte Antwort sein. Es ist viel besser, echte Null anstelle von "Null" zurückzubekommen.
Art
11
Wenn jemand dies in Coffeescript konvertieren muss: getURLParameter: (name) -> return decodeURIComponent ((neues RegExp ("[? | &] # {Name} = ([^ &;] +?) (& | ## |; |) $) "). exec (location.search) || [null," "]) [1] .replace (/ \ + / g, '% 20')) || null;
Redbeard
1
@Redbeard - Sollte Ihre Funktion nach der Methodendefinition nicht ein '=' anstelle eines Doppelpunkts haben?
Zippie
1
Dies ist die einzige Version einer Funktion zum Abrufen von URL-Parametern, die für mich mit einer UTF8-Zeichenfolge funktioniert.
sicherlich
107

Was Sie wirklich wollen, ist das jQuery URL Parser Plugin . Mit diesem Plugin sieht das Abrufen des Werts eines bestimmten URL-Parameters (für die aktuelle URL) folgendermaßen aus:

$.url().param('foo');

Wenn Sie ein Objekt mit Parameternamen als Schlüssel und Parameterwerten als Werte möchten, rufen Sie einfach param()ohne Argument auf:

$.url().param();

Diese Bibliothek funktioniert auch mit anderen URLs, nicht nur mit der aktuellen:

$.url('http://allmarkedup.com?sky=blue&grass=green').param();
$('#myElement').url().param(); // works with elements that have 'src', 'href' or 'action' attributes

Da es sich um eine gesamte URL-Analysebibliothek handelt, können Sie auch andere Informationen über die URL abrufen, z. B. den angegebenen Port oder den Pfad, das Protokoll usw.:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value');
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

Es hat auch andere Funktionen. Weitere Dokumente und Beispiele finden Sie auf der Homepage .

Statt dem eigenen URI - Parser für diesen Zweck zu schreiben , die irgendwie in funktioniert meisten Fällen einen tatsächlichen URI - Parser verwenden. Abhängig von der Antwort kann Code aus anderen Antworten zurückgegeben 'null'werden null, funktioniert nicht mit leeren Parametern ( ?foo=&bar=x), kann nicht alle Parameter gleichzeitig analysieren und zurückgeben, wiederholt die Arbeit, wenn Sie die URL wiederholt nach Parametern abfragen usw.

Verwenden Sie einen tatsächlichen URI-Parser, erfinden Sie keinen eigenen.

Für diejenigen, die jQuery ablehnen, gibt es eine Version des Plugins, die reines JS ist .

Lucas
quelle
23
Die Frage lautet "URL-Parameter mit jQuery abrufen". Meine Antwort beantwortet die Frage. Andere Antworten weisen den Benutzer an, grundsätzlich seinen eigenen URI-Parser für diesen speziellen Anwendungsfall zu schreiben, was eine schreckliche Idee ist. Das Parsen von URIs ist komplizierter als man denkt.
Lucas
2
Dies ist die Antwort, nach der ich gesucht habe und die im Gegensatz zu einigen anderen Antworten sehr jQuery-artig ist.
Ehtesh Choudhury
Verarbeitet das Plugin die URI-Codierung oder muss ich sie manuell dekodieren?
Roberto Linares
Die Frage lautet "Javascript" (ich denke, es bedeutet das DOM direkt) oder jQuery. Also wird jeder der anderen tun.
Brunoais
43

Wenn Sie die URL-Parameter nicht kennen und ein Objekt mit den Schlüsseln und Werten in den Parametern erhalten möchten, können Sie Folgendes verwenden:

function getParameters() {
  var searchString = window.location.search.substring(1),
      params = searchString.split("&"),
      hash = {};

  if (searchString == "") return {};
  for (var i = 0; i < params.length; i++) {
    var val = params[i].split("=");
    hash[unescape(val[0])] = unescape(val[1]);
  }
  return hash;
}

Das Aufrufen von getParameters () mit einer URL wie folgt /posts?date=9/10/11&author=nilbuswürde Folgendes zurückgeben:

{
  date:   '9/10/11',
  author: 'nilbus'
}

Ich werde den Code hier nicht einfügen, da er noch weiter von der Frage entfernt ist, aber weareon.net hat eine Bibliothek veröffentlicht, die auch die Manipulation der Parameter in der URL ermöglicht:

Edward Anderson
quelle
1
Ja, dies ist besser, um alle Parameter zu erhalten. Alle anderen hier aufgeführten Lösungen wiederholen den regulären Ausdruck für jeden Parameter.
Bernard
Diese Funktion gibt ein unangenehmes Objekt zurück: {"": undefined}Wenn die URL keine Parameter enthält. Am besten geben Sie ein leeres Objekt if(searchString=='') return {};direkt nach der searchStringZuweisung zurück.
Jordan Arseno
40

Sie können die native Eigenschaft location.search des Browsers verwenden :

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 unescape(val[1]);
    }
  }
  return null;
}

Es gibt jedoch einige jQuery-Plugins, die Ihnen helfen können:

CMS
quelle
4
Dies ist viel sauberer und lesbarer (und wahrscheinlich fehlerfreier) als all diese Regex-Einzeiler.
Timmmm
8
Ich werde vorschlagen, decodeURIComponent () anstelle von unescape () zu verwenden
freedev
+1 Dies funktioniert für moderne Browser, aber einige Entwickler müssen mit ...: | arbeiten IE8: S.
Brunoais
25

Basierend auf der Antwort des 999 :

function getURLParameter(name) {
    return decodeURIComponent(
        (location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]
    );  
}

Änderungen:

  • decodeURI() wird ersetzt durch decodeURIComponent()
  • [?|&] wird am Anfang des regulären Ausdrucks hinzugefügt
Eugene Yarmash
quelle
3
Könnte für andere hilfreich sein, wenn Sie erklären könnten, warum Sie diese Änderungen vorgenommen haben. Thx
Timm
3
Behandelt keine leeren Parameter : ?a=&b=1. Besser regexp wäre:"[?&]"+name+"=([^&]*)"
Serg
6

Der Parameter i muss hinzugefügt werden, damit die Groß- und Kleinschreibung nicht berücksichtigt wird:

  function getURLParameter(name) {
    return decodeURIComponent(
      (RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
    );
  }
Scott Wojan
quelle
3

Nachdem ich alle Antworten gelesen hatte, erhielt ich diese Version mit + einer zweiten Funktion, um Parameter als Flags zu verwenden

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)','i').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function isSetURLParameter(name) {
    return (new RegExp('[?|&]' + name + '(?:[=|&|#|;|]|$)','i').exec(location.search) !== null)
}
Neon
quelle
2
Gute Antwort, aber nur eine Warnung. Gemäß JSHint kann [, ""] Probleme für ältere Browser verursachen. Verwenden Sie stattdessen [null, ""] oder [undefined, ""]. Es gibt immer noch einige von uns unglücklichen wenigen, die IE8 unterstützen und ich wage es zu sagen, IE7.
Delicia Brummitt
2
$.urlParam = function(name){
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(top.window.location.href); 
  return (results !== null) ? results[1] : 0;
}

$.urlParam("key");
Yoshi
quelle
2

Zum Beispiel eine Funktion, die den Wert einer beliebigen Parametervariablen zurückgibt.

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

Und so können Sie diese Funktion verwenden, vorausgesetzt, die URL lautet:

"http://example.com/?technology=jquery&blog=jquerybyexample".

var tech = GetURLParameter('technology');
var blog = GetURLParameter('blog');

In der obigen Codevariablen hat "tech" also "jQuery" als Wert und "blog" -Variablen sind "jquerybyexample".

Rubyist
quelle
2

Sie sollten jQuery nicht für so etwas verwenden!
Der moderne Weg besteht darin, kleine wiederverwendbare Module über einen Paketmanager wie Bower zu verwenden.

Ich habe ein kleines Modul erstellt , das die Abfragezeichenfolge in ein Objekt analysieren kann. Verwenden Sie es so:

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå
Sindre Sorhus
quelle
Wenn Sie sagen, dass es nicht modern ist, ein Framework zu haben, ist das in Ordnung. Aber meiner Meinung nach haben Frameworks wirklich ihren Platz. jQuery sieht für mich allerdings immer weniger hübsch aus.
Lodewijk
0

Hier gibt es viel fehlerhaften Code und Regex-Lösungen sind sehr langsam. Ich habe eine Lösung gefunden, die bis zu 20x schneller als das Regex-Gegenstück funktioniert und elegant einfach ist:

    /*
    *   @param      string      parameter to return the value of.
    *   @return     string      value of chosen parameter, if found.
    */
    function get_param(return_this)
    {
        return_this = return_this.replace(/\?/ig, "").replace(/=/ig, ""); // Globally replace illegal chars.

        var url = window.location.href;                                   // Get the URL.
        var parameters = url.substring(url.indexOf("?") + 1).split("&");  // Split by "param=value".
        var params = [];                                                  // Array to store individual values.

        for(var i = 0; i < parameters.length; i++)
            if(parameters[i].search(return_this + "=") != -1)
                return parameters[i].substring(parameters[i].indexOf("=") + 1).split("+");

        return "Parameter not found";
    }

console.log(get_param("parameterName"));

Regex ist nicht das A und O, für diese Art von Problem kann die einfache Manipulation von Strings sehr viel effizienter arbeiten. Codequelle .

George Anthony
quelle
0
<script type="text/javascript">
function getURLParameter(name) {
        return decodeURIComponent(
            (location.search.toLowerCase().match(RegExp("[?|&]" + name + '=(.+?)(&|$)')) || [, null])[1]
        );
    }

</script>

getURLParameter(id)oder getURLParameter(Id)funktioniert genauso :)

user2310887
quelle
0

jQuery-Code-Snippet, um die in der URL gespeicherten dynamischen Variablen als Parameter abzurufen und als JavaScript-Variablen zu speichern, die für die Verwendung mit Ihren Skripten bereit sind:

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}

example.com?param1=name&param2=&id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

//example params with spaces
http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast

console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast
Reza Baradaran Gazorisangi
quelle
-1
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("Param:"+arrParamValues[i]);
                return arrParamValues[i];
             }
       }
       return "No Parameters Found";
    }

}
Dhiral Pandya
quelle
-1

Ich habe eine einfache Funktion erstellt, um URL-Parameter in JavaScript von einer URL wie dieser abzurufen:

.....58e/web/viewer.html?page=*17*&getinfo=33


function buildLinkb(param) {
    var val = document.URL;
    var url = val.substr(val.indexOf(param))  
    var n=parseInt(url.replace(param+"=",""));
    alert(n+1); 
}
buildLinkb("page");

AUSGABE: 18

Code Spy
quelle
2
Seien Sie vorsichtig, wenn Sie Antworten auf mehrere Fragen kopieren und einfügen. Diese werden von der Community in der Regel als "Spam" gekennzeichnet. Wenn Sie dies tun, bedeutet dies normalerweise, dass die Fragen doppelt vorhanden sind. Kennzeichnen Sie sie stattdessen als solche: stackoverflow.com/a/11808489/419
Kev
-1

Nur für den Fall, dass ihr die URL wie localhost / index.xsp? A = 1 # habt und ihr den Parameter bekommen müsst, nicht den Hash.

var vars = [], hash, anchor;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
        anchor = hash[1].split('#');
        vars.push(anchor[0]);
        vars[hash[0]] = anchor[0];
    }
}
Ancyent
quelle
-1

Leichte Änderung der Antwort durch @pauloppenheim, da Parameternamen, die Teil anderer Parameternamen sein können, nicht ordnungsgemäß verarbeitet werden.

Beispiel: Wenn Sie die Parameter "appenv" und "env" haben, kann durch erneutes Löschen des Werts für "env" der Wert "appenv" ermittelt werden.

Fix:

var urlParamVal = function (name) {
    var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
    return result ? decodeURIComponent(result[2]) : "";
};
Lasantha
quelle
-2

Dies kann helfen.

<script type="text/javascript">
    $(document).ready(function(){
        alert(getParameterByName("third"));
    });
    function getParameterByName(name){
        var url     = document.URL,
            count   = url.indexOf(name);
            sub     = url.substring(count);
            amper   = sub.indexOf("&"); 

        if(amper == "-1"){
            var param = sub.split("=");
            return param[1];
        }else{
            var param = sub.substr(0,amper).split("=");
            return param[1];
        }

    }
</script>
Ram Guiao
quelle
1
Dieser Code ist nicht gut getestet. Ratet mal, was mit der Abfrage passiert?twothrids=text
Lyth