Як отримати значення рядка запиту в JavaScript?

Чи існує спосіб без плагінів отримати значення рядок запиту за допомогою jQuery (або без нього)?

Якщо так, то як? Якщо ні, то чи існує плагін, який може це зробити?

Brad Larson
Edited question 7-го квітня 2015 в 12:55
Програмування
plugins query-string javascript url
23-го травня 2009 в 8:10
20 погляди
Рішення

**Оновлення: вересень 2018 року

Ви можете використовувати URLSearchParams, який є простим і має пристойну (але не повну) підтримку браузерів.

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

Оригінал

Для цього вам не потрібен jQuery. Ви можете використовувати просто чистий JavaScript:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

Використання:

// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)


Примітка: Якщо параметр зустрічається кілька разів (?foo=lorem&foo=ipsum), ви отримаєте перше значення (lorem). Стандарту щодо цього не існує, і використання варіюється, див., наприклад, це питання: Авторитетна позиція дублікатів ключів HTTP GET запитів.
ПРИМІТКА: Функція чутлива до регістру. Якщо ви віддаєте перевагу нечутливому до регістру імені параметра, додайте модифікатор 'i' до RegExp.

Це оновлення, засноване на нових URLSearchParams специфікаціях для досягнення того ж результату більш лаконічно. Дивіться відповідь під назвою "URLSearchParams" нижче.

Martin Tournoij
Edited answer 6-го серпня 2019 в 7:12
Коментарі (52)

Roshambo на snipplr.com має простий скрипт для досягнення цього, описаний в Get URL Parameters with jQuery | Improved. За допомогою його скрипта ви також легко зможете витягнути саме ті параметри, які вам потрібні.

Ось суть:

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

Потім просто отримайте ваші параметри з рядка запиту.

Отже, якщо URL/рядок запиту був xyz.com/index.html?lang=de.

Просто викличте var langval = $.urlParam('lang');, і все готово.

У UZBEKJON є чудова стаття про це в блозі, Отримання параметрів URL та їх значень за допомогою jQuery.

Yahel
Edited answer 4-го лютого 2016 в 6:51
Коментарі (3)

Якщо ви використовуєте jQuery, ви можете скористатися бібліотекою, наприклад, jQuery BBQ: Back Button & Query Library.

...jQuery BBQ надає повноцінний метод .deparam() разом з управлінням хеш-станом, а також методами розбору фрагментів / рядка запиту і злиття утиліт.

Редагування: Додавання прикладу Deparam:

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }

            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();

            }
        };

Якщо ви хочете просто використовувати звичайний JavaScript, ви можете використовувати...

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

Через новий HTML History API, а саме history.pushState() та history.replaceState(), URL-адреса може змінитися, що призведе до недійсності кешу параметрів та їх значень.

Ця версія буде оновлювати свій внутрішній кеш параметрів при кожній зміні історії.

Ben Call
Edited answer 9-го жовтня 2014 в 4:13
Коментарі (0)