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

2703

Есть ли способ без плагинов получить строку запроса через jQuery (или без)?

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

  • 0
    Я использую плагин getUrlParam, описанный в jQuery-Plugin - getUrlParam (версия 2) .
  • 0
    Мне нравится додзё queryToObject . Эта функция может быть легко извлечена из рамок, если вы находитесь на диете.
Показать ещё 6 комментариев
Теги:
plugins
url
query-string

72 ответа

7376
Лучший ответ

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

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

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

Orignal

Вам не нужен 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 " ниже.

  • 4
    в строке name.replace вы получили замену, которая, кажется, экранирует \ и] - это правильно или это должно быть "\\]", потому что] не нужно экранировать?
  • 1
    может быть неплохо использовать функцию jQuery data () для кэширования результатов для повторного доступа вместо повторного анализа каждый раз ...
Показать ещё 48 комментариев
1652

Некоторые из размещенных здесь решений неэффективны. Повторение поиска регулярных выражений каждый раз, когда script необходимо получить доступ к параметру, совершенно не нужно, достаточно одной отдельной функции для разделения параметров в объект стиля ассоциативного массива. Если вы не работаете с API истории HTML 5, это необходимо только один раз на загрузку страницы. Другие предложения здесь также не могут правильно декодировать URL.

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

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

Пример querystring:

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

Результат:

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

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

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

Это можно легко улучшить, чтобы обрабатывать строки строк в стиле массива. Примером этого является здесь, но поскольку параметры стиля массива не определены в RFC 3986 Я не буду загрязнять этот ответ исходным кодом. Для тех, кто интересуется "загрязненной" версией, посмотрите на answerbeln ответ ниже.

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


Если вы используете язык предварительной обработки на стороне сервера, вы можете использовать его собственные функции JSON для выполнения тяжелой работы для вас. Например, в PHP вы можете написать:
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

Намного проще!

  • 11
    если вы работаете с приложением с большим количеством ajax, то вы можете использовать хеш (#) для «включения кнопки возврата» ... в этом случае строка запроса будет постоянно меняться (посмотрите, как это делает Facebook). ... хотя эти решения игнорируют вещи, которые идут после # anways ...
  • 98
    @Nick: все, что находится после хэша, находится в свойстве window.location.hash , которое отделено от свойства window.location.search . Если хеш изменяется, это никак не влияет на строку запроса.
Показать ещё 23 комментария
1164

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

Срывая гугл код я нашел метод который они используют: 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 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 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() , обратите внимание, что ни одна из этих функций не будет правильно декодировать знак + в символ пробела. 2. Вы должны объявить результат как объект, а не как массив, потому что JavaScript сам по себе не имеет ассоциативных массивов, а объявленный вами массив обрабатывается как объект, так или иначе назначая ему именованные свойства.
  • 52
    Любопытно, почему вы сделали бы этот плагин jQuery, если у него нет специфичного для jQuery кода?
Показать ещё 23 комментария
679

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

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, ' ')); ,
  • 0
    Возвращает null если параметр не сопровождается '='. Вы можете добавить, if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false; чтобы он возвращал boolean false если параметр вообще отсутствует.
Показать ещё 4 комментария
526

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10. 3+ и Chrome 49+ поддерживают API-интерфейс URLSearchParams:

Для стабильных версий IE существует политическая полиграфия URLSearchParams.

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

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

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" 

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

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

  • 0
    Эти два downvoters, вероятно, пропустили (как я только что сделал) тот факт, что вы должны использовать .get вместо просто .
  • 18
    На самом деле вам не нужно slice(1) на .search , вы можете использовать его напрямую. URLSearchParams может обрабатывать ведущие ? ,
Показать ещё 3 комментария
396

Еще одна рекомендация. Плагин Пурл позволяет извлекать все части 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
237

TL;DR

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

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

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})
Многострочный:
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

Что такое весь этот код... "null-coalescing" , оценка короткого замыкания
ES6 Назначения деструктурирования, Функции стрелок, Шаблонные строки

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

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



Подробнее... о решении Vanilla JavaScript.

Для доступа к различным частям URL используйте location.(search|hash)

Самое простое (фиктивное) решение

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • Правильно обрабатывает пустые ключи.
  • Переопределяет несколько ключей с найденным значением last.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Многозначные ключи

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

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
  • Теперь возвращает массивы.
  • Значения доступа qd.key[index] или qd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Кодированные символы?

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

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})
Пример:
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]



Из комментариев

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

v = v && decodeURIComponent(v);


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

if (location.search) location.search.substr(1).split("&").forEach(...)
  • 1
    Ницца. Единственное, что я хотел бы изменить - это если для ключа не более одного значения, нет необходимости, чтобы он был массивом. Используйте массив только в том случае, если в ключе указано более одного значения.
  • 2
    @PavelNikolov Я думаю, это затруднит получение иногда массива, а иногда и значения. Сначала вам нужно будет проверить это, теперь вы проверяете только длину, потому что вы все равно будете использовать циклы для получения этих значений. Также это должно было быть самым простым, но функциональным решением.
Показать ещё 15 комментариев
205

Рошамбо на snipplr.com имеет простой script для достижения описанного в Получить параметры URL с помощью jQuery | Улучшение. С помощью script вы также легко можете вытащить только нужные параметры.

Здесь суть:

$.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/query была xyz.com/index.html?lang=de.

Просто позвоните var langval = $.urlParam('lang');, и у вас его есть.

UZBEKJON имеет отличную запись в блоге, а Получить параметры и значения URL с помощью jQuery.

  • 13
    с jQuery, кажется, означает пространство имен функции к объекту jQuery. Кроме того, почему недопустимое значение 0 ? Конечно, я мог бы использовать строгую проверку на равенство, но разве это не должно быть null ?
  • 0
    Согласовано. Таким образом, он работает так же, как обычная ссылка на переменную javascript (за исключением того, что возвращение undefined будет более точным).
Показать ещё 1 комментарий
156

Если вы используете jQuery, вы можете использовать библиотеку, такую ​​как jQuery BBQ: Back Button и библиотека запросов.

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

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

102

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

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

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

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

Итак, если вы знаете, что не столкнетесь с контр-картой Rup, это победит. В противном случае, regexp.

Или, если у вас есть контроль над querystring и может гарантировать, что значение, которое вы пытаетесь получить, никогда не будет содержать 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 .
  • 3
    Однако, если вы знаете, что имя параметра ожидает, это будет более быстрый подход.
Показать ещё 3 комментария
94

Здесь мой удар по созданию превосходного решения 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');

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

73

Если вы делаете больше манипуляций с 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)

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

Мне нравится решение Райана Пилана. Но я не вижу смысла расширять 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];
  };
}

Эта функция больше или меньше от Ryan Phelan, но она обернута по-другому: четкое имя и никакие зависимости от других библиотек javascript. Подробнее об этой функции в моем блоге.

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

Вот быстрый способ получить объект, похожий на массив 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"
}
  • 0
    если он вам нужен как плагин 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()
  • 0
    Благодарю. Я также закончил тем, что использовал это. Я добавил это перед вашим оператором return: если (param) возвращает результат [param], таким образом я также могу сделать get_query ('foo'), если необходимо
Показать ещё 2 комментария
50

Держите его простым в простом 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
  • 0
    Позвольте мне представить вам (барабанная дробь, пожалуйста) window.location.search !
48

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

Это простой библиотечный метод, который выполняет вскрытие и манипулирование параметрами 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>');
41

Из MDN:

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

alert(loadPageVar("name"));
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.

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

Код гольфа:

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/…
  • 0
    Да, unescape НЕ обрабатывает URI правильно.
37

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

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

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

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

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

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

34

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

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

ВАЖНО! Параметр для этой функции в последней строке отличается. Это просто пример того, как можно передать произвольный URL-адрес. Вы можете использовать последнюю строку из ответа Бруно для анализа текущего URL-адреса.

Итак, что именно изменилось? С url http://sb.com/reg/step1?param= результаты будут одинаковыми. Но с url http://sb.com/reg/step1?param решение Bruno возвращает объект без ключей, а мой возвращает объект с ключом param и undefined.

32

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

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 значения при его сохранении - и, возможно, также ключа, но вы с меньшей вероятностью будете использовать в этом нечетные строки.
  • 1
    Красиво и просто. Не обрабатывает ни параметры массива, ни ?a&b&c но это действительно очень читабельно (и, кстати, похоже на мою первую идею). Кроме того, split является избыточным, но у меня больше рыбы для повышения производительности, чем для разбиения строки из 10 символов дважды.
Показать ещё 3 комментария
30

Здесь расширенная версия Andy E, связанная с цепочками запросов "Обработка массива в стиле массива" - версия. Исправлена ​​ошибка (?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 NameValueCollection.Add):

Если указанный ключ уже существует в целевом NameValueCollection экземпляр, указанное значение добавляется к существующей разделенной запятой список значений в форме "value1, value2, value3".

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

Код:

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


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

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

            //# If there was a cv(current value), .push it into the new v(alue) array
            //#     NOTE: This may or may not be 100% logical to do... but it 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) 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) array
            else { Array.prototype.push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};
  • 0
    Для получения значений строки запроса вы можете использовать эту функцию «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)), помогает в этом.
30

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

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

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

Enjoy.

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

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

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

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

var params = Arg.all();

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

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

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

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

var getQueryStringData = function(name) {
    var result = null;
    var regexS = "[\\?&#]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec('?' + window.location.href.split('?')[1]);
    if (results != null) {
        result = decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    return result;
};
  • 1
    Это интересно, если вам это нужно, но не существует стандарта для формата хэш-части AFAIK, поэтому было бы несправедливо называть это слабостью другого ответа.
  • 2
    Да, я знаю. Но в моем приложении я интегрирую стороннюю навигацию js, у которой есть некоторые параметры после знака хеша.
Показать ещё 1 комментарий
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');
  • 0
    Здесь уже есть несколько реализаций этого подхода. По крайней мере, вам нужно декодировать UriComponent () значения результата. Это также может привести к некорректной работе, если вы не укажете значение, например ?stringtext&stringword=foo .
20

Однострочный запрос для запроса:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
  • 6
    Вызывает ошибку, если ключ не существует, попробуйте это возможно? (location.search.match(new RegExp('kiosk_modeasdf' + "=(.*?)($|\&)", "i")) || [])[1]
  • 0
    @Brad, конечно, это не определено, так как это ключ, который вы ищете. если ваш запрос? hello = world, var value = location.search.match(new RegExp("hello" + "=(.*?)($|\&)", "i"))[1]; вернет "world"
Показать ещё 2 комментария
19

Если вы используете 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"
  • 0
    Документация по API модуля url находится здесь: nodejs.org/api/url.html
  • 0
    Это хорошо для разработки nw.js. Browserify даже не нужен, так как большинство узловых модулей работают так же, как в окне nw.js. Я протестировал этот код и работает как брелок без каких-либо изменений.
19
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"]
    
17

Очень легкий метод 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)
  • 2
    Ухоженная. Уже есть несколько ответов в том же духе - повторяющихся через разделение - хотя ни один из них не использует каждый из jQuery, и я не думаю, что любой из них еще совершенен. Однако я не понимаю, как будет return ваше закрытие, и я думаю, что вам нужно decodeUriComponent двух значений pair[] мере их чтения.
  • 0
    да, использование decodeUriComponent является лучшей практикой - я просто написал это на лету. Что касается возвращения ... я просто имею привычку что-то возвращать. совершенно не обязательно
Показать ещё 1 комментарий
16

Вот моя версия кода синтаксического анализа строки запроса на 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;

}
12

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

/**
 * 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://stackoverflow.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.

  • 1
    Это потому, что у всех, кажется, есть разные требования к обработке ключей без значений или обработке дублированных ключей путем создания массивов значений и т. Д. Уже есть множество разделенных ответов, но я не вижу такого, который бы точно соответствовал этому, правда. (FWIW Я думаю, что paramName нужно слишком технически decodeURIComponent .
  • 1
    Имена параметров никогда не должны декодироваться.
Показать ещё 5 комментариев
11

Я бы предпочел использовать 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;
}
  • 0
    Я не хотел использовать Regex и пошел с этим решением. Я считаю, что это работает довольно хорошо. Спасибо!
10

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

location.search.split('myParameter=')[1]
  • 4
    Этого недостаточно для общего случая: предполагается, что 1) вас интересует только один параметр 2) что он гарантированно будет последним параметром в строке (т.е. вы можете гарантировать, что все браузеры будут указывать его последним, или единственный параметр на странице, и вы не собираетесь, например, помещать URL-адрес в агрегатор RSS-каналов, где он может получить добавленные параметры utm) и 3) что в значении нет символов, которые можно экранировать для передачи, например пробелы или много символов.
  • 2
    Там нет 1 размер подходит для всех методов. Если у вас есть идеальное решение в одном короткометражном фильме, я приложу все усилия, чтобы проверить это. Выше приведено быстрое решение, не для общего случая, а для кодеров, которые хотят иметь легкий вес и быстрое решение для статических реализаций. В любом случае, спасибо за ваш комментарий.
Показать ещё 1 комментарий
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-loop, производительность должна быть очень хорошей.

Поддержка:

  • Пустые значения (ключ =/ключ)
  • Значение ключа (ключ = значение)
  • Массивы (ключ [] = значение)
  • Хэш (хэш-тег разделен)

Примечания:

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

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

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

Применение:

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

Возврат:

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

Demo:

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

Info

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

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

  • 0
    Очень аккуратно, хотя мне трудно поверить, что предварительная минимизация на самом деле помогает чему-либо, кроме первого анализа, или помогает вообще, если люди все равно собираются минимизировать свой производственный код. Большинству функций здесь не нужно удалять хеш-часть, потому что они начинаются с location.search который не содержит его. Мне также непонятно, что вы имеете в виду «побитовые операторы» - вы используете пустой-или-неопределенный-ложный в нескольких местах, которые настолько близки, насколько это возможно, но здесь нет никаких битовых манипуляций.
  • 0
    stackoverflow.com/a/21353032/2450730
Показать ещё 1 комментарий
9

Это хорошо работает

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

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

  • 2
    Возможно, вы по крайней мере захотите вызвать decodeUriComponent для pair[1] прежде чем вернуть его, если не замените плюсы пробелами, как во всех других решениях здесь. Некоторые из других решений также предпочитают ограничение в 2 части на split = чтобы быть более снисходительным в принятии ввода.
  • 1
    @Rup вы правы ... на самом деле в моем коде это всегда будет число, а не какие-либо специальные символы, так что пропустили ...
Показать ещё 1 комментарий
8
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://gist.github.com/1771618

6

Я использовал этот код (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
  • 1
    Это здорово, хотя в ключе и значении отсутствует decodeURIComponent и вам, вероятно, не нужен флаг i в регулярном выражении (не то, что это действительно имеет значение).
  • 1
    но что, если у вас есть example.com/3 (маршрутизация MVC)
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");
6

Попробуйте следующее:

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... переместите его в функцию и передайте строку в качестве аргумента

6

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

  • isKeyExist: проверьте, существует ли какой-либо конкретный параметр
  • 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;
       }
};
5

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

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

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

var u = new Url; // Current document URL
// or
var u = new Url('http://user:[email protected]: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);
  • 0
    Это интересно. Зачем декодировать значение вручную? Вы также будете ограничены в верхнем символьном коде, который вы можете принять как UTF-8, хотя я понимаю, что вы вряд ли когда-либо достигнете этого на практике.
  • 0
    Почему декодирование таким способом объясняется здесь: unixpapa.com/js/querystring.html Собственно, я взял оттуда код этой идеи, о чем говорится в комментарии верхнего уровня в моем скрипте
5

Следующая функция возвращает объектную версию вашего запросаString. Вы можете просто написать 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);
5

Вот мой собственный подход к этому. Эта первая функция декодирует строку 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;
};
  • 1
    Если вы все равно используете jQuery, то более поздний метод ( url_args_replace ) можно использовать через $.param()
  • 1
    Почему вы используете document.createElement ("a")?
Показать ещё 1 комментарий
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

4

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

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
  • 0
    Ухоженная. По сравнению с верхним разделенным ответом, хотя вам не хватает обработки + s и вызовов decodeURIComponent, но для простых значений этого будет достаточно.
  • 0
    Да, это действительно просто для получения простых буквенно-цифровых токенов. В текущем проекте это все, что мне было нужно, так что я действительно не хотел, чтобы была неповторимая функция.
Показать ещё 1 комментарий
4

Существует множество решений для получения значений запросов URI, я предпочитаю этот вариант, потому что он короток и отлично работает:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}
  • 0
    Это аккуратно, хотя это, по сути, самый распространенный ответ , который немного искажен, например, вы потеряли декодирование значений плюсов для пробелов в значениях. encodeURIComponent для имени ключа, тем не менее, является новым, и с одной стороны, более корректный, чем принятый ответ для рассмотрения кодировок в ключе, но с другой стороны все равно будет пропущен минимальные кодировки, например, get("key") не будет совпадать ?k%65y=value .
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;
};
  • 1
    это намного лучше, чем принятое решение для обработки значений массива в строке запроса. т.е. arr [] = 1 & arr [] = 2
4

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

Также TJ qs выполняет вложенные параметры parsing
https://github.com/visionmedia/node-querystring

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

}
  • 1
    Это выглядит разумно! Вам, вероятно, нужно декодировать значения, взятые из строки запроса, если они были закодированы для отправки с помощью% s или + s.
  • 1
    Хороший звонок - простая модификация.
4

Это самая простая и малая функция JavaScript для получения значения параметра int as 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");

Источник и DEMO: http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html

  • 2
    Я думаю, что это может быть легко побеждено, например ?xyz=page&str=Expected&page=123 не вернет 123, потому что он берет page строку из xyz=page , а str вернет Expected&page=123 а не просто Expected если это не последнее значение на линии и т. д. Вы также не расшифровываете извлекаемые значения. К тому же я не смог опробовать ваше демо - меня перенаправили на сайт для ставок ??
  • 0
    @Rup Вы говорите о случае RARE / WORST .. Но в обычных и обычных случаях этот код работает нормально и решает задачу ... А про DEMO он работает нормально и показывает, как работает эта функция! Спасибо !
Показать ещё 1 комментарий
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

4

Я принял этот ответ и добавил поддержку для необязательной передачи 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);
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

  • 0
    Ухоженная! Возможно, вам придется урезать ведущий '?' выключите первый элемент (я не знаю, всегда ли это необходимо, но многие ответы здесь делают), и вам также нужно выполнить некоторое исключение значения ( decodeURIComponent , decodeURIComponent -to- decodeURIComponent )
  • 0
    Спасибо, безусловно, и нам также нужен .filter (Boolean) для удаления пустого строкового элемента в списке, когда location.search пуст. То есть: location.search.substr(1).split('&').filter(Boolean).map(...
Показать ещё 1 комментарий
3

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

Используйте функцию 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)}
3

Если вы не хотите использовать библиотеку 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;
}
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
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"
2

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

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

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

  • 0
    Это совпадает с ответом Сохейла, который сам является копией ответа Энди Э, завернутого в jQuery и с проверкой на конце. Вы также скопировали ошибку urlParams["q1"] в последнем разделе: никоим образом urlParams["q1"] может === 1 поскольку в этой точке она всегда будет строкой, а не целым числом, а также return 1 из $(document).ready() тоже не имеет смысла. Откуда вы взяли этот код?
  • 2
    @Rup: я получил это от codeproject.com/Tips/529496/Handling-QueryString-Using-jQuery
2

Я рекомендую Dar Lessons как хороший плагин. Я работал с ним очень долго. Вы также можете использовать следующий код. Jus положил 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;
}
  • 0
    Две заглушки для Dar Уроки в двух постах? Я не думаю, что мы можем рекомендовать текущую версию, по крайней мере: она уязвима для атак с использованием скриптов. (Я написал ему по электронной почте, чтобы он знал). Как и во многих решениях с split('=') здесь вы уже упускаете decodeURIComponent , и вам также может понадобиться обрабатывать пропущенные значения более изящно.
  • 0
    Dar Lessons выпустила версию 1.1, в которой исправлена атака, связанная с внедрением скрипта.
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;
};
  • 3
    Выглядит в целом хорошо, но зачем это минимизировать? Это сложно следовать в местах как есть; в частности, вы делаете несколько неприятных вещей вокруг линии правой квадратной скобки. Кроме того, что-то вроде c[xx=a&c[]=b приведет к сбою.
  • 0
    Мое намерение не состояло в том, чтобы преуменьшить это, скорее я просто сосу в именовании переменных, поэтому я не пытался придумать лучшие имена. Я переработал код, чтобы учесть ваши входные данные и ответить соответствующим образом. Я также переключился на использование регулярных выражений вместо того, чтобы пытаться нарезать строки (что, как вы указали, не всегда работало).
1

Вот реализация прототипа 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

  • 0
    По сути, это то же самое, что и верхний ответ , за исключением некоторых исключений, просто поместите в String.prototype.
  • 0
    @Rup Это полезно для анализа любого строкового запроса, а не только в URL. например, Oauth2 возвращает ответ токена в виде строки запроса, этот прототип String будет полезен для анализа, наиболее важным является [\\?&]* вместо [\\?&] в RegExp, для анализа строки запроса, начинающейся с новой строки
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"];
  • 0
    Это похоже на четвертый ответ , хотя с меньшим количеством побега, и вы не принимаете ?key параметры, как это (хотя вы их больше не видите). Я не уверен, что вам нужен параметр i в параметрах регулярного выражения, и вы работаете со всем href, а не только с частью поиска, которая кажется странной, но это не должно иметь никакого значения.
  • 0
    @Rup Привет, Спасибо за ваш комментарий - я не вижу сходства ... Он использует decodeURIComponent который будет отлично работать, но если мы попробуем его с символами ударения - в некоторых случаях это не удается (в основном FF) Мой ответ Как вы можете see - это простое и быстрое решение, которое подойдет большинству программистов, которым необходимо быстрое решение для извлечения переменных строки запроса. Добавление i (нечувствительность к регистру) немного более гибко, но может быть удалено, я согласен.
1

Это не сработало для меня, я хочу соответствовать ?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;
  }
};
  • 0
    Какой ответ здесь не работает для вас, с этими проблемами? (Это стоило бы прокомментировать сам ответ, и мне было бы интересно узнать тоже.) Что касается вашего решения, похоже, это просто решение с разделением строк, использующее underscore.js? Вы пропускаете вызов decodeURIComponent вероятно.
  • 0
    Хороший улов, я добавил decodeURIComponent (и спецификацию для него). Ответ с наибольшим количеством голосов (2600 баллов за веселый) не работает должным образом: не возвращает null для не найденных параметров и не обнаруживает ?b например, текущий параметр.
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];
}
  • 1
    Это почти совпадает с ответом верхнего регулярного выражения, за исключением того, что вы сопоставляете весь URL-адрес, а не только часть строки запроса, и не удаляете экранирование в результате.
1

Выполнение этого надежно более активно, чем можно подумать вначале.

  • location.search, который используется в других ответах, является хрупким и следует избегать - например, он возвращается пустым, если кто-то прикручивает up и помещает идентификатор #fragment перед строкой ?query.
  • Существует несколько способов, по которым URL-адреса автоматически экранируются в браузера, что делает decodeURIComponent довольно обязательным, в мое мнение.
  • Многие строки запроса генерируются из пользовательского ввода, что означает предположения о содержании 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;
   }

}

  • 2
    Замечательно, хотя большинство ответов здесь касается деления части запроса на параметры, а не извлечения ее из произвольного URL. Большинство из них предполагают, что мы находимся на текущей странице и поэтому просто используем location.search для получения извлекаемой строки.
  • 0
    это не главное, нам нужно извлекать каждую пару параметров запроса как ключ / значение, поддерживая массивы, пустые значения и т. д., кстати, «? hello # haha» не является хорошим поведением, так как #haha обычно ссылается на якорь, который не является частью параметра "hello"
Показать ещё 1 комментарий
1

Смотрите post или используйте это:

<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>
  • 0
    Ваш пример использования - возвращение из готового документа - кажется странным, и AFAICS это никогда не сработает: decode() будет только когда-либо возвращать строку и ваше тройное равенство, сравнивая ее с целым числом. В противном случае кажется аккуратным решением.
  • 0
    ... хотя это то же самое, что решение Энди Э выше.
Показать ещё 1 комментарий
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]);
}
  • 0
    Хэш! = Строка запроса.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню