Как я могу получить значения строки запроса в JavaScript?

avatar
Ripounet
23 мая 2009 в 08:10
4304635
73
2695

Есть ли способ получения значений строки запроса без подключаемых модулей через jQuery (или без него)?

Если да, то как? Если нет, то есть ли плагин, который может это сделать?

Источник
coma
23 мая 2009 в 08:19
0

Я использую плагин getUrlParam , описанный в jQuery-Plugin - getUrlParam (версия 2) .

hurrymaplelad
7 октября 2011 в 08:42
0

Мне нравится dojo queryToObject. Если вы соблюдаете диету, эту функцию можно легко вытащить из фреймворка.

Lorenzo Polidori
29 октября 2012 в 14:50
69

простое решение javascript без RegEx: css-tricks.com/snippets/javascript/get-url-variables

Joseph Myers
14 мая 2013 в 06:00
6

Хотя главное решение вопроса заслуживает своей популярности из-за его превосходного наблюдения, что jQuery не нужен, его метод создания новых регулярных выражений и повторного анализа строки запроса для каждого желаемого параметра крайне неэффективен. Уже давно существуют гораздо более эффективные (и универсальные) решения, например, в этой статье, перепечатанной здесь: htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/…

user456814
31 июля 2013 в 23:09
1

возможный дубликат строки запроса JavaScript

Qwerty
16 января 2014 в 03:22
0

Я добавил однострочное решение с использованием vanilla javascript coderhelper.com/a/21152762/985454 Обязательно ознакомьтесь с ним!

Vladimir Kornea
30 мая 2014 в 01:12
4

Джозеф, «отличное наблюдение, что jQuery не нужен»? Конечно, в этом нет необходимости. Все, что делает jQuery, он делает с помощью JavaScript. Люди не используют jQuery, потому что он делает то, чего JavaScript не может. Суть jQuery - удобство.

huocp
8 июля 2014 в 05:13
0

вот плагин jQuery, который я использую, github.com/huochunpeng/jquery-urlparam

Ответы (73)

avatar
Code Spy
26 июля 2021 в 16:57
9135

Обновление: июнь 2021 г.

Для конкретного случая, когда вам нужны все параметры запроса:

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

Обновление: сентябрь 2018 г.

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

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

Оригинал

Для этого вам не нужен jQuery. Вы можете использовать только чистый JavaScript:

function getParameterByName(name, 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

ПРИМЕЧАНИЕ. Если вы получаете сообщение об ошибке eslint «Бесполезный выход», вы можете заменить name = name.replace(/[\[\]]/g, '\\$&'); на name = name.replace(/[[\]]/g, '\\$&').


Это обновление основано на новых спецификациях URLSearchParams для достижения того же результата более лаконично. См. Ответ под названием «URLSearchParams» ниже.

myjobistobehappy
3 января 2021 в 01:18
1

Для всех новичков, которым это нравится, но в объектной форме, используйте Object.fromEntries([...new URLSearchParams(location.search)])

gmsi
6 января 2021 в 21:16
0

К вашему сведению - это чувствительно к регистру. Не работает, когда getParameterByName ('Foo') вместо getParameterByName ('foo')

Tudor Morar
4 марта 2021 в 15:37
0

Ответ @myjobistobehappy должен быть принятым

STEN
26 мая 2021 в 01:14
0

@myjobistobehappy Или Object.fromEntries(new URLSearchParams(location.search).entries())

David Spector
26 июня 2021 в 15:18
0

window.location не устанавливается должным образом, если файл JavaScript включен в HTML с помощью тега SCRIPT. При таком подходе теряются любые аргументы.

avatar
IT ppl
2 января 2021 в 20:10
23

Этот отлично работает. Регулярные выражения в некоторых других ответах приводят к ненужным накладным расходам.

function getQuerystring(key) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == key) {
            return pair[1];
        }
    }
}

взято из здесь

Rup
24 мая 2012 в 08:44
3

Вы, вероятно, по крайней мере захотите позвонить decodeUriComponent на pair[1], прежде чем вернуть его, если не замените сначала плюсы пробелами, как и во всех других решениях здесь. Некоторые другие решения также предпочитают ограничение в 2 части для разделения =, чтобы быть более мягким при приеме ввода.

IT ppl
24 мая 2012 в 09:22
1

@Rup, ты прав ... на самом деле в моем коде это всегда будет число, а не какие-либо специальные символы, поэтому пропущено ...

Roc Boronat
25 ноября 2019 в 01:51
0

Спасибо за это! Это единственный метод, поддерживаемый экспериментальным браузером Kindle. Уродливый проект здесь! : ·)

avatar
Paul Sweatte
5 декабря 2020 в 09:52
639

URLSearchParams

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

Существует предложенный Google полифилл URLSearchParams для стабильных версий IE.

Это не стандартизировано W3C, но это уровень жизни по WhatWG.

Вы можете использовать его на location:

const params = new URLSearchParams(location.search);

или

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

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

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

Параметры также можно получить, используя сокращенное свойство .searchParams в объекте URL, например:

const 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) {}.

эталонная реализация и пример страницы доступны для аудита и тестирования.

avatar
Seth Holladay
14 сентября 2020 в 08:14
2

Надежно сделать это сложнее, чем может показаться на первый взгляд.

  1. location.search, который используется в других ответах, является хрупким, и его следует избегать - например, он возвращает пустое значение, если кто-то ошибается и помещает идентификатор #fragment перед строкой ?query.
  2. Существует несколько способов автоматического экранирования URL-адресов в браузере, что, на мой взгляд, делает decodeURIComponent в значительной степени обязательным.
  3. Многие строки запроса генерируются из пользовательского ввода, что означает, что предположения о содержании URL-адреса очень плохие. Включая такие простые вещи, как то, что каждый ключ уникален или даже имеет значение.

Чтобы решить эту проблему, вот настраиваемый API со здоровой дозой защитного программирования. Обратите внимание, что его можно сделать вдвое меньше, если вы хотите жестко запрограммировать некоторые переменные или если входные данные никогда не могут включать hasOwnProperty и т. Д.

Версия 1: Возвращает объект данных с именами и значениями для каждого параметра. Он эффективно дедуплицирует их и всегда учитывает первое, найденное слева направо.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
        url = location.href; // more robust than location.search, which is flaky
    }
    if (!paramKey || typeof paramKey !== 'string') {
        paramKey = '&';
    }
    if (!pairKey || typeof pairKey !== 'string') {
        pairKey = '=';
    }
    // when you do not explicitly tell the API...
    if (arguments.length < 5) {
        // it will unescape parameter keys and values by default...
        decode = true;
    }

    queryStart = url.indexOf('?');
    if (queryStart >= 0) {
        // grab everything after the very first ? question mark...
        query = url.substring(queryStart + 1);
    } else {
        // assume the input is already parameter data...
        query = url;
    }
    // remove fragment identifiers...
    fragStart = query.indexOf('#');
    if (fragStart >= 0) {
        // remove everything after the first # hash mark...
        query = query.substring(0, fragStart);
    }
    // make sure at this point we have enough material to do something useful...
    if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
        // we no longer need the whole query, so get the parameters...
        query = query.split(paramKey);
        result = {};
        // loop through the parameters...
        for (i = 0, len = query.length; i < len; i = i + 1) {
            pairKeyStart = query[i].indexOf(pairKey);
            if (pairKeyStart >= 0) {
                name = query[i].substring(0, pairKeyStart);
            } else {
                name = query[i];
            }
            // only continue for non-empty names that we have not seen before...
            if (name && !Object.prototype.hasOwnProperty.call(result, name)) {
                if (decode) {
                    // unescape characters with special meaning like ? and #
                    name = decodeURIComponent(name);
                }
                if (pairKeyStart >= 0) {
                    value = query[i].substring(pairKeyStart + 1);
                    if (value) {
                        if (decode) {
                            value = decodeURIComponent(value);
                        }
                    } else {
                        value = missingValue;
                    }
                } else {
                    value = missingValue;
                }
                result[name] = value;
            }
        }
        return result;
    }
}

