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


2697

Существует ли способ извлечения значений строки запроса через jQuery (или без него) без плагинов ?

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


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

69
Равнину Javascript раствор без RegEx: css-tricks.com/snippets/javascript/get-url-variables
Лоренцо Полидори

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

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

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

Ответы:


8331

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

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

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

оригинал

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

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

Применение:

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


Примечание. Если параметр присутствует несколько раз ( ?foo=lorem&foo=ipsum), вы получите первое значение ( lorem). Стандартов на этот счет нет, и использование различается, см., Например, этот вопрос: Официальное положение дублирующих ключей запросов HTTP GET .
ПРИМЕЧАНИЕ. Функция чувствительна к регистру. Если вы предпочитаете имя параметра без учета регистра, добавьте модификатор 'i' в RegExp


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


131
Как эта функция обрабатывает http://www.mysite.com/index.php?x=x1&x=x2&x=x3Значение поля xнеоднозначно.
ДПП

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

17
Зачем вам использовать регулярное выражение для этого?
Ry-

28
Для строки запроса ?mykey=0&m.+key=1вызов getParameterByName("m.+key")будет возвращен 0вместо 1. Вам нужно экранировать метасимволы регулярных выражений nameперед созданием регулярного выражения. И вам нужно вызвать .replace()только один раз, используя глобальный флаг и используя "\\$&"в качестве выражения замены. Вы должны искать location.searchвместо location.href. Ответ с более чем 400 ответами должен учитывать эти детали.
gilly3

7
Вам не нужен jQuery для этой или любой другой цели. Вам просто не нужно это.
Гзтомас

1708

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

11
если вы работаете с приложением с большим количеством ajax, то вы можете использовать хеш (#) для «включения кнопки возврата» ... в этом случае строка запроса будет постоянно меняться (посмотрите, как это делает facebook). ... хотя эти решения игнорируют вещи, которые идут после # anways ...
Ник Франческина

100
@Nick: Все, что находится после хэша, находится в window.location.hashсвойстве, которое отделено от window.location.searchсвойства. Если хеш изменяется, это никак не влияет на строку запроса.
Энди Э

27
Не забывайте, что ;это допустимый разделитель для key=valueпар GET . Это редко, но для реализации требуется 5 секунд.
Алекс

4
Чтобы быть справедливым, никакой конкретный формат для строки запроса не определен RFC3986. ?a=b&c=dобычно, и рекомендация W3C для веб-форм, но спецификация URI просто определяет query = *( pchar / "/" / "?" ).
Мэтью Джиллиард

21
Для тех из нас, кто использует довольно строгую настройку JSHint, поменяйте местами while(match = search.exec(query))сwhile((match = search.exec(query)) !== null)
craigts

1283

ES2015 (ES6)

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

Без jQuery

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

С URL-адресом ?topic=123&name=query+stringбудет возвращено следующее:

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

Метод Google

Срывая код Google, я нашел метод, который они используют: getUrlParameters

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

Это запутано, но понятно. Это не работает, потому что некоторые переменные не определены.

Они начинают искать параметры в URL, ?а также из хеша #. Затем для каждого параметра они разделяются на знак равенства b[f][p]("=")(похоже indexOf, они используют позицию символа для получения ключа / значения). Разделив его, они проверяют, имеет ли параметр значение или нет, если он имеет, то сохраняют значение d, иначе они просто продолжают.

В конце объект dвозвращается, обрабатывая экранирование и +знак. Этот объект похож на мой, у него такое же поведение.


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

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

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

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

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

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

Применение

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

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

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

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

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

Тест производительности (метод разделения на метод регулярных выражений) ( jsPerf )

Код подготовки: объявление методов

Сплит тестовый код

var qs = window.GetQueryString(query);

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

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

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

Тестирование в Firefox 4.0 x86 на Windows Server 2008 R2 / 7 x64

  • Сплит метод : 144,780 ± 2,17% быстрее
  • Метод регулярных выражений: 13,891 ± 0,85% | На 90% медленнее

1
Это также хороший подход, разделение строк вместо использования регулярных выражений. Однако есть несколько моментов, на которые стоит обратить внимание :-) 1. unescapeявляется устаревшей функцией и заменяется на decodeURIComponent(); имейте в виду, что ни одна из этих функций не будет правильно декодировать +символ a в пробел. 2. Вы должны объявить результат как объект, а не как массив, потому что JavaScript сам по себе не имеет ассоциативных массивов, а объявленный вами массив обрабатывается как объект, так или иначе назначая ему именованные свойства.
Энди Э

55
Любопытно, почему вы сделали бы этот плагин jQuery, если у него нет специфичного для jQuery кода?
Заклеат

63
@zachleat, если у вас нет фреймворка, ваши функции просто распространятся по всему коду. Если вы расширите jQuery, у вас будет область видимости для ваших функций, она не будет где-то распространяться в вашем коде. Я думаю, что это единственная причина.
BrunoLM

6
Вот версия jQuery, настроенная для прохождения JSLint (по крайней мере, полу-движущаяся цель JSLint.com 2011-06-15). Главным образом просто перемещать вещи вокруг, чтобы успокоить Крокфорда.
Патридж

3
Как пошутил @BenjaminGruenbaum, я тоже не совсем вижу смысла в оценке производительности парсинга URL. Если это было превращено в изоморфный модуль JavaScript, который можно вызывать из Node, скажем, для анализа журналов, тогда да. Но использование его для извлечения параметров URL-адреса window.locationделает спор о производительности, учитывая, что переход клиента к URL-адресу намного, намного дороже.
Дан Даскалеску

659

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

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/


23
Если вы хотите сократить его немного больше, вы можете покончить с троичным условным выражением и заменить его на короткое замыкание в последней строке - return match && decodeURIComponent(match[1].replace(/\+/g, ' '));.
Энди

Возвращается, nullесли за параметром не следует «=». Вы можете if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;сделать так, чтобы он возвращался, boolean falseесли параметр вообще отсутствует.
commonpike

9
Я бы использовал newпрефикс при создании регулярного выражения:var match = new RegExp('...
Патрик Беркли

2
Ошибка IE11: IE решает добавить в возвращаемое значение символ ascii 8206 (hex: 200E - символ слева направо). Я потратил более 6 часов, чтобы найти это! терапевтическая вентиляция .... чтобы исправить, прикрепите к концу последней строки:.replace('\u200E', '')
JayRO-GreyBeard

По крайней мере, в Chrome на Mac (возможно, и в других браузерах) последнее значение добавлялось в '/'. Поэтому я изменил регулярное выражение, чтобы игнорировать его. var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
CaseyB

594

URLSearchParams

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

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

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

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

let params = new URLSearchParams(location.search);

или

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

Или, конечно, на любой URL:

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

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

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

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

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


Эти два downvoters вероятно пропустили (как я только что сделал) факт, что вы должны использовать .getвместо просто.
Nakilon

20
Вы на самом деле не нужно slice(1)на .search, вы можете использовать его непосредственно. URLSearchParams может обрабатывать ведущие ?.
Джейсон С

URLSearchParamsбесполезно, потому что не возвращает фактические значения параметров URL.
Мелаб

Это new URL('https://example.com?foo=1&bar=2') не работает для URL- file:///android_asset/...
Шах

@Melab по-прежнему хорош тем, что предоставляет простой API для всех странных регулярных выражений в других ответах здесь. Но это также убеждает меня в том, что id не выполняет window.location.search по умолчанию и что нет способа обновить текущий URL-адрес.
Деймон

400

Просто еще одна рекомендация. Плагин 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'

7
На момент написания статьи purl больше не поддерживается, и предыдущий сопровождающий предлагает uri.js
Dan Pantry

238

ТЛ; др

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

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}. Рекомендуется проверить строку запроса перед запуском функции синтаксического анализа likeso:

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

