Uzyskaj parametr zmiany znaczenia adresu URL

302

Szukam wtyczki jQuery, która może pobierać parametry adresu URL i obsługiwać ten ciąg wyszukiwania bez wyświetlania błędu JavaScript: „zniekształcona sekwencja URI”. Jeśli nie ma wtyczki jQuery, która to obsługuje, muszę wiedzieć, jak ją zmodyfikować, aby to obsługiwała.

?search=%E6%F8%E5

Wartość parametru URL po zdekodowaniu powinna wynosić:

æøå

(znaki są norweskie).

Nie mam dostępu do serwera, więc nie mogę niczego na nim modyfikować.

Sindre Sorhus
źródło
1
Powodem, dla którego pojawia się „zniekształcona sekwencja URI”, jest to, że korzysta się z większości funkcji decodeURIComponent(). Norweskie znaki najprawdopodobniej zostały zakodowane przy użyciu czegoś podobnego escape()i zmiana decodeURIComponent()wezwania na a unescape()powinna pomóc.
Kevin M,
Zobacz moją odpowiedź na nowoczesne rozwiązanie: stackoverflow.com/a/19992436/64949
Sindre Sorhus

Odpowiedzi:

417
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
James
źródło
33
Dzięki name = 'bar', myślę, że to wyrażenie regularne będzie pasować 'foobar=10'i powrotu '10'. Może mógłbyś dodać '[?|&]'na początku swojego wyrażenia regularnego. Twoje zdrowie!
Sébastien RoccaSerra
34
ta funkcja zwraca „null” zamiast null, gdy parametr nie jest zdefiniowany ... radość z js ...
Damien
12
możesz chcieć „decodeURIComponent ()” zamiast „decodeURI ()”, szczególnie jeśli przekazujesz ciekawe dane, takie jak zwrotne adresy URL jako parametr URL
perfekcjonista
25
To dobrze, ale decodeURIComponent jest lepszy, na przykład miałem parametr hashtag (% 23) w moim parametrze, który byłby ignorowany przez decodeURI. I nie zwróciłbym null, ale „”, ponieważ decodeURI (null) === „null”, co jest dziwną wartością zwracaną, „” jest lepsze; możesz zrobić if (! getURLParameter („param”)) zamiast if (getURLParameter („param”) === „null”). Tak więc moja ulepszona wersja: decodeURIComponent ((RegExp (name + '=' + '(. +?) (& | $)'). Exec (location.search) || [, ""]) [1])
standup75
3
W głosowaniu w dół, ponieważ zwraca łańcuch bez względu na to, czy wynik został znaleziony, czy nie, i bez względu na to, co podasz jako alternatywną tablicę, np. [, Null], ponieważ wynik został zawarty w decodeURI, który zamienił cokolwiek w ciąg, Sanjeev miał rację, ale jego kod nie został poprawnie przetestowany i proste kopiowanie i wklejanie nie działa. function getURLParameter(name) { var p = RegExp(name + '=' + '(.+?)(&|$)').exec(location.search); if(!!p) { p = decodeURI(p[1]); } return p; }
Łukasz „Severiaan” Grela
295

Poniżej jest to, co utworzyłem z komentarzy tutaj, a także naprawianie błędów, o których nie wspomniano (takich jak zwracanie wartości null, a nie „null”):

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
radicand
źródło
6
Co powiesz na dodanie newprzed RegExp? Mniej ostrzeżeń.
ripper234
18
To powinna być zaakceptowana odpowiedź. Odzyskiwanie wartości zerowej zamiast „zerowej” jest znacznie lepsze.
Art.
11
Jeśli ktoś potrzebuje tego przekonwertować na coffeescript: getURLParameter: (name) -> return decodeURIComponent ((new RegExp ("[? | &] # {Name} = ([^ &;] +?)) (& | ## |; | $) "). exec (location.search) || [null," "]) [1] .replace (/ \ + / g, '% 20')) || null;
Redbeard
1
@ Redbeard - Czy twoja funkcja nie powinna zawierać znaku „=” po definicji metody zamiast podwójnego dwukropka?
Zippie 16.09.13
1
To jest jedyna wersja funkcji get-URL-parameter, która działa dla mnie z ciągiem UTF8.
pewnościąakey
107