Версия 2: Возвращает объект карты данных с двумя массивами одинаковой длины, один для имен и один для значений, с индексом для каждого параметра. Этот поддерживает повторяющиеся имена и намеренно не дедуплицирует их, потому что, вероятно, именно поэтому вы захотите использовать этот формат.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
          url = location.href; // more robust than location.search, which is flaky
    }
        if (!paramKey || typeof paramKey !== 'string') {
            paramKey = '&';
        }
        if (!pairKey || typeof pairKey !== 'string') {
            pairKey = '=';
        }
        // when you do not explicitly tell the API...
        if (arguments.length < 5) {
            // it will unescape parameter keys and values by default...
            decode = true;
        }

        queryStart = url.indexOf('?');
        if (queryStart >= 0) {
            // grab everything after the very first ? question mark...
            query = url.substring(queryStart + 1);
        } else {
            // assume the input is already parameter data...
            query = url;
        }
        // remove fragment identifiers...
        fragStart = query.indexOf('#');
        if (fragStart >= 0) {
            // remove everything after the first # hash mark...
            query = query.substring(0, fragStart);
        }
        // make sure at this point we have enough material to do something useful...
        if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
            // we no longer need the whole query, so get the parameters...
            query = query.split(paramKey);
            result = {
                names: [],
                values: []
            };
            // loop through the parameters...
            for (i = 0, len = query.length; i < len; i = i + 1) {
                pairKeyStart = query[i].indexOf(pairKey);
                if (pairKeyStart >= 0) {
                    name = query[i].substring(0, pairKeyStart);
                } else {
                    name = query[i];
                }
                // only continue for non-empty names...
                if (name) {
                    if (decode) {
                        // unescape characters with special meaning like ? and #
                        name = decodeURIComponent(name);
                    }
                    if (pairKeyStart >= 0) {
                        value = query[i].substring(pairKeyStart + 1);
                        if (value) {
                            if (decode) {
                                value = decodeURIComponent(value);
                            }
                        } else {
                            value = missingValue;
                        }
                    } else {
                        value = missingValue;
                    }
                    result.names.push(name);
                    result.values.push(value);
                }
           }
           return result;
       }
   }
Rup
17 января 2014 в 10:01
2

Аккуратно, хотя большинство ответов здесь связаны с разделением части запроса на параметры, а не с извлечением ее из произвольного URL-адреса. Большинство из них предполагают, что мы находимся на текущей странице, поэтому просто используйте location.search, чтобы получить извлекаемую строку.

Donatello
18 сентября 2014 в 15:21
0

вопрос не в этом, нам нужно извлечь каждую пару параметров запроса как ключ / значение, вспомогательные массивы, пустые значения и т. д. кстати, «? hello # haha» - не очень хорошее поведение, так как #haha обычно относится к привязке, которая не входит в параметр "hello".

Seth Holladay
11 октября 2014 в 03:02
1

Я воспринял очень короткий и расплывчатый вопрос как нечто совершенно иное, чем то, что делали все остальные. Теперь мне очевидно, что имелось в виду, и я обновил свой ответ, включив в него значительно лучший дизайн, который находится на одном уровне.

avatar
BrunoLM
20 июня 2020 в 09:12
1303

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% самый быстрый
  • Метод Regex : 13 891 ± 0,85% | На 90% медленнее
avatar
Andy E
29 марта 2020 в 19:20
1754

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

Пример строки запроса:

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


Если вы используете язык предварительной обработки на стороне сервера, вы можете использовать его собственные функции JSON, чтобы сделать за вас тяжелую работу. Например, в PHP вы можете написать:
<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]);
        }
    }
})();
Vetrivel PS
2 февраля 2021 в 13:54
0

Это работало как Charm для получения действующего URL-адреса при загрузке страницы каждый раз :-)

mihca
7 июля 2021 в 06:30
0

Очень хорошо! Однако я предлагаю ввести локальные переменные let parameterKey = decode(match[1]); let parameterValue = decode(match[2]);. Это делает более очевидным происходящее ИМХО.

avatar
Anatoly Mironov
10 апреля 2019 в 18:44
65

Мне нравится решение Райана Фелана. Но я не вижу смысла расширять для этого 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. Подробнее об этой функции в моем блоге.

avatar
Eneko Alonso
18 января 2019 в 10:59
17

Я бы предпочел использовать split() вместо Regex для этой операции:

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}
dogonaroof
8 февраля 2019 в 11:51
0

Я не хотел использовать Regex и пошел с этим решением. Я считаю, что это работает довольно хорошо. Спасибо!

avatar
nkh
1 января 2019 в 20:41
27

Если вы используете 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"
andrezsanchez
12 сентября 2014 в 18:23
0

Документация для API модуля url находится здесь: nodejs.org/api/url.html

Andrew Grothe
13 июля 2015 в 23:22
0

Это хорошо для разработки nw.js. Browserify даже не нужен, поскольку большинство узловых модулей работают как в окне nw.js. Я протестировал этот код и работает как шарм без каких-либо модификаций.

Baran Emre
17 июля 2019 в 09:27
0

ОХХ, это потрясающе! URLSearchParams работает отлично. Большое спасибо!

TheWhiteLlama
29 сентября 2019 в 21:46
1

вероятно, должен быть лучшим, без проблем с пользовательскими функциями и дополнительными библиотеками. Похоже, что он в основном используется браузерами 2019 года.

avatar
Martin Borthiry
26 октября 2017 в 03:58
102

Просто используйте два разделения :

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

Я читал все предыдущие и более полные ответы. Но я считаю, что это самый простой и быстрый способ. Вы можете проверить это jsPerf benchmark

Чтобы решить проблему в комментарии Рупа, добавьте условное разбиение, заменив первую строку двумя приведенными ниже. Но абсолютная точность означает, что теперь он медленнее, чем регулярное выражение (см. 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;
}

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

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

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
avatar
Campbeln
27 июля 2017 в 13:37
34