1
Ницца. Единственное, что я хотел бы изменить - если для ключа не более одного значения, нет необходимости в том, чтобы он был массивом. Используйте массив только в том случае, если в ключе указано более одного значения.
Павел Николов

2
@PavelNikolov Я думаю, что это затруднит получение иногда массива, а иногда и значения. Сначала вам нужно будет проверить это, теперь вы проверяете только длину, потому что вы все равно будете использовать циклы для извлечения этих значений. Также это должно было быть самым простым, но функциональным решением.
Qwerty

@katsh Да, действительно, это работает в> = IE9, однако вы можете обучить свой процессор JavaScript array.forEach(), вставляя определенный код в начале вашего скрипта. см. Polyfill developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Qwerty

1
Немного сглажено для удобства чтения, превращения в функцию и повторного использования вызова split: function parseQueryString () {var qd = {}; location.search.substr (1) .split ("&"). forEach (function (item) {var parts = item.split ("="); var k = parts [0]; var v = decodeURIComponent (parts [ 1]); (k в qd)? Qd [k] .push (v): qd [k] = [v,]}); вернуть QD; }
Кейси

1
decodeDocumentURI (undefined) возвращает "undefined" вместо undefined. Функциональный, но не очень элегантный патч: var qd = {}; location.search.substr(1).split("&").forEach( function(item) { var s = item.split("="), k = s[0], v; if(s.length>1) v = decodeURIComponent(s[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v] })
loop

218

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 .


13
с jQuery, кажется, означает пространство имен функции к объекту jQuery. Кроме того, почему недопустимое значение 0? Конечно, я мог бы использовать строгую проверку на равенство, но не должно ли это быть null?
Алекс

Согласовано. Таким образом, он работает так же, как обычная ссылка на переменную javascript (за исключением того, что возвращение undefined будет более точным).
Изохронный

'name' не экранировано должным образом, оно просто напрямую вводится в RegExp. Это не удается. Как уже говорили другие, невероятно, что эти ответы заново изобретают колесо и получают столько голосов, когда это должно быть реализовано в проверенной библиотеке.
Трийнко

167

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

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


100

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

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

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

Чтобы решить проблему в комментарии Рупа, добавьте условное разбиение, изменив первую строку на две ниже. Но абсолютная точность означает, что теперь она медленнее, чем регулярное выражение (см. JsPerf ).

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

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

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

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

7
Очень аккуратный! Это не будет работать, хотя, если у вас есть более раннее значение с именем ключа, которое заканчивается тем, которое вы хотите, например, get('value')на http://the-url?oldvalue=1&value=2.
Rup

3
Однако, если вы знаете, что имя параметра ожидает, это будет более быстрый подход.
Мартин Бортири

Отредактировано: если вы просто проверяете, что halfэто правда, это возвращает ноль для пустого параметра, как ?param=. Он должен вернуть пустую строку в этом случае, и проверка half !== undefinedрешает это.
Фил

Круто! Я сделал однострочник:function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
niutech

Мне пришлось изменить вторую строку, чтобы return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;заставить его работать
divillysausages

95

Вот мой пример превращения превосходного решения Энди Э в полноценный плагин 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');

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


76

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

чтобы преобразовать вашу строку запроса в карту:

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

(URI.js также «фиксирует» плохое querystrings нравится ?&foo&&bar=baz&в ?foo&bar=baz)


// требуется загрузить src / URI.fragmentURI.js
JoeB

1
+1 URI.js - отличный маленький плагин. Вы также можете сделать var data = URI.parseQuery('?foo=bar&bar=baz&foo=world');для того же результата ( документы ).
Ярин

62

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


3
Похоже, что window.location.getParameter () был удален из Chrome.
mhenry1384

54

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

если он вам нужен как плагин jQuery, вот он: (function($) { $.extend({ get_query: function (name) { var url = location.href; 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]] = qs[i][1]; } return result; } }); })(jQuery);и используйте его так:$.get_query()
Тим