To, czego naprawdę chcesz, to wtyczka jQuery URL Parser . Dzięki tej wtyczce uzyskanie wartości określonego parametru adresu URL (dla bieżącego adresu URL) wygląda następująco:

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

Jeśli chcesz obiekt z nazwami parametrów jako kluczami i wartościami parametrów jako wartości, po prostu wywołaj param()bez argumentu, na przykład:

$.url().param();

Ta biblioteka działa również z innymi adresami URL, nie tylko bieżącym:

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

Ponieważ jest to cała biblioteka analizująca adresy URL, możesz również uzyskać inne informacje z adresu URL, takie jak określony port lub ścieżka, protokół itp:

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'

Ma również inne funkcje, sprawdź stronę główną, aby uzyskać więcej dokumentów i przykładów.

Zamiast pisać własny parser URI dla tego konkretnego celu, który w pewnym sensie działa w większości przypadków używać rzeczywistego parsera URI. W zależności od odpowiedzi kod z innych odpowiedzi może zwrócić 'null'zamiast null, nie działa z pustymi parametrami ( ?foo=&bar=x), nie może parsować i zwracać wszystkich parametrów naraz, powtarza pracę, jeśli wielokrotnie pytasz URL o parametry itp.

Użyj rzeczywistego analizatora składni URI, nie wymyślaj własnego.

Dla tych, którzy są niechętni do jQuery, dostępna jest wersja wtyczki, która jest czystym JS .

Lucas
źródło
23
Pytanie brzmi „pobierz parametr URL za pomocą jQuery”. Moja odpowiedź odpowiada na pytanie. Inne odpowiedzi instruują użytkownika, aby w zasadzie napisał własny parser URI dla tego konkretnego przypadku użycia, co jest okropnym pomysłem. Analiza URI jest bardziej skomplikowana, niż ludzie myślą.
Lucas
2
To jest odpowiedź, której szukałem i jest bardzo jQuery, w przeciwieństwie do niektórych innych odpowiedzi.
Ehtesh Choudhury,
Czy wtyczka obsługuje kodowanie URI, czy też muszę go dekodować ręcznie?
Roberto Linares
Pytanie brzmi „javascript” (myślę, że oznacza to bezpośrednio DOM) lub jQuery. Tak zrobi każdy inny.
brunoais
43

Jeśli nie wiesz, jakie będą parametry adresu URL i chcesz uzyskać obiekt z kluczami i wartościami, które są w parametrach, możesz użyć tego:

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

Wywołanie getParameters () z adresem URL jak /posts?date=9/10/11&author=nilbuszwróci:

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

Nie dołączę tutaj kodu, ponieważ jest on jeszcze dalej od pytania, ale weareon.net opublikował bibliotekę, która pozwala również na manipulowanie parametrami w adresie URL:

Edward Anderson
źródło
1
Tak, lepiej jest uzyskać wszystkie parametry. Wszystkie pozostałe rozwiązania wymienione tutaj powtarzają wyrażenie regularne dla każdego parametru.
Bernard
Ta funkcja zwraca niezręczny obiekt: {"": undefined}gdy adres URL jest pozbawiony parametrów. Najlepiej zwrócić pusty obiekt, używając if(searchString=='') return {};bezpośrednio po searchStringprzypisaniu.
Jordan Arseno
40

Możesz użyć właściwości macierzystej location.search przeglądarki :

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

Ale jest kilka wtyczek jQuery, które mogą ci pomóc:

CMS
źródło
4
Jest to o wiele czystsze i bardziej czytelne (i prawdopodobnie bardziej wolne od błędów) niż wszystkie te wyrażenia regularne.
Timmmm,
8
Zasugeruję użycie decodeURIComponent () zamiast
unescape
+1 to działa na nowoczesnych przeglądarkach, ale niektórzy deweloperzy muszą współpracować z ...: | IE8: S.
brunoais
25

Na podstawie odpowiedzi z 999 :

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

Zmiany:

  • decodeURI() jest zastąpiony przez decodeURIComponent()
  • [?|&] jest dodawany na początku wyrażenia regularnego