Вот расширенная версия связанной Энди Е версии "Обработка строк запроса в стиле массива". Исправлена ​​ошибка (?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, поскольку ключ является идентифицируемым и действительным (по крайней мере, в NameValueCollection в dotNet.Add ):

Если указанный ключ уже существует в целевой коллекции NameValueCollection например, указанное значение добавляется к существующим разделенным запятыми список значений в виде «значение1, значение2, значение3».

Похоже, жюри несколько не так, по повторяющимся клавишам, поскольку спецификации нет. В этом случае несколько ключей хранятся как (поддельный) массив. Но учтите, что я не обрабатываю значения на основе запятых в массивы.

Код:

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;
};
Mike Clark
3 февраля 2015 в 10:10
0

Для получения значений строки запроса вы можете использовать эту функцию «GetParameterValues». Здесь вам просто нужно передать имя параметра запроса, и он вернет вам значение $ (document) .ready (function () {var bid = GetParameterValues ​​('token');}); функция GetParameterValues ​​(параметр) {var url = decodeURIComponent (window.location.href); url = url.slice (url.indexOf ('?') + 1) .split ('&'); для (var i = 0; i <url.length; i ++) {var urlparam = url [i] .split ('='); если (urlparam [0] == param) {вернуть urlparam [1]; }}

Vladislav Dimitrov
27 июля 2017 в 08:36
1

Я использую это уже некоторое время, и до сих пор это было здорово. За исключением обработки массивов urlencoded. Использование q = decodeURIComponent(window.location.search.substring(1)), тоже помогает в этом.

kofifus
16 декабря 2020 в 21:13
0

для меня это продолжалось в бесконечном цикле, если не было параметров запроса :(

avatar
Qwerty
12 июля 2017 в 08:29
250

tl;dr

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

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(...)

avatar
James
23 мая 2017 в 12:10
671

Улучшенная версия Ответ Артема Баргера:

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/

Tadeo
28 мая 2021 в 17:00
0

Как я могу расширить эту функцию для обработки параметра без значения, например https://www.somedomain.com/?staging?

avatar
mynameistechno
23 мая 2017 в 11:47
5

Я взял этот ответ и добавил поддержку необязательной передачи URL-адреса в качестве параметра; возвращается к window.location.search. Очевидно, это полезно для получения параметров строки запроса из URL-адресов, которые не являются текущей страницей:

(function($, undef) {
  $.QueryString = function(url) {
    var pairs, qs = null, index, map = {};
    if(url == undef){
      qs = window.location.search.substr(1);
    }else{
      index = url.indexOf('?');
      if(index == -1) return {};
      qs = url.substring(index+1);
    }
    pairs = qs.split('&');
    if (pairs == "") return {};
    for (var i = 0; i < pairs.length; ++i)
    {
      var p = pairs[i].split('=');
      if(p.length != 2) continue;
      map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return map;
  };
})(jQuery);
avatar
skaurus
23 мая 2017 в 10:31
37

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

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.

avatar
Roi
14 декабря 2016 в 21:38
18

Очень легкий метод jQuery:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

И для предупреждения, например? Q

alert(request.q)
Rup
2 апреля 2013 в 08:48
2

Аккуратный. Уже есть несколько ответов в том же духе - итерация по разделению - хотя ни один из них не использует каждый из jQuery, и я тоже не думаю, что какой-либо из них идеален. Я не понимаю return в вашем закрытии, и я думаю, вам нужно decodeUriComponent два значения pair[], когда вы их читаете.

Roi
13 мая 2013 в 20:55
0

да, наличие decodeUriComponent - это лучшая практика, я просто как бы написал это на лету. Что касается возврата ... я просто сохраняю привычку что-то возвращать. совершенно не обязательно

avatar
Martijn Pieters
15 августа 2016 в 05:52
18

Вот моя версия кода синтаксического анализа строки запроса на GitHub.

Он "снабжен префиксом" jquery. *, Но сама функция синтаксического анализа не использует jQuery. Это довольно быстро, но все же возможно несколько простых оптимизаций производительности.

Также он поддерживает кодировку списков и хэш-таблиц в URL, например:

arr[]=10&arr[]=20&arr[]=100

или

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i<a.length; i++) {
        var p = a[i].indexOf('=')
        if (p < 0) {
            obj[a[i]] = ''
            continue
        }
        var k = decodeURIComponent(a[i].substr(0,p)),
            v = decodeURIComponent(a[i].substr(p+1))

        var bps = k.indexOf('[')
        if (bps < 0) {
            obj[k] = v
            continue;
        } 

        var bpe = k.substr(bps+1).indexOf(']')
        if (bpe < 0) {
            obj[k] = v
            continue;
        }

        var bpv = k.substr(bps+1, bps+bpe-1)
        var k = k.substr(0,bps)
        if (bpv.length <= 0) {
            if (typeof(obj[k]) != 'object') obj[k] = []
            obj[k].push(v)
        } else {
            if (typeof(obj[k]) != 'object') obj[k] = {}
            obj[k][bpv] = v
        }
    }
    return obj;

}
brauliobo
19 сентября 2019 в 18:11
0

приятно но не касается дела filters[topic][]=list

Abhinav Gupta
23 декабря 2020 в 11:46
0

Эй, как использовать приведенный выше код для получения значения по ключу ?? Я хочу получить значения городов по этому URL-адресу ... abc.xyzl / urlpart1 /…

avatar
12 августа 2016 в 18:46
8

Попробуйте это:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

Тогда назовите его так:

if(location.search != "") location.search.getValueByKey("id");

Вы можете использовать это для файлов cookie также:

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

Это работает только для строк с key=value[&|;|$] ... не будет работать с объектами / массивами.

Если вы не хотите использовать String.prototype ... переместите его в функцию и передайте строку в качестве аргумента

avatar
12 августа 2016 в 18:46
7

Я использовал этот код (JavaScript), чтобы получить то, что передается через URL:

function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
            return vars;
        }

Затем, чтобы присвоить значение переменной, вам нужно только указать, какой параметр вы хотите получить, т.е. если URL-адрес example.com/?I=1&p=2&f=3

Вы можете сделать это, чтобы получить значения:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

тогда значения будут:

getI = 1, getP = 2 and getF = 3
Rup
8 сентября 2013 в 22:40
1

Это удобно, хотя в ключе и значении отсутствует decodeURIComponent, и вам, вероятно, не нужен флаг i в регулярном выражении (не то чтобы это действительно важно).

JoshYates1980
7 июня 2017 в 19:02
1

но что, если у вас есть example.com/3 (маршрутизация MVC)

avatar
Anoop
12 августа 2016 в 18:46
8

Следующий код создаст объект, который имеет два метода:

  1. isKeyExist: Проверить, существует ли конкретный параметр
  2. getValue: получить значение определенного параметра.

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};
avatar
Ankit_Shah55
12 августа 2016 в 18:45
4

Это очень простой метод получения значения параметра (строки запроса)

Используйте функцию gV(para_name), чтобы получить ее значение

var a=window.location.search;
a=a.replace(a.charAt(0),""); //Removes '?'
a=a.split("&");

