Если вы используете jQuery, вы можете использовать библиотеку, такую ​​как jQuery BBQ: Back Button & amp; 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-адрес может быть изменен, что приведет к аннулированию кеша параметров и их значений.

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

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

Тест производительности (метод разделения по методу регулярного выражения) ( 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% медленнее

Это функция, которую я создал некоторое время назад, и я вполне доволен. Это не чувствительно к регистру - это удобно. Кроме того, если запрошенный QS не существует, он просто возвращает пустую строку.

Я использую сжатую версию этого.

Я уверен, что это может быть оптимизировано или сделано по-другому, чтобы работать быстрее, но это всегда отлично работает для того, что мне нужно.

g2]

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

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

Code golf:

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

Мне нравится этот (взятый из 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;
}

Отлично работает для меня.

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ и Chrome 49+ поддерживают API URLSearchParams :

• Объявление и информация о Chrome
• Объявление и информация о Opera
• Firefox Анонс и информация

Для стабильных версий IE существует предложенная google-версия URLSearchParams polyfill .

Она не стандартизирована W3C , но это живой стандарт WhatWG .

Вы можете использовать его по месту, но вам нужно удалить вопросительный знак ? (например, с помощью .slice(1)):

let params = new URLSearchParams(location.search.slice(1));

или

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

Или, конечно, по любому URL:

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

Вы можете получить параметры также с помощью сокращенного .searchParams на объекте URL, например:

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

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

Для аудита и тестирования доступны [reference] [] и образец страницы .

Некоторые из решений, размещенных здесь, неэффективны. Повторение поиска регулярного выражения каждый раз, когда сценарий должен получить доступ к параметру, совершенно не нужен, достаточно одной отдельной функции для разделения параметров в объект стиля ассоциативного массива. Если вы не работаете с API истории HTML 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]);
})();

Пример querystring:

?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 , я не буду загрязнять этот ответ исходным кодом. Для тех, кто интересуется «загрязненной» версией, посмотрите на ответ Campbeln ниже .

Также, как указано в комментариях, ; является законным разделителем для key=value пар. Для обработки ; или & потребуется более сложное регулярное выражение, которое, как мне кажется, не нужно, потому что редко используется ;, и я бы сказал, что еще более маловероятно, что оба будут использоваться. Если вам нужно поддерживать ; вместо &, просто замените их в регулярном выражении.

Если вы используете язык предварительной обработки на стороне сервера, вы можете использовать его собственные функции JSON для сделай тяжелый подъем для себя. Например, в PHP вы можете написать:

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

Гораздо проще!

tl; dr

Быстрое, полное решение, которое обрабатывает многозначные ключи и кодированные символы.

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]})

• Ручки пустые ключи правильно.
• Переопределяет несколько клавиш с найденным значением last .

"?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"]

Fro m comments

* !!! Обратите внимание, что decodeURIComponent(undefined) возвращает строку "undefined". Решение заключается в простом использовании && , который гарантирует, что decodeURIComponent() не вызывается для неопределенных значений. (см. «полное решение» вверху.)

v = v && decodeURIComponent(v);

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

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

Вот быстрый способ получить объект, похожий на массив 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"
}

Вот мое редактирование этого отличного ответа - с добавленной способностью синтаксического анализа строк запроса с ключами без значений.

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 решение Bruno возвращает объект без ключей, а мой возвращает объект с ключом 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'}

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