Eugene Yarmash
źródło
3
Może być pomocny dla innych, jeśli możesz wyjaśnić, dlaczego wprowadziłeś te zmiany. Dzięki
Timm,
3
Nie obsługuje pustych params: ?a=&b=1. Lepszym "[?&]"+name+"=([^&]*)"
wyrażeniem regularnym
6

Musisz dodać parametr i, aby rozróżnić wielkość liter:

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

Po przeczytaniu wszystkich odpowiedzi skończyłem z tą wersją z drugą funkcją do używania parametrów jako flag

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
źródło
2
Dobra odpowiedź, tylko jedno ostrzeżenie. Według JSHint [, „”] może powodować problemy w starszych przeglądarkach. Dlatego użyj zamiast tego [null ”„ ”] lub [undefined,„ ”]. Nadal jest wielu z nas nieszczęśliwych, którzy wspierają IE8 i ośmielę się to powiedzieć 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
źródło
2

Na przykład funkcja, która zwraca wartość dowolnej zmiennej parametrów.

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];
        }
    }
}​

I w ten sposób możesz użyć tej funkcji, zakładając, że adres URL to:

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

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

Zatem w powyższym kodzie zmienna „tech” będzie miała „jQuery” jako wartość, a zmienna „blog” będzie miała wartość „jquerybyexample”.

Rubyist
źródło
2

Nie powinieneś używać jQuery do czegoś takiego!
Nowoczesny sposób polega na użyciu małych modułów wielokrotnego użytku za pośrednictwem menedżera pakietów, takiego jak Bower.

Stworzyłem mały moduł, który może przetwarzać ciąg zapytania w obiekt. Użyj tego w ten sposób:

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå
Sindre Sorhus
źródło
Jeśli mówisz, że ramy nie są nowoczesne, to w porządku. Ale moim zdaniem ramy naprawdę mają swoje miejsce. jQuery wygląda mi jednak coraz mniej ładnie.
Lodewijk
0

Jest tu dużo błędnego kodu, a rozwiązania wyrażeń regularnych są bardzo wolne. Znalazłem rozwiązanie, które działa do 20 razy szybciej niż odpowiednik wyrażenia regularnego i jest elegancko proste:

    /*
    *   @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 nie jest rozwiązaniem całościowym, dla tego typu problemów prosta manipulacja łańcuchem może działać znacznie wydajniej. Źródło kodu .

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

</script>

getURLParameter(id)lub getURLParameter(Id)działa tak samo:)

użytkownik2310887
źródło
0

Fragment kodu jQuery, aby uzyskać dynamiczne zmienne przechowywane w adresie URL jako parametry i przechowywać je jako zmienne JavaScript gotowe do użycia ze skryptami:

$.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
źródło
-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
źródło
-1

Utworzyłem prostą funkcję pobierania parametru URL w JavaScript z adresu URL takiego:

.....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");

WYNIK: 18

Code Spy
źródło
2
Zachowaj ostrożność, publikując odpowiedzi na wiele pytań, kopiując i wklejając odpowiedzi na wiele pytań, które zazwyczaj są oznaczane przez społeczność jako „spamerskie”. Jeśli to robisz, oznacza to zwykle, że pytania są duplikatami, więc oznacz je jako takie: stackoverflow.com/a/11808489/419
Kev
-1

Na wypadek, gdybyście mieli adres URL jak localhost / index.xsp? A = 1 # coś i musicie zdobyć parametr, a nie skrót.

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
źródło
-1

Niewielka modyfikacja odpowiedzi autorstwa @pauloppenheim, ponieważ nie będzie poprawnie obsługiwać nazw parametrów, które mogą być częścią innych nazw parametrów.

Np .: Jeśli masz parametry „appenv” i „env”, wykupienie wartości dla „env” może podnieść wartość „appenv”.

Naprawić:

var urlParamVal = function (name) {
    var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
    return result ? decodeURIComponent(result[2]) : "";
};
lasantha
źródło
-2

To może pomóc.

<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
źródło
1
Ten kod nie został dobrze przetestowany. Zgadnij, co się stanie z zapytaniem?twothrids=text
Lyth,