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

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

Оновлення: вересень-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 " нижче.

Деякі з розміщених тут рішень неефективні. Повторний пошук регулярних виразів кожного разу, коли скрипт потребує доступу до параметра, зовсім непотрібний, достатньо однієї функції, щоб розділити параметри на об’єкт стилю асоціативного масиву. Якщо ви не працюєте з API API API 5, це потрібно лише раз на завантаження сторінки. Інші пропозиції тут також не вдається правильно декодувати URL-адресу.

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

Приклад запиту рядка:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

Результат:

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

Це можна легко покращити і для обробки рядків запитів у стилі масиву. Приклад цього є тут , але оскільки параметри стилю масиву не визначені в RFC 3986, я не забруднюю цю відповідь вихідним кодом.Для тих, хто цікавиться "забрудненою" версією, дивіться відповідь Кемпбельна нижче .

Також, як зазначалося в коментарях, ;це законний роздільник для key=valueпар. Для цього буде потрібно більш складне регулярний вираз для обробки ;або &, що я вважаю непотрібним , тому що це рідко ;використовується , і я б сказав , ще більш малоймовірно , що обидва вони будуть використовуватися. Якщо вам потрібно підтримати ;замість& , просто поміняйте їх у регулярний вираз.

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

Набагато простіше!

ОНОВЛЕНО

Новою можливістю є отримання повторних параметів наступним чином myparam=1&myparam=2. Немає конкретизації , однак більшість сучасних підходів слідкує за генерацією масиву.

myparam = ["1", "2"]

Отже, це такий підхід до управління ним:

let urlParams = {};
(window.onpopstate = function () {
    let match,
        pl = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) {
            return decodeURIComponent(s.replace(pl, " "));
        },
        query = window.location.search.substring(1);

    while (match = search.exec(query)) {
        if (decode(match[1]) in urlParams) {
            if (!Array.isArray(urlParams[decode(match[1])])) {
                urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
            }
            urlParams[decode(match[1])].push(decode(match[2]));
        } else {
            urlParams[decode(match[1])] = decode(match[2]);
        }
    }
})();

ES2015 (ES6)

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

Без jQuery

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

З такою URL-адресою ?topic=123&name=query+stringповернеться наступне:

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

Метод Google

Розірвавши код Google, я знайшов метод, який вони використовують: getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

Це затуманено, але це зрозуміло. Це не працює, оскільки деякі змінні не визначені.

Вони починають шукати параметри URL-адреси з, ?а також з хеша #. Потім для кожного параметра вони розбиваються на знак рівності b[f][p]("=")(як виглядає indexOf, вони використовують положення знака, щоб отримати ключ / значення). Розділивши їх, вони перевіряють, чи має параметр значення чи ні, якщо він має, то вони зберігають значенняd , інакше вони просто продовжують.

Зрештою об'єкт dповертається, обробляючи втечу та +знак. Цей об’єкт так само, як і мій, він має таку саму поведінку.

Мій метод як плагін jQuery

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

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

//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

Тест працездатності (метод розділення проти методу regex) ( jsPerf )

Код підготовки: декларація методів

Розділити код тесту

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

Тестовий код Regex

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Тестування в Firefox 4.0 x86 на Windows Server 2008 R2 / 7 x64

• Розщеплений метод : 144,780 ± 2,17% найшвидший
• Метод Регексу: 13,891 ± 0,85% | На 90% повільніше

Удосконалена версія відповіді Артема Баргера :

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

Для отримання додаткової інформації про вдосконалення див: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ та Chrome 49+ підтримують API URLSearchParams :

• Оголошення та деталі Chrome
• Оголошення опери та деталі
• Оголошення Firefox та деталі

Існує пропозиція google стабільних версій IE існує поліфіл, URLSearchParams .

Це не стандартизовано W3C , але це життєвий рівень WhatWG .

Ви можете використовувати його на location :

let params = new URLSearchParams(location.search);

або

let params = (new URL(location)).searchParams;

Або звичайно за будь-якою URL-адресою:

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

Ви також можете придбати парами за допомогою скорочення .searchParams властивість на об’єкт URL, наприклад:

let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 

Ви читаєте / встановлюєте параметри через get(KEY),set(KEY, VALUE) , append(KEY, VALUE)API. Ви також можете повторити всі значення for (let p of params) {}.

