Получить значения URL параметров строки запроса с помощью jQuery / Javascript (querystring)


150

Кто-нибудь знает хороший способ написать расширение jQuery для обработки параметров строки запроса? Я в основном хочу расширить магическую ($)функцию jQuery, чтобы я мог сделать что-то вроде этого:

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

Что бы дать мне значение «тест» в следующем URL: http://www.example.com/index.php?search=test.

Я видел много функций, которые могут делать это в jQuery и Javascript, но на самом деле я хочу расширить jQuery для работы точно так, как показано выше. Я не ищу плагин jQuery, я ищу расширение для метода jQuery.



1
@NicoWesterdale - я прошел по этой ссылке, но не увидел ответов, которые бы решали этот конкретный вопрос. Он сказал, что хочет именно так, как указано выше.
Мртшерман

2
Я не думаю, что вы можете сделать это, передаваемая строка обрабатывается sizzler, а затем преобразуется в массив объектов DOM. Вы можете расширить средство сопоставления для предоставления пользовательских фильтров, но у вас не может быть объекта jquery, основанного на строке.
Андрей

6
Не $достаточно перегружен?
Квентин

1
@mrtsherman Посмотрите на функцию getParameterByName () в предоставленной мной ссылке. Нет, вы не можете сделать это прямо из командной строки $, но это не то, для чего нужны селекторы jQuery. Он просто выбирает часть строки URL, а не пытается получить доступ к части DOM, что делает $ (). Это совершенно другая вещь. Если вы действительно хотите использовать jQuery, вы можете написать плагин, который использует следующий синтаксис: $ .getParameterByName (param), ниже на этой странице, на которую я ссылаюсь, есть пример, который делает именно это. Вроде бессмысленно, хотя.
Нико Вестердейл

Ответы:


48

После многих лет уродливого анализа строк, есть лучший способ: URLSearchParams Давайте посмотрим, как мы можем использовать этот новый API для получения значений из местоположения!

// Предполагая, что "? 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"

ОБНОВЛЕНИЕ: IE не поддерживается

используйте эту функцию из ответа ниже вместо 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

1
URLSearchParams поддерживается всеми браузерами?
божественное

К сожалению! ооо человек, IE не поддерживается !! Я только что проверил на нем. Пока Chrome, FF, Safari не имеет проблем.
Саурин

1
@divine - здесь есть полизаполнение для URLSearchParams: github.com/WebReflection/url-search-params
Роберто

Если вы добавите polyfill для неподдерживаемых браузеров, это решение URLSearchParams будет работать хорошо. github.com/ungap/url-search-params
Louisvdw

104

Зачем расширять JQuery? Какая польза от расширения jQuery по сравнению с наличием глобальной функции?

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/

Альтернативный подход состоит в том, чтобы проанализировать всю строку запроса и сохранить значения в объекте для последующего использования. Этот подход не требует регулярного выражения и расширяет window.locationобъект (но может также легко использовать глобальную переменную):

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/

Эта версия также использует Array.forEach(), который изначально недоступен в IE7 и IE8. Его можно добавить, используя реализацию в MDN , или $.each()вместо этого можно использовать jQuery .


2
Это не часто, но допустимо использовать точки с запятой вместо амперсандов в параметрах запроса.
Muhd

@Muhd - «Допустимо» использовать любой понравившийся разделитель в строке запроса, если ваш код его понимает. Но при отправке формы поля формы представляются в виде name=valueпар, разделенных символом &. Если в вашем коде используется пользовательский формат строки запроса, очевидно, вам нужно написать собственный анализатор строки запроса, где бы ни использовалась строка запроса, будь то на сервере или на клиенте.
gilly3

2
@nick - Интересно. Но их предложение для HTTP-серверов трактовать точки с запятой как амперсанды только для того, чтобы сделать HTML красивее при использовании ссылки для имитации отправки формы. Это просто предложение и нестандартно. Стандартное GETпредставление формы закодировано как application/x-www-form-urlencodedсо значениями, разделенными &. Мой код обрабатывает этот стандарт. Пользовательские структуры URL, такие как та, которую вы связали, потребуют пользовательского анализатора на стороне сервера и на стороне клиента. В любом случае, добавление такой возможности в мой код выше было бы тривиальным.
gilly3

1
действительно, @gilly - если вы хотите переносимый код, вам нужно поддерживать оба
ник

1
Добавьте «i» в RegExp (), чтобы ключ мог быть нечувствительным к регистру: new RegExp ("[? &]" + Key + "= ([^ &] +) (& | $)", "i"));
Йовав

94

Плагин JQuery jQuery-URL-Parser выполняет ту же работу, например, чтобы получить значение параметра строки поискового запроса, вы можете использовать

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

Эта библиотека активно не поддерживается. Как полагает автор одного и того же плагина, вы можете использовать URI.js .

Или вместо этого вы можете использовать js-url . Это очень похоже на приведенный ниже.

Таким образом, вы можете получить доступ к параметру запроса, как $.url('?search')


2
Ницца. И код находится в свободном доступе, поэтому вам даже не нужно включать комментарии.
Muhd

4
Хорошее решение, но не сработает, если вы будете тестировать с помощью файла: //
kampsj

1
С чем это связано, @kampsj
RameshVel

3
Привет @kampsj, тестирование по file://протоколу приведет к тому, что больше не будет работать. Вы можете создать очень быстрый и простой статический HTML-сервер с помощью node.js. stackoverflow.com/questions/16333790/…
Джесс

2
Этот плагин больше не поддерживается, и сам автор предлагает вместо него использовать другие плагины.
JanErikGunnar

77

Нашел этот драгоценный камень от наших друзей в SitePoint. https://www.sitepoint.com/url-parameters-jquery/ .

Использование PURE JQuery. Я просто использовал это, и это сработало. Подправил это, например, ради.

//URL is http://www.example.com/mypage?ref=registration&email=bobo@example.com

$.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')); //bobo@example.com

Используй как хочешь.


Отлично. Спасибо! Я не думаю, что вам нужен последний закрывающий тег скобки, хотя.
Bhtabor

Ах, да, вы правы. Отредактировал пост. Это осталось от некоторых if в моем коде. Спасибо.
ClosDesign

1
Вы должны использовать window.location.search вместо .href - иначе хорошо.
BrainSlugs83

4
Вместо этого results[1] || 0вы должны выполнить if (results) {return results [1]} return 0; Параметры запроса bcoz могут вообще отсутствовать. И модификация будет обрабатывать все общие случаи.
myDoggyWritesCode

1
Что вы делаете, если у вас есть что-то подобное https://example.com/?c=Order+ID? Этот знак плюс все еще остается в этой функции.
Воломике

47

Это не мой пример кода, но я использовал его в прошлом.

//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');

2
Вы не должны делить на '=', технически нормально иметь второй знак равенства в значении любой пары ключ / значение. - Только первый знак равенства (с каждой парой ключ / значение), с которым вы сталкиваетесь, должен рассматриваться как разделитель. (Кроме того, знак равенства не требуется строго; возможно иметь ключ без значения.)
BrainSlugs83

Чистый раствор. Отлично сработало в моем случае.
Дж. Ф. Ганьон

$ .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 (' = '); var k = hash.shift (); vars.push (k); vars [k] = hash.join ("");} return vars;}, getUrlVar: function (name) {return $ .getUrlVars () [name];}});
Мупинк

15

Я написал небольшую функцию, где вам нужно только разобрать имя параметра запроса. Так что если у вас есть:? Project = 12 & Mode = 200 & date = 2013-05-27 и вам нужен параметр 'Mode', вам нужно только разобрать имя 'Mode' в функцию:

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

Если в вашем имени нет мусора, вы можете отбросить первое регулярное выражение, и имеет смысл начать с location.search
mplungjan

7

Основываясь на ответе @Rob Neild выше, здесь приведена чистая адаптация JS, которая возвращает простой объект с декодированными параметрами строки запроса (без% 20 и т. Д.).

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

Я не видел никаких ошибок с использованием этого кода. Какой браузер вы используете? Я проверил это на текущих Firefox, Chrome и Safari.

Да, извините, я прочитал это неправильно. Я думал, что видел, как это вызывало метод для чего-то, что возвращало undefined. Так что на самом деле он просто запускается один раз, когда это не нужно. Когда поиск есть "". И вы получите {"": "undefined"}
Jerinaw

Да. Это, вероятно, может использовать некоторые уточнения.

1

Написано в ванильном 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.

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

Я использую это.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.