Спасибо. Я также закончил тем, что использовал это. Я добавил это перед вашим оператором return: если (param) возвращает результат [param], таким образом я также могу выполнить get_query ('foo'), если необходимо
sqram

1
Не работает, если у вас есть хэши. Например: test.aspx? Test = t1 # default . Вернет {test: "t1 # default"}, и я ожидаю {test: "t1"}
Богдан М.

@ БогданМ: действительно. location.hrefдолжен быть заменен на location.search.
Дан Даскалеску

53

Сохраняйте это простым в простом коде 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');

1
Я думаю, что вы делаете что-то похожее на меня, но я думаю, что мой подход НАМНОГО проще stackoverflow.com/a/21152762/985454
Qwerty

Позвольте мне представить вас (барабанная дробь, пожалуйста) window.location.search!
ErikE

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

44

Из MDN :

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

alert(loadPageVar("name"));

39

Код гольф:

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

9
Мне нравится ваш ответ, особенно то, насколько компактен скрипт, но вы, вероятно, должны использовать decodeURIComponent. См. Xkr.us/articles/javascript/encode-compare и stackoverflow.com/questions/619323/…
pluckyglen

39

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

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

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.


38
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

5
Это интересный подход, возвращающий массив, содержащий значения из указанных параметров. У него есть, по крайней мере, одна проблема - неправильно URL, декодирующий значения, и он должен был бы URL кодировать имена параметров, которые также используются в match. Он будет работать с простыми строками запроса в его нынешнем виде. ps не забудьте использовать ключевое слово var при объявлении переменных в выражениях for .
Энди Э

38

Метод Roshambo jQuery не заботился о декодировании URL

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

Просто добавил эту возможность также при добавлении в операторе возврата

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

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

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

36

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

Прекрасно работает для меня.


36

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

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значением.


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'}

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

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

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

2
Я бы использовал location.search.substr(1)вместо того, location.href.split('?')[1]чтобы избежать хеша ( #anchor) вместе с последним параметром запроса.
млт

Да, позвольте мне также представить вас location.search!
ErikE

32

Вот расширенная версия связанной версии «Обрабатывать строки запроса в стиле массива» Энди Е. Исправлена ​​ошибка ( ?key=1&key[]=2&key[]=3; 1теряется и заменяется [2,3]), вносились незначительные улучшения производительности (перекодирование значений, пересчет позиции "[" и т. Д.) И добавлялся ряд улучшений (функционализировано, поддержка разделителей ?key=1&key=2, поддержка ;разделителей) , Я оставил переменные раздражающе короткими, но добавил множество комментариев, чтобы сделать их читабельными (о, и я снова использовал их vв локальных функциях, извините, если это сбивает с толку;).

Он будет обрабатывать следующую строку запроса ...

? Тест = Hello & лицо = NEEK и человек [] = Джеф & человек [] = джим и человек [экстра] = джон & test3 & NoCache = 1398914891264

... превращая его в объект, который выглядит как ...

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

Как вы можете видеть выше, эта версия обрабатывает некоторую меру «неправильно сформированных» массивов, т. Е. - person=neek&person[]=jeff&person[]=jimили person=neek&person=jeff&person=jimпоскольку ключ является идентифицируемым и действительным (по крайней мере, в dotNet's NameValueCollection.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;
};

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

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

31

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

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

27

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

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

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

var params = Arg.all();

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


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

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

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

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

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

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

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

24

Если вы используете 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"

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

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

О, это круто! URLSearchParams работает отлично. Большое спасибо!
Баран Эмре

1
должно быть, лучше всех проголосовало, никаких хлопот с пользовательскими функциями и дополнительными библиотеками. Это также, кажется, в основном принято браузерами 2019.
TheWhiteLlama
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.