Еталонна реалізація і приклад сторінки доступні для аудиту і тестування.

Просто ще одна рекомендація. Плагін Purl дозволяє отримати всі частини URL-адреси, включаючи якір, хост і т.д.

Його можна використовувати з або без jQuery.

Використання дуже просте і класне:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

Однак станом на 11 листопада 2014 року Purl більше не підтримується, і автор рекомендує замість цього використовувати URI.js. Плагін jQuery відрізняється тим, що він фокусується на елементах - для використання з рядками просто використовуйте URIбезпосередньо, з або без jQuery. Подібний код виглядатиме як такий, більш повний документ тут :

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'

тл; д-р

Швидке, повне рішення , яке обробляє багатозначні клавіші та закодовані символи .

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

У чому весь цей код ...
" обнулення нуля" , оцінка короткого замикання
Завдання руйнування ES6 , функції стрілок , рядки шаблону

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"

Детальніше ... про рішення Vanilla JavaScript.

Для доступу до різних частин URL-адреси використовуйте location.(search|hash)

Найпростіше рішення (манекен)

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

• Правильно обробляє порожні клавіші .
• Переосмислює кілька клавіш із останнім знайденим значенням.

"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Багатозначні ключі

Проста перевірка ключа (item in dict) ? dict.item.push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})

• Тепер замість цього повертає масиви .
• Доступ до значень через qd.key[index]абоqd[key][index]

> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Зашифровані символи?

Використовуйте decodeURIComponent()для другого або обох розщеплень.

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]

З коментарів

* !!! Зверніть увагу, що це decodeURIComponent(undefined)повертає рядок "undefined". Рішення полягає в простому використанні &&, яке забезпечує, що decodeURIComponent()не викликаються невизначені значення. (Дивіться "повне рішення" вгорі.)

v = v && decodeURIComponent(v);

Якщо рядок запиту порожній ( location.search == ""), результат дещо оманливий qd == {"": undefined}. Пропонуємо перевірити рядок запитів перед запуском функції синтаксичного розбору:

if (location.search) location.search.substr(1).split("&").forEach(...)

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

Ось суть:

$.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 .

Якщо ви використовуєте 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;
    }

})();​

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

Ця версія оновлюватиме свій внутрішній кеш параметрів щоразу, коли історія змінюється.

Просто скористайтеся двома розділами :

function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

Я читав усі попередні та більш повні відповіді. Але я думаю, що це найпростіший і швидший метод. Ви можете перевірити цей тест jsPerf

Щоб вирішити проблему в коментарі Рупа, додайте умовний поділ, змінивши перший рядок на два нижче. Але абсолютна точність означає, що зараз вона повільніше, ніж у регулярному вираженні (див. JsPerf ).

function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

Тож якщо ви знаєте, що не зустрінетесь із зустрічною справою Рупа, це виграє. В іншому випадку regexp.

Або якщо у вас є контроль над рядком запитів і ви можете гарантувати, що значення, яке ви намагаєтеся отримати, ніколи не буде містити жодних символів, кодованих URL-адресою (наявність цих значень було б поганою ідеєю) - ви можете використовувати наступну трохи спрощену та зручнішу для читання версію 1-го варіанта:

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;

Ось мій підхід щодо створення чудового рішення Енді Е в повноцінному плагіні jQuery:

;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

Синтаксис:

var someVar = $.getQueryString('myParam');

Найкраще з обох світів!

Якщо ви робите більше маніпуляцій URL- адресами, ніж просто розбираєте рядок запитів , вам може бути корисний URI.js. Це бібліотека для маніпулювання URL-адресами - і поставляється зі всіма дзвіночками. (Вибачте за саморекламу тут)

конвертувати запит на карту:

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

(URI.js також «фіксує» погане querystrings подобається ?&foo&&bar=baz&в ?foo&bar=baz)

Мені подобається рішення Райана Фелана . Але я не бачу сенсу продовжувати jQuery для цього? Не використовується функція jQuery.

З іншого боку, мені подобається вбудована функція в Google Chrome: window.location.getParameter.

То чому б не використати це? Гаразд, інших браузерів немає. Тож давайте створимо цю функцію, якщо вона не існує:

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

Ця функція є більшою чи меншою мірою від Райана Фелана, але вона завершена по-різному: чітка назва та відсутність залежностей інших бібліотек javascript. Детальніше про цю функцію в моєму блозі .

Ось швидкий спосіб отримати об’єкт, схожий на масив PHP $ _GET :

function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

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

var $_GET = get_query();

Для рядка запиту x=5&y&z=hello&x=6це повертає об'єкт:

{
  x: "6",
  y: undefined,
  z: "hello"
}

Простий у простому коді JavaScript:

function qs(key) {
    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[key];
}

Зателефонуйте йому з будь-якого місця коду JavaScript:

var result = qs('someKey');

Це все чудові відповіді, але мені було потрібно щось трохи надійніше, і я вважав, що ви, можливо, хотіли б мати те, що я створив.

Це простий метод бібліотеки, який робить розсічення та маніпулювання параметрами URL. Статичний метод має такі під-методи, які можна викликати в темі URL:

• getHost
• getPath
• getHash
• setHash
• getParams
• getQuery
• setParam
• getParam
• hasParam
• RemoveParam

Приклад:

URLParser(url).getParam('myparam1')

var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}


document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');

document.write(url + '<br>');

// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');

// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');

// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');

// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');

// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');

// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');

Від MDN :

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));

Код гольфу:

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

Покажіть це!

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

На моєму Mac: test.htm?i=can&has=cheezburgerдисплеї

0:can
1:cheezburger
i:can
has:cheezburger

Я регулярно використовую регулярні вирази, але не для цього.

Мені здається, простіше і ефективніше прочитати рядок запиту один раз у моїй програмі та створити об’єкт з усіх пар ключів / значень, таких як:

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

Для такої URL-адреси http://domain.com?param1=val1&param2=val2ви можете отримати їх значення пізніше у коді як search.param1і search.param2.

function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3

Метод Roshambo jQuery не піклувався про декодування URL-адреси

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

Щойно додав цю можливість також під час додавання у виписку

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

Тепер ви можете знайти оновлений суть:

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

Мені подобається цей (взято з jquery-howto.blogspot.co.uk):

// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
    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;
}

Для мене чудово працює.

Ось моя редакція на цю чудову відповідь - з додатковою здатністю аналізувати рядки запитів за допомогою клавіш без значень.

var url = 'http://sb.com/reg/step1?param';
var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i) {
        var p=a[i].split('=', 2);
        if (p[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
        b[p[0]] = p[1];
    }
    return b;
})((url.split('?'))[1].split('&'));

ВАЖЛИВО! Параметр цієї функції в останньому рядку інший. Це лише приклад того, як можна передати довільну URL-адресу до нього. Ви можете використовувати останній рядок з відповіді Бруно для розбору поточної URL-адреси.

Отже, що саме змінилося? З URL-адресами http://sb.com/reg/step1?param=результати будуть однаковими. Але за допомогою URL-адреси http://sb.com/reg/step1?paramрішення Бруно повертає об'єкт без ключів, а мій повертає об'єкт з ключем paramі undefinedзначенням.

Мені потрібен об’єкт із рядка запиту, і я ненавиджу багато коду. Це може бути не найміцнішим у Всесвіті, але це лише кілька рядків коду.

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

URL-адреса на зразок this.htm?hello=world&foo=barстворить:

{hello:'world', foo:'bar'}

Ось розширена версія пов'язаної Енді Е "версії" Обробляти рядки запитів у стилі масиву ". Виправлена ​​помилка ( ?key=1&key[]=2&key[]=3; 1втрачається і замінюється на [2,3]), внесла кілька незначних поліпшень продуктивності (повторне декодування значень, перерахунок позиції "[" тощо) та додала ряд поліпшень (функціоналізована, підтримка ?key=1&key=2, підтримка ;роздільників) . Я залишив змінні дратівливо короткими, але додав коментарі вразливі, щоб зробити їх читабельними (о, і я повторно використовувавv у локальних функціях, вибачте, якщо це заплутано;).

Він буде обробляти наступні запити ...

? test = Hello & person = neek & person [] = jeff & person [] = jim & person [extra] = john & test3 & nocache = 1398914891264

... перетворення його в об'єкт, схожий на ...

{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}

Як ви бачите вище, ця версія обробляє деяку міру "неправильно сформованих" масивів, тобто - person=neek&person[]=jeff&person[]=jimабо person=neek&person=jeff&person=jimяк ключ ідентифікується та є дійсним (принаймні в імені dotNet NameValueCollection.Add ):

Якщо вказаний ключ вже існує в цільовому екземплярі NameValueCollection, вказане значення додається до існуючого розділеного комами списку значень у формі "value1, value2, value3".

Здається, що присяжні дещо перебувають на повторних клавішах, оскільки немає специфікації. У цьому випадку кілька клавіш зберігаються як (підроблений) масив. Але зауважте, що я не обробляю значення на основі коми в масиви.

Код:

getQueryStringKey = function(key) {
    return getQueryStringAsObject()[key];
};


getQueryStringAsObject = function() {
    var b, cv, e, k, ma, sk, v, r = {},
        d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
        q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
        s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g
    ;

    //# ma(make array) out of the v(alue)
    ma = function(v) {
        //# If the passed v(alue) hasn't been setup as an object
        if (typeof v != "object") {
            //# Grab the cv(current value) then setup the v(alue) as an object
            cv = v;
            v = {};
            v.length = 0;

            //# If there was a cv(current value), .push it into the new v(alue)'s array
            //#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
            if (cv) { Array.prototype.push.call(v, cv); }
        }
        return v;
    };

    //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
    while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
        //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) 
        b = e[1].indexOf("[");
        v = d(e[2]);

        //# As long as this is NOT a hash[]-style key-value e(ntry)
        if (b < 0) { //# b == "-1"
            //# d(ecode) the simple k(ey)
            k = d(e[1]);

            //# If the k(ey) already exists
            if (r[k]) {
                //# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
                r[k] = ma(r[k]);
                Array.prototype.push.call(r[k], v);
            }
            //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
            else {
                r[k] = v;
            }
        }
        //# Else we've got ourselves a hash[]-style key-value e(ntry) 
        else {
            //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
            k = d(e[1].slice(0, b));
            sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));

            //# ma(make array) out of the k(ey) 
            r[k] = ma(r[k]);

            //# If we have a sk(sub-key), plug the v(alue) into it
            if (sk) { r[k][sk] = v; }
            //# Else .push the v(alue) into the k(ey)'s array
            else { Array.prototype.push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};

Це функція, яку я створив назад, і я цілком задоволений. Це не враховує регістр - що зручно. Крім того, якщо запитуваного QS не існує, він просто повертає порожній рядок.

Я використовую стиснуту версію цього. Я публікую нестиснуті для початківців типів, щоб краще пояснити, що відбувається.

Я впевнений, що це можна оптимізувати або зробити по-іншому, щоб працювати швидше, але це завжди чудово працює для того, що мені потрібно.

Насолоджуйтесь.

function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}

Ми щойно випустили arg.js , проект, спрямований на вирішення цієї проблеми раз і назавжди. Традиційно це було так складно, але тепер ви можете зробити:

var name = Arg.get("name");

або отримання всієї партії:

var params = Arg.all();

і якщо ви дбаєте про різницю між ?query=trueі #hash=trueпісля цього ви можете використовувати Arg.query()і Arg.hash()методи.

Проблема з головною відповіддю на це питання полягає в тому, що параметри, які не підтримуються, розміщуються після #, але іноді потрібно також отримати це значення.

Я змінив відповідь, щоб дозволити їй також проаналізувати повний рядок запиту зі знаком хешу:

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

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

Ось як ви можете використовувати цю функцію, припускаючи, що URL-адреса є

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');

Якщо ви використовуєте Browserify, ви можете використовувати urlмодуль з Node.js :

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

Подальше читання: URL Node.js v0.12.2 Посібник та документація

РЕДАКТУВАННЯ: Ви можете використовувати URL- інтерфейс, досить широко прийнятий майже у новому браузері, і якщо код запускається на старому браузері, ви можете використовувати поліфайл, як цей . Ось приклад коду про те, як використовувати інтерфейс URL для отримання параметрів запиту (він же параметри пошуку)

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob'); 

Ви також можете використовувати URLSearchParams для цього, ось приклад з MDN, щоб зробити це з URLSearchParams:

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"