function gV(x){
 for(i=0;i<a.length;i++){
  var b=a[i].substr(0,a[i].indexOf("="));
  if(x==b){
   return a[i].substr(a[i].indexOf("=")+1,a[i].length)}
avatar
Robert Bolton
12 августа 2016 в 18:45
4

Если вы не хотите использовать библиотеку JavaScript, вы можете использовать строковые функции JavaScript для анализа window.location. Сохраните этот код во внешнем файле .js, и вы сможете использовать его снова и снова в разных проектах.

// Example - window.location = "index.htm?name=bob";

var value = getParameterValue("name");

alert("name = " + value);

function getParameterValue(param)
{
    var url = window.location;
    var parts = url.split('?');
    var params = parts[1].split('&');
    var val = "";

    for ( var i=0; i<params.length; i++)
    {
        var paramNameVal = params[i].split('=');

        if ( paramNameVal[0] == param )
        {
            val = paramNameVal[1];
        }
    }
    return val;
}
avatar
farnoush resa
12 августа 2016 в 18:45
3

Я рекомендую Dar Lessons как хороший плагин. Я работал с ним долгое время. Вы также можете использовать следующий код. Просто поместите var queryObj = {}; перед document.ready и поместите приведенный ниже код в начало document.ready. После этого кода вы можете использовать queryObj["queryObjectName"] для любого объекта запроса, у вас есть

var querystring = location.search.replace('?', '').split('&');
for (var i = 0; i < querystring.length; i++) {
    var name = querystring[i].split('=')[0];
    var value = querystring[i].split('=')[1];
    queryObj[name] = value;
}
Rup
15 июля 2013 в 10:37
0

Две затычки для Dar Lessons в двух постах? Я не думаю, что мы можем рекомендовать по крайней мере текущую версию: она уязвима для атак путем внедрения сценария. (Я отправил ему электронное письмо, чтобы сообщить ему). Как и во многих решениях split('='), здесь уже отсутствует decodeURIComponent, и вы также можете более изящно обрабатывать отсутствующие значения.

Rup
17 июля 2013 в 08:31
0

Dar Lessons выпустила версию 1.1, в которой исправлена ​​атака с помощью внедрения сценария.

avatar
krisrak
12 августа 2016 в 18:44
2

Вот String реализация прототипа:

String.prototype.getParam = function( str ){
    str = str.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp( "[\\?&]*"+str+"=([^&#]*)" );    
    var results = regex.exec( this );
    if( results == null ){
        return "";
    } else {
        return results[1];
    }
}

Пример звонка:

var status = str.getParam("status")

str может быть строкой запроса или URL

Rup
19 апреля 2014 в 12:33
0

Это в основном то же самое, что и верхний ответ, за исключением некоторой части неэкранирования, просто добавьте String.prototype.

krisrak
19 апреля 2014 в 15:44
0

@Rup Это полезно для анализа любого строкового запроса, а не только в URL. например, Oauth2 возвращает ответ токена в виде строки запроса, этот прототип String будет полезен для синтаксического анализа, наиболее важным является [\\?&]* вместо [\\?&] в RegExp, для синтаксического анализа строки запроса, начинающейся с новой строки

avatar
Dorian
12 августа 2016 в 18:44
2

Это не сработало для меня, я хочу сопоставить ?b, поскольку присутствует параметр b, а не соответствовать ?return как параметр r, вот мое решение .

window.query_param = function(name) {
  var param_value, params;

  params = location.search.replace(/^\?/, '');
  params = _.map(params.split('&'), function(s) {
    return s.split('=');
  });

  param_value = _.select(params, function(s) {
    return s.first === name;
  })[0];

  if (param_value) {
    return decodeURIComponent(param_value[1] || '');
  } else {
    return null;
  }
};
Rup
13 февраля 2014 в 16:07
0

Какой ответ здесь не сработал с этими проблемами? (Это стоило бы прокомментировать сам ответ, и мне тоже было бы интересно узнать.) Что касается вашего решения, похоже, что это просто решение с разделением строк с использованием underscore.js? Возможно, вам не хватает звонка на номер decodeURIComponent.

Dorian
13 февраля 2014 в 17:12
0

Хорошая уловка, я добавил decodeURIComponent (и спецификацию для него). Ответ, получивший наибольшее количество голосов (2600 баллов за jolly), работает не так, как ожидалось: не возвращает null для ненайденных параметров и не обнаруживает ?b, например, существующий параметр.

avatar
Vladimir Kornea
25 июля 2016 в 22:19
13

Вот что я использую:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: http://coderhelper.com/a/23946023/2407309
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

Возвращение «override» вместо «0» в последнем случае делает его совместимым с PHP. Работает в IE7.

Rup
2 июня 2014 в 07:22
1

Это потому, что у всех, похоже, разные требования к работе с ключами без значений или к работе с дублированными ключами путем построения массивов значений и т. Д. Уже существует множество разделенных ответов, но я не вижу ни одного, которое бы выполняло то же самое, что и этот, правда. (FWIW, я думаю, что paramName должен быть decodeURIComponent слишком технически, хотя я сомневаюсь, что кто-то будет использовать нетривиальные параметры.)

Vladimir Kornea
18 ноября 2014 в 11:43
1

Имена параметров никогда не нуждаются в декодировании.

Rup
18 ноября 2014 в 12:09
2

Почему бы нет? HTML 5 не ограничивает набор символов для имен элементов управления вводом, и нет никакой гарантии, что они все равно исходят из HTML. Я не понимаю, почему должно быть ограничение на печатные символы.

Vladimir Kornea
1 апреля 2015 в 12:04
2

@Sudar Потому что нет причин их иметь. Большинство людей всегда включают их только потому, что они всегда видели, как их включают другие люди, и потому, что они требуются для других языков; часто они также ошибочно считаются необходимыми в JavaScript, что иногда вызывает затруднения. Делать что-то без причины обычно вводит в заблуждение; JavaScript - это не C ++ или PHP. Найдите defensive semicolon.

NiCk Newman
13 июля 2015 в 16:14
8

«Удивительно, сколько здесь размещено слишком сложных и неполных решений» Лол, ирония ...

avatar
sagivo
24 июля 2016 в 14:22
58

Упростите простой код 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');
avatar
Mic
24 июля 2016 в 14:17
41

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

Мне кажется проще и эффективнее прочитать строку запроса один раз в моем приложении и построить объект из всех пар ключ / значение, например:

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.

avatar
acjay
24 июля 2016 в 14:11
5

Если у вас есть Underscore.js или lodash, быстрый и грязный способ сделать это:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
Rup
20 ноября 2013 в 15:32
0

Аккуратный. По сравнению с верхним ответом на основе разделения, хотя вам не хватает обработки + s и вызовов decodeURIComponent, но для простых значений этого будет достаточно.

acjay
21 ноября 2013 в 06:18
0

Да, это действительно просто для получения простых буквенно-цифровых токенов. В текущем проекте это все, что мне было нужно, так что громоздкую функцию мне не хотелось.

David Fregoli
7 января 2014 в 14:46
1

это то, что я использую для создания объекта ключевого значения параметров запроса: _.chain(document.location.search.slice(1).split('&')).invoke('split', '=').object().value()

avatar
Pushkraj
24 июля 2016 в 14:10
3

Использование:

  $(document).ready(function () {
      var urlParams = {};
      (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);

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

Пожалуйста, проверьте и дайте мне знать ваши комментарии. Также см. Как получить значение строки запроса с помощью jQuery .

Rup
23 июля 2013 в 13:10
0

Это идентично ответу Soheil, который сам является копией ответа Andy E, завернутого в jQuery и с проверкой на конце. Вы также скопировали ошибку Сохейла в последнем разделе: urlParams["q1"] не может быть === 1, поскольку в этот момент это всегда будет строка, а не целое число, а также return 1 из $(document).ready() на самом деле тоже имеет смысл. Откуда вы взяли этот код?

Pushkraj
23 июля 2013 в 13:14
2

@Rup: я получил это от codeproject.com/Tips/529496/Handling-QueryString-Using-jQuery

avatar
soheil bijavar
24 июля 2016 в 14:07
2

См. Этот пост или используйте это:

<script type="text/javascript" language="javascript">
    $(document).ready(function()
    {
        var urlParams = {};
        (function ()
        {
            var match,
            pl= /\+/g,  // Regular expression 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))
                urlParams[decode(match[1])] = decode(match[2]);
        })();

        if (urlParams["q1"] === 1)
        {
            return 1;
        }
    });
</script>
Rup
10 июля 2013 в 11:35
0

Ваш пример использования - возврат из готового документа - кажется странным, и AFAICS это никогда не сработает: decode() когда-либо будет возвращать только строку, а ваше тройное равенство - сравнение ее с целым числом. В противном случае кажется изящным решением.

Rup
10 июля 2013 в 11:42
0

... хотя это то же самое, что и решение Энди Э, приведенное выше.

Peter Mortensen
24 июля 2016 в 14:08
0

Ссылка не работает.

avatar
Mikhus
24 июля 2016 в 14:05
6

Я создал небольшую библиотеку URL-адресов для своих нужд здесь: https://github.com/Mikhus/jsurl

Это более распространенный способ манипулирования URL-адресами в JavaScript. Между тем, он действительно легкий (минимизированный и сжатый <1 КБ) и имеет очень простой и понятный API. И для работы ему не нужна никакая другая библиотека.

Что касается начального вопроса, это очень просто сделать:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:pass@example.com:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);
Rup
19 апреля 2013 в 09:00
0

Это интересно. Зачем декодировать значение вручную? Вы также ограничены в коде верхнего символа, который вы можете принять как UTF-8, хотя я понимаю, что вы вряд ли когда-нибудь столкнетесь с этим на практике.

Mikhus
19 апреля 2013 в 09:28
0

Почему такое декодирование объясняется здесь: unixpapa.com/js/querystring.html На самом деле, я взял код для этой идеи оттуда, что указано в комментарии верхнего уровня к моему сценарию

brauliobo
19 сентября 2019 в 18:19
0

также не поддерживает массивы объектов, такие как filters[topic][]=list

avatar
Ph0en1x
24 июля 2016 в 14:04
27

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

Я изменил ответ, чтобы он также мог анализировать полную строку запроса со знаком решетки:

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;
};
Rup
22 апреля 2013 в 12:48
1

Это интересно, если вам это нужно, но нет стандарта для формата хеш-части AFAIK, поэтому несправедливо называть это слабостью другого ответа.

Ph0en1x
22 апреля 2013 в 14:15
2

Да, я знаю. Но в своем приложении я интегрирую стороннюю навигацию js, у которой есть некоторые параметры после знака решетки.

etlds
26 июня 2014 в 14:51
0

Например, на странице поиска Google за поисковым запросом следует знак решетки «#».

avatar
Kevin Cox
24 июля 2016 в 14:02
4

Если вам нужны параметры в стиле массива, URL.js поддерживает произвольно вложенные параметры в стиле массива, а также строковые индексы (карты). Он также обрабатывает декодирование URL.

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});
// Result
{
    val: [
        'zero',
        'one',
        true,
        '',
        'four',
        [ 'n1', 'n2', 'n3' ]
    ]
    key: 'val'
}
avatar
tim
24 июля 2016 в 14:01
34

Мне нужен объект из строки запроса, и я ненавижу много кода. Возможно, он не самый надежный во вселенной, но это всего лишь несколько строк кода.

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'}
Rup
15 февраля 2013 в 10:39
4

Аккуратный. Однако, согласно Mozilla, forEach не работает в IE7 или 8, и я подозреваю, что он потерпит неудачу, если вообще не будет строки запроса. Одно минимальное улучшение, которое охватит больше случаев, - это decodeURIComponent значение, которое вы храните, и, возможно, ключ, но вы с меньшей вероятностью будете использовать в этом нечетные строки.

cod3monk3y
25 февраля 2014 в 22:44
1

Красиво и просто. Не обрабатывает ни параметры массива, ни ?a&b&c, но он действительно очень удобочитаем (и, кстати, похож на мою первую идею). Кроме того, split является избыточным, но мне нужно поджарить более высокую производительность, чем разделение строки из 10 символов дважды.

Shawn Kovac
19 мая 2015 в 21:30
1

когда строка запроса "? hello = world & one = a = b & two = 2", тогда, когда вы берете значение 'one', вы получаете только часть перед первым '=' в значении. его значение должно быть «a = b», но вы получите «a» только потому, что вы разделите «one = a = b» на «=». это просто глючит. : ((

avatar
Anoop
24 июля 2016 в 14:00
20

однострочник для получения запроса:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
Brad Koch
28 января 2013 в 20:51
6

Вызывает ошибку, если ключ не существует, может попробовать? (location.search.match(new RegExp('kiosk_modeasdf' + "=(.*?)($|\&)", "i")) || [])[1]

tim
13 февраля 2013 в 01:38
0

@Brad, конечно, он не определен, так как это ключ, который вы ищете. если ваш запрос? hello = world, var value = location.search.match(new RegExp("hello" + "=(.*?)($|\&)", "i"))[1]; вернет "world"

rob
30 сентября 2014 в 07:41
1

@BradKoch Я нашел ваше решение таким лучшим, особенно с коротким замыканием на пустую строку (window.location.search.match (new RegExp ('kiosk_modeasdf' + "= (. *?) ($ | \ &)", " i ")) || []) [1] || '';

e-frank
10 октября 2017 в 14:45
0

я думаю, вы забыли проверить ключ, начинающийся с '?' или '&', например: var result = location.search.match (new RegExp ("[\? \ &]" + key + "= (. *?) ($ | \ &)", "i"));

avatar
meagar
24 июля 2016 в 13:58
46

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

Это простой библиотечный метод, который выполняет анализ и управление параметрами 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>');
avatar
Shlomi Hassid
24 июля 2016 в 10:25
1

Быстро, просто и быстро:

Функция:

function getUrlVar() {
    var result = {};
    var location = window.location.href.split('#');
    var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        result [key] = value;
    });
    return result;
}

Использование :

var varRequest = getUrlVar()["theUrlVarName"];
Rup
14 апреля 2014 в 10:32
0

Это похоже на четвертый ответ, хотя и с меньшим экранированием, и вы не принимаете ?key только такие параметры (хотя вы их больше не видите). Я не уверен, что вам нужен i в параметрах регулярного выражения, и вы работаете со всем href, а не только с частью поиска, которая кажется странной, но не должна иметь значения.

Shlomi Hassid
14 апреля 2014 в 13:05
0

@Rup Привет, спасибо за ваш комментарий - я не вижу сходства ... Он использует decodeURIComponent, который будет отлично работать, но если мы попробуем его с акцентными символами - в некоторых случаях это не удастся (в основном FF) Мой ответ Как Как видите, это просто и быстро, что подойдет большинству программистов, которым нужно быстрое решение для извлечения переменных строки запроса. Добавление i (нечувствительность к регистру) немного более гибкое, но может быть удалено, я согласен.

avatar
Sai
24 июля 2016 в 10:24
4

Простое решение с простым JavaScript и регулярными выражениями:

alert(getQueryString("p2"));

function getQueryString (Param) {
    return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}

JsFiddle

avatar
cocco
24 июля 2016 в 10:23
10

Получить все параметры строки запроса, включая значения флажков (массивы).

Принимая во внимание правильное и нормальное использование параметров GET, я вижу, что в большинстве функций отсутствует поддержка массивов и удаление хеш-данных.

Итак, я написал эту функцию:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

При использовании сокращенных операторов и цикла while-- производительность должна быть очень хорошей.

Поддержка :

  1. Пустые значения ( ключ = / ключ )
  2. Ключевое значение ( ключ = значение )
  3. Массивы ( ключ [] = значение )
  4. Хэш ( хэш-тег разделен )

Примечания :

Он не поддерживает массивы объектов (ключ [ключ] = значение)

Если пробел равен +, он остается +.

Добавьте .replace(/\+/g, " "), если вам нужно.

Использование :

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

Возврат :

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

Демо :

http://jsfiddle.net/ZQMrt/1/

Инфо

Если вы чего-то не понимаете или не можете прочитать функцию, просто спросите. Я счастлив объяснить, что я здесь сделал.

Если вы считаете, что функция нечитаема и не обслуживается, я буду рад переписать функцию для вас, но учтите, что сокращенные и побитовые операторы всегда быстрее, чем стандартный синтаксис (возможно, прочитайте о сокращениях и побитовых операторах в ECMA-262 или воспользуйтесь любимой поисковой системой). Переписывание кода в стандартном читаемом синтаксисе означает потерю производительности.

Rup
26 января 2014 в 18:55
0

Очень аккуратно, хотя мне трудно поверить, что написание пре-минифицированного кода на самом деле помогает чему-либо, кроме первого синтаксического анализа, или помогает в целом, если люди все равно собираются минимизировать свой производственный код. Большинству функций здесь не нужно удалять хеш-часть, потому что они начинаются с location.search, который ее не содержит. Мне также непонятно, что вы имеете в виду под «побитовыми операторами» - вы используете пустой или неопределенный-является-ложным в нескольких местах, которые максимально близки к вам, но здесь нет битовых манипуляций.

Alex
27 июля 2015 в 12:40
0

Если вы используете массивы для более чем значений флажков, добавьте: if (v.charAt (0) == '[') {v = v.replace ('[', '["') .replace (']', ' "]').заменять(',', '","'); v = JSON && JSON.parse (v) || $ .parseJSON (v); } перед "c [k]? typeof ..."

brauliobo
19 сентября 2019 в 18:16
0

Мне нужен тот, который поддерживает массивы объектов

avatar
sonorita
24 июля 2016 в 10:20
1

Это сработает ... Вам нужно вызвать эту функцию там, где вам нужно получить параметр, передав ее имя ...

function getParameterByName(name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  alert(results[1]);
  if (results == null)
    return "";
  else
    return results[1];
}
Rup
22 января 2014 в 11:54
1

Это почти идентично верхнему ответу регулярного выражения, за исключением того, что вы сопоставляете весь URL-адрес, а не только часть строки запроса, и вы не удаляете escape-символы в результате.

avatar
AlfaTeK
29 июня 2016 в 21:05
401

Еще одна рекомендация. Плагин 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'
avatar
Peter T Bosse II
4 мая 2016 в 17:04
1

Эта функция вернет проанализированный объект JavaScript с любыми произвольно вложенными значениями с использованием рекурсии по мере необходимости.

Вот пример jsfiddle.

[
  '?a=a',
  '&b=a',
  '&b=b',
  '&c[]=a',
  '&c[]=b',
  '&d[a]=a',
  '&d[a]=x',
  '&e[a][]=a',
  '&e[a][]=b',
  '&f[a][b]=a',
  '&f[a][b]=x',
  '&g[a][b][]=a',
  '&g[a][b][]=b',
  '&h=%2B+%25',
  '&i[aa=b',
  '&i[]=b',
  '&j=',
  '&k',
  '&=l',
  '&abc=foo',
  '&def=%5Basf%5D',
  '&ghi=[j%3Dkl]',
  '&xy%3Dz=5',
  '&foo=b%3Dar',
  '&xy%5Bz=5'
].join('');

Для любого из приведенных выше тестовых примеров.

var qs = function(a) {
  var b, c, e;
  b = {};
  c = function(d) {
    return d && decodeURIComponent(d.replace(/\+/g, " "));
  };
  e = function(f, g, h) {
    var i, j, k, l;
    h = h ? h : null;
    i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);
    if (i) {
      [j, k, l] = [i[1], i[2], i[3]]
      if (k === void 0) {
        if (f[j] === void 0) {
          f[j] = [];
        }
        f[j].push(h);
      } else {
        if (typeof f[j] !== "object") {
          f[j] = {};
        }
        if (l) {
          e(f[j], k + l, h);
        } else {
          e(f[j], k, h);
        }
      }
    } else {
      if (f.hasOwnProperty(g)) {
        if (Array.isArray(f[g])) {
          f[g].push(h);
        } else {
          f[g] = [].concat.apply([f[g]], [h]);
        }
      } else {
        f[g] = h;
      }
      return f[g];
    }
  };
  a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {
    n && e(b, c(n), c(o));
  });
  return b;
};
Rup
1 июля 2014 в 12:22
3

Выглядит в целом неплохо, но зачем его минифицировать? Сложно следовать в местах как есть; в частности, вы делаете несколько неприятных вещей вокруг правой квадратной скобки. Также ввод типа c[xx=a&c[]=b приведет к сбою.

Peter T Bosse II
4 мая 2016 в 17:34
0

Мое намерение не состояло в том, чтобы предварительно его минимизировать, скорее, я просто отстой при именовании переменных, поэтому я не пытался придумать имена лучше. Я переработал код, чтобы он соответствовал вашим примерам ввода и отвечал соответствующим образом. Я также переключился на использование регулярных выражений вместо того, чтобы пытаться нарезать строки (что, как вы указали, не всегда срабатывало).

avatar
brandonjp
4 февраля 2016 в 18:51
221

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 .

avatar
Mohammed Arif
12 ноября 2015 в 06:00
39

Метод jQuery Roshambo не заботился о декодировании 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;
}
avatar
Tomamais
9 ноября 2015 в 18:14
37

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

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

avatar
Clint
4 ноября 2015 в 09:00
32

Это функция, которую я создал некоторое время назад, и мне она очень нравится. Регистр не учитывается - это удобно. Кроме того, если запрошенный 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);
}
Adarsh Konchady
7 ноября 2015 в 13:27
0

Кроме того, лучше использовать decodeURI () или decodeURIComponent () вместо unescape (). developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

avatar
Paulpro
9 июня 2015 в 12:00
57

Вот быстрый способ получить объект, похожий на массив 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"
}
avatar
orip
9 июня 2015 в 11:36
45

Из MDN:

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

alert(loadPageVar("name"));
avatar
Konstantin Tarkus
29 апреля 2015 в 14:18
0
// Parse query string
var params = {}, queryString = location.hash.substring(1),
    regex = /([^&=]+)=([^&]*)/g,
    m;
while (m = regex.exec(queryString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
hackel
23 августа 2017 в 19:18
0

Хэш! = Строка запроса.

avatar
alex
9 октября 2014 в 16:13
168

Если вы используете 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-адрес может измениться, что сделает недействительным кеш параметров и их значений.

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

avatar
Damien
6 июня 2014 в 11:18
3

Самый красивый, но простой:

data = {};
$.each(
    location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
        return kvpairs.split('=')
    }),
    function(i,values) {
        data[values.shift()] = values.join('=')
    }
);

Он не обрабатывает списки значений, такие как ?a[]=1&a[]2

Rup
6 июня 2014 в 10:52
0

Аккуратный! Возможно, вам придется обрезать ведущий символ '?' от первого элемента (я не знаю, всегда ли это необходимо, но многие ответы здесь делают), и вам также нужно выполнить некоторую отмену экранирования значения (decodeURIComponent, плюс-пробелы)

Damien
6 июня 2014 в 11:13
0

Спасибо, конечно, и нам также нужен .filter (Boolean) для удаления пустого строкового элемента в списке, когда location.search пуст. То есть: location.search.substr(1).split('&').filter(Boolean).map(...

Damien
6 июня 2014 в 11:44
0

И наоборот: строка запроса из возвращенной хэш-карты: $.map(queryhash, function(v,k){ return [k,v].join('=')}).join('&')

avatar
George
14 апреля 2014 в 14:38
10

Для тех, кому нужен короткий метод (с ограничениями):

location.search.split('myParameter=')[1]
Rup
14 апреля 2014 в 10:21
4

Для общего случая этого недостаточно: предполагается, 1) что вас интересует только один параметр 2) что он гарантированно будет последним параметром в строке (т.е. вы можете гарантировать, что все браузеры поместят его последним, или он единственный параметр на странице, и вы не собираетесь, например, помещать URL-адрес в агрегатор RSS-каналов, где он может добавлять параметры utm) и 3) что в значении нет символов, которые можно экранировать для передачи, например пробелы или много символов.

George
14 апреля 2014 в 14:40
2

Не существует одного размера, подходящего для всех методов. Если у вас есть идеальное решение в виде короткого лайнера, я буду всеми глазами и ушами, чтобы проверить это. Выше представлено быстрое решение не для общего случая, а для программистов, которым нужно легкое и быстрое решение для статических реализаций. В любом случае спасибо за комментарий.

Anurag
1 августа 2014 в 07:05
2

(location.search.split ('myParameter =') [1]). split ('&') [0]; это дает тот же результат в случае нескольких параметров. По-прежнему полезно только для статических реализаций.

avatar
14 февраля 2014 в 21:14
2

Кратчайшее возможное выражение с точки зрения размера для получения объекта запроса выглядит следующим образом:

var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
  function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });

Вы можете использовать элемент A для синтаксического анализа URI из строки на его location -подобные компоненты (например, чтобы избавиться от #...):

var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
avatar
Pithikos
21 января 2014 в 14:41
2

Будет произведен синтаксический анализ массивов переменных И из строки URL. Он не использует ни регулярное выражение , ни какую-либо внешнюю библиотеку.

function url2json(url) {
   var obj={};
   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
            arr[i]=vals[i];
         return arr;
      }
      else
         return arr.slice(1, -1);
   }
   function eval_var(avar){
      if (!avar[1])
          obj[avar[0]] = '';
      else
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
      else
         obj[avar[0]] = avar[1];
   }
   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)
            eval_var(vars[i].split('='));
      }
      else
         eval_var(params.split('='));
   }
   return obj;
}

Пример:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"
console.log(url2json(url));

Вывод:

[object]
   noVal: ""
   favFoods: "pizza"
   name:     "John"
   luckyNums:
      0: "31"
      1: "21"
      2: "6"
avatar
gewel
16 декабря 2013 в 07:56
25
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');
Rup
6 февраля 2013 в 10:52
0

Здесь уже есть несколько реализаций этого подхода. По крайней мере, вам нужно decodeUriComponent () значения результата. Это также может вести себя неправильно, если вы не укажете значение, например ?stringtext&stringword=foo.

avatar
30 сентября 2013 в 17:37
27

Мы только что выпустили arg.js, проект, направленный на решение этой проблемы раз и навсегда. Традиционно это было так сложно, но теперь вы можете:

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

или получить всю партию:

var params = Arg.all();

, и если вас волнует разница между ?query=true и #hash=true, вы можете использовать методы Arg.query() и Arg.hash().

Dilip Rajkumar
4 февраля 2014 в 10:12
0

вы спасли меня, чувак .. arg.js - это решение, ни одно из решений не получает значения из # в IE 8 .. :( Любой, кто ищет IE8 # получает из запроса, это решение ..

avatar
7 сентября 2013 в 09:32
4

Есть много решений для получения значений запроса URI, я предпочитаю это, потому что оно короткое и отлично работает:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}
Rup
8 сентября 2013 в 22:37
0

Это аккуратно, хотя, по сути, это наиболее распространенный ответ, немного уменьшенный, например вы потеряли расшифровку плюсов вместо пробелов в значениях. Однако encodeURIComponent для имени ключа является новым и, с одной стороны, более правильным, чем принятый ответ для рассмотрения кодировок в ключе, но, с другой стороны, по-прежнему будет пропускать неминимальные кодировки, например get("key") не будет соответствовать ?k%65y=value.

avatar
12 августа 2013 в 20:15
4
var getUrlParameters = function (name, url) {
    if (!name) {
        return undefined;
    }

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    url = url || location.search;

    var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];

    while (result = regex.exec(url)) {
        resultList.push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
    }

    return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};
allenhwkim
24 августа 2013 в 20:40
1

это намного лучше, чем принятое решение для обработки значений массива в строке запроса. т.е. arr [] = 1 & arr [] = 2

avatar
clyfe
28 июля 2013 в 12:26
4

В исходном коде Node.js есть надежная реализация
https://github.com/joyent/node/blob/master/lib/querystring.js

Также QS TJ выполняет парсинг вложенных параметров
https://github.com/visionmedia/node-querystring

avatar
Jet
24 июля 2013 в 13:03
39
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
avatar
Gabriel Ryan Nahmias
17 марта 2013 в 07:05
4

Я считаю, что это точный и краткий способ добиться этого (изменено с http://css-tricks.com/snippets/javascript/get-url-variables/):

function getQueryVariable(variable) {

    var query = window.location.search.substring(1),            // Remove the ? from the query string.
        vars = query.split("&");                                // Split all values by ampersand.

    for (var i = 0; i < vars.length; i++) {                     // Loop through them...
        var pair = vars[i].split("=");                          // Split the name from the value.
        if (pair[0] == variable) {                              // Once the requested value is found...
            return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.
        }
    }

    return undefined;                                           // Wasn't found.

}
Rup
17 марта 2013 в 12:31
1

Выглядит разумно! Вероятно, вам нужно декодировать значения, взятые из строки запроса, если они были закодированы для отправки с помощью% s или + s.

avatar
Nijikokun
26 января 2013 в 00:53
20

Я разработал небольшую библиотеку, используя перечисленные здесь методы, чтобы создать простое в использовании решение любых проблем; Его можно найти здесь:

https://github.com/Nijikokun/query-js

Использование

Получение определенного параметра / ключа:

query.get('param');

Использование построителя для получения всего объекта:

var storage = query.build();
console.log(storage.param);

и многое другое ... проверьте ссылку на github, чтобы увидеть больше примеров.

Особенности

  1. Кеширование как для декодирования, так и для параметров
  2. Поддерживает строки запроса хеширования #hello?page=3
  3. Поддерживает передачу пользовательских запросов
  4. Поддерживает параметры массива / объекта user[]="jim"&user[]="bob"
  5. Поддерживает пустое управление &&
  6. Поддерживает параметры объявления без значений name&hello="world"
  7. Поддерживает повторяющиеся параметры param=1&param=2
  8. Чистый, компактный и читаемый источник 4kb
  9. AMD, Требуется, поддержка узлов
avatar
25 января 2013 в 05:29
4

Это самая простая и небольшая функция JavaScript для получения значения параметра int и String из URL

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */

function getParameterint(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=parseInt(url.replace(param+"=",""));
            alert(n); 
}
getParameteraint("page");
getParameteraint("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=url.replace(param+"=","");
            alert(n); 
}
getParameterstr("str");

Источник и ДЕМО: http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html <679302970782970> >

Rup
25 января 2013 в 12:23
2

Я думаю, что это легко победить, например. ?xyz=page&str=Expected&page=123 не вернет 123, потому что он берет строку page из xyz=page, а str вернет Expected&page=123, а не просто Expected, если это не последнее значение в строке, и т. Д. также не decodeUriComponent - значения извлечены. К тому же я не смог попробовать вашу демоверсию - меня перенаправили на сайт ставок ??

Code Spy
29 января 2013 в 05:20
0

@Rup, вы говорите о РЕДКОМ / НАИБОЛЬШЕМ случае .. Но в обычных и обычных случаях этот код работает нормально и решает задачу ... А насчет ДЕМО, он работает нормально и показывает, как работает эта функция! Спасибо !

Rup
29 января 2013 в 11:49
2

Хорошо, наконец-то удалось получить вашу демонстрацию через adfly. Да, это работает нормально, но только потому, что у вас есть только один строковый параметр, и он последний - попробуйте использовать более одного и переключать ордера. Попробуйте поставить параметр pagee перед параметром страницы, и это не удастся. Например, здесь ваша демонстрация с обратным порядком трех. Другая проблема заключается в том, что кто-то отправляет строку с символом, отличным от ASCII, например пробел - URI будет закодирован, и вы не будете его потом декодировать.

avatar
31 октября 2012 в 20:31
4

Для этого есть небольшая симпатичная утилита url с классным шугарингом:

http://www.example.com/path/index.html?silly=willy#chucky=cheese

url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain');    // example.com
url('1');         // path
url('-1');        // index.html
url('?');         // silly=willy
url('?silly');    // willy
url('?poo');      // (an empty string)
url('#');         // chucky=cheese
url('#chucky');   // cheese
url('#poo');      // (an empty string)

Ознакомьтесь с другими примерами и загрузите их здесь: https://github.com/websanova/js-url#url

avatar
Albireo
26 октября 2012 в 09:36
6

Эта функция преобразует строку запроса в объект, подобный JSON, она также обрабатывает параметры без значений и многозначные параметры:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

Мы выполняем проверку для undefined на parameter[1], потому что decodeURIComponent возвращает строку «undefined», если переменная undefined, а это неверно.

Использование:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
avatar
Imdad
17 июля 2012 в 09:08
6

Следующая функция возвращает версию объекта вашего queryString. Вы можете просто написать obj.key1 и obj.key2, чтобы получить доступ к значениям key1 и key2 в параметре.

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i<querystring.length;i++)
    {
        key=querystring[i].split("=")[0];
        val=querystring[i].split("=")[1];
        objQueryString[key] = val;
    }
    return objQueryString;
}

И чтобы использовать эту функцию, вы можете написать

var obj= getQueryStringObject();
alert(obj.key1);
avatar
6 апреля 2012 в 21:14
21
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • Обычная пара ключ / значение (?param=value)
  • Ключи без значения (?param: без знака равенства или значения)
  • Ключи с пустым значением (?param=: знак равенства, но без значения справа от знака равенства)
  • Повторяющиеся ключи (?param=1&param=2)
  • Удаляет пустые ключи (?&&: нет ключа или значения)

Код:

  • var queryString = window.location.search || '';
    var keyValPairs = [];
    var params      = {};
    queryString     = queryString.substr(1);
    
    if (queryString.length)
    {
       keyValPairs = queryString.split('&');
       for (pairNum in keyValPairs)
       {
          var key = keyValPairs[pairNum].split('=')[0];
          if (!key.length) continue;
          if (typeof params[key] === 'undefined')
             params[key] = [];
          params[key].push(keyValPairs[pairNum].split('=')[1]);
       }
    }
    

Как позвонить:

  • params['key'];  // returns an array of values (1..n)
    

Вывод:

  • key            ["value"]
    keyemptyvalue  [""]
    keynovalue     [undefined, "nowhasvalue"]
    
avatar
22 февраля 2012 в 20:40
7

Вот мой взгляд на это. Эта первая функция декодирует строку URL в объект пар имя / значение:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

И в качестве дополнительного бонуса, если вы измените некоторые из аргументов, вы можете использовать эту вторую функцию, чтобы вернуть массив аргументов в строку URL:

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};
adardesign
28 августа 2012 в 13:51
1

Если вы все равно используете jQuery, то можно использовать более поздний метод (url_args_replace) через $.param()

greg
18 апреля 2013 в 02:10
1

Почему вы используете document.createElement ("a")?

BMitch
18 апреля 2013 в 02:15
2

@greg, чтобы создать элемент в движке браузера, который проанализирует URL-адрес для вас и предоставит методы поиска и href для взаимодействия со строкой URL-адреса.

avatar
20 февраля 2012 в 14:18
77

Если вы больше манипулируете URL-адресом, чем просто анализируете строку запроса, вы можете найти URI.js полезным. Это библиотека для управления URL-адресами, в которой есть все навороты. (Извините за саморекламу)

для преобразования строки запроса в карту:

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

(URI.js также «исправляет» неверные строки запроса, такие как от ?&foo&&bar=baz& до ?foo&bar=baz)

avatar
8 февраля 2012 в 18:53
9
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://gist.github.com/1771618

avatar
shanimal
30 мая 2011 в 15:36
41

Код гольфа:

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
avatar
5 октября 2010 в 20:49
97

Вот моя попытка превратить отличное решение Andy E в полноценный плагин 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');

Лучшее из обоих миров!