Отримати значення URL-параметрів рядка запиту за допомогою jQuery / Javascript (querystring)


149

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

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

Для того щоб подати мені значення «тест» в наступному URL: http://www.example.com/index.php?search=test.

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


4
На запитання та відповідь: stackoverflow.com/questions/901115/…
Ніко Вестердейл

1
@NicoWesterdale - я перейшов за цим посиланням, але не побачив відповідей, які вирішили б це питання. Він сказав, що хоче саме так, як вище.
mrtsherman

2
Я не думаю, що ти можеш це зробити, рядок, переданий в, отримує аналіз Sizzler, а потім вирішується на масив об'єктів DOM. Ви можете розширити відповідник, щоб забезпечити власні фільтри, але ви не можете мати об'єкт jquery на основі рядка.
Андрій

6
Не $достатньо перевантажений?
Квентін

1
@mrtsherman Подивіться на функцію getParameterByName () за посиланням, яке я надав. Ні, ви не можете зробити це безпосередньо з підказки $, але для цього не вибрані селектори jQuery. Він просто вибирає частину рядка URL-адреси, не намагаючись отримати доступ до частини DOM, що робить $ (). Це зовсім інша річ. Якщо ви дійсно хотіли використовувати jQuery, ви можете написати плагін, який використовував цей синтаксис: $ .getParameterByName (парам), на цій сторінці, на якій я пов’язаний, є саме такий приклад. Щось безглуздо, хоча.
Ніко Вестердейл

Відповіді:


46

Після років некрасивого розбору рядків є кращий спосіб: 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
чи підтримуються URL-пошукові параметри всіма браузерами?
божественний

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

1
@divine - Тут є полісистема для URLSearchParams: github.com/WebReflection/url-search-params
Роберто

Якщо ви додасте полізаповнення для непідтримуваних веб-переглядачів, це рішення 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(), яка є недоступною в ІЕ7 та 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 (), щоб ключ міг бути нечутливим до регістру: новий 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

Ага так, ви маєте рацію. Редагував публікацію. Це було залишено у деяких, якщо заява в моєму коді. Дякую.
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

Чистий розчин. В моєму випадку прекрасно працював.
JF

$ .extend ({getUrlVars: function () {var vars = [], хеш; вар хеши = window.location.href.slice (window.location.href.indexOf ('?') + 1) .split ('& '); для (var i = 0; i <hashes.length; i ++) {hash = хеші [i] .split (' = '); var k = hash.shift (); vars.push (k); vars [k] = hash.join ("");} return vars;}, getUrlVar: function (name) {return $ .getUrlVars () [ім'я];}});
Мупінц

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"}
Джеріна

Так. Можливо, це могло б використати певну рафінування.

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.