Czy ktoś zna dobry sposób na napisanie rozszerzenia jQuery do obsługi parametrów ciągu zapytania? Zasadniczo chcę rozszerzyć magiczną ($)funkcję jQuery, aby móc zrobić coś takiego:

$('?search').val(); 

Co dałoby mi „test” wartość w następującym adresem: http://www.example.com/index.php?search=test.

Widziałem wiele funkcji, które potrafią to zrobić w jQuery i Javascript, ale tak naprawdę chcę rozszerzyć jQuery, aby działało dokładnie tak, jak pokazano powyżej. Nie szukam wtyczki jQuery, szukam rozszerzenia do metody jQuery.

Po latach brzydkiego analizowania ciągów znaków jest lepszy sposób: URLSearchParams Przyjrzyjmy się, jak możemy użyć tego nowego interfejsu API do pobierania wartości z lokalizacji!

// Zakładając "? Post = 1234 & action = edit"

var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?

post=1234&action=edit&active=1"

UPDATE: IE nie jest obsługiwany

użyj tej funkcji z odpowiedzi poniżej zamiast URLSearchParams

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('action')); //edit

Po co rozszerzać jQuery? Jaka byłaby korzyść z rozszerzenia jQuery w porównaniu z posiadaniem funkcji globalnej?

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}

http://jsfiddle.net/gilly3/sgxcL/

Alternatywnym podejściem byłoby przeanalizowanie całego ciągu zapytania i zapisanie wartości w obiekcie do późniejszego wykorzystania. To podejście nie wymaga wyrażenia regularnego i rozszerza window.locationobiekt (ale równie łatwo można by użyć zmiennej globalnej):

location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    location.queryString[parts[0]] = parts[1] &&
        decodeURIComponent(parts[1].replace(/\+/g, " "));
});

http://jsfiddle.net/gilly3/YnCeu/

Ta wersja korzysta również z Array.forEach(), która jest natywnie niedostępna w IE7 i IE8. Można go dodać za pomocą implementacji w MDN lub $.each()zamiast tego można użyć jQuery .

Wtyczka JQuery jQuery-URL-Parser wykonuje to samo zadanie, na przykład w celu pobrania wartości parametru ciągu zapytania wyszukiwania , możesz użyć

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

Ta biblioteka nie jest aktywnie zarządzana. Jak sugeruje autor tej samej wtyczki, można użyć URI.js .

Możesz też zamiast tego użyć js-url . Jest dość podobny do tego poniżej.

Możesz więc uzyskać dostęp do parametrów zapytania, takich jak $.url('?search')

Znalazłem ten klejnot od naszych przyjaciół w SitePoint. https://www.sitepoint.com/url-parameters-jquery/ .

Korzystanie z PURE jQuery. Właśnie tego użyłem i zadziałało. Trochę to poprawiłem, na przykład sake.

//URL is http://www.example.com/mypage?ref=registration&[email protected]

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('ref')); //registration
console.log($.urlParam('email')); //[email protected]

Używaj, jak chcesz.

To nie jest mój przykładowy kod, ale używałem go w przeszłości.

//First Add this to extend jQuery

    $.extend({
      getUrlVars: function(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
        }
        return vars;
      },
      getUrlVar: function(name){
        return $.getUrlVars()[name];
      }
    });

    //Second call with this:
    // Get object of URL parameters
    var allVars = $.getUrlVars();

    // Getting URL var by its name
    var byName = $.getUrlVar('name');

Napisałem małą funkcję, w której wystarczy przeanalizować nazwę parametru zapytania. Więc jeśli masz:? Project = 12 & Mode = 200 & date = 2013-05-27 i chcesz parametr `` Mode '', musisz tylko przeanalizować nazwę `` Mode '' w funkcji:

function getParameterByName( name ){
    var regexS = "[\\?&]"+name+"=([^&#]*)", 
  regex = new RegExp( regexS ),
  results = regex.exec( window.location.search );
  if( results == null ){
    return "";
  } else{
    return decodeURIComponent(results[1].replace(/\+/g, " "));
  }
}

// example caller:
var result =  getParameterByName('Mode');

Opierając się na powyższej odpowiedzi @Rob Neild, oto czysta adaptacja JS, która zwraca prosty obiekt zdekodowanych parametrów ciągu zapytania (bez% 20 itd.).

function parseQueryString () {
  var parsedParameters = {},
    uriParameters = location.search.substr(1).split('&');

  for (var i = 0; i < uriParameters.length; i++) {
    var parameter = uriParameters[i].split('=');
    parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
  }

  return parsedParameters;
}

Napisane w Vanilla Javascript

     //Get URL
     var loc = window.location.href;
     console.log(loc);
     var index = loc.indexOf("?");
     console.log(loc.substr(index+1));
     var splitted = loc.substr(index+1).split('&');
     console.log(splitted);
     var paramObj = [];
     for(var i=0;i<splitted.length;i++){
         var params = splitted[i].split('=');
         var key = params[0];
         var value = params[1];
         var obj = {
             [key] : value
         };
         paramObj.push(obj);
         }
    console.log(paramObj);
    //Loop through paramObj to get all the params in query string.

function parseQueryString(queryString) {
    if (!queryString) {
        return false;
    }

    let queries = queryString.split("&"), params = {}, temp;

    for (let i = 0, l = queries.length; i < l; i++) {
        temp = queries[i].split('=');
        if (temp[1] !== '') {
            params[temp[0]] = temp[1];
        }
    }
    return params;
}

Używam tego.