Есть ли способ получения значений строки запроса без дополнительных модулей через jQuery (или без него)?
Если да, то как? Если нет, есть ли плагин, который может это сделать?
Есть ли способ получения значений строки запроса без дополнительных модулей через jQuery (или без него)?
Если да, то как? Если нет, есть ли плагин, который может это сделать?
Обновление: июнь 2021 г.
Для конкретного случая, когда вам нужны все параметры запроса:
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
Обновление: сентябрь 2018 г.
Вы можете использовать простой URLSearchParams, который имеет достойная (но не полная) поддержка браузера.
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Исходный
Для этого вам не нужен jQuery. Вы можете использовать только чистый JavaScript:
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
Использование:
// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)
ПРИМЕЧАНИЕ. Если параметр присутствует несколько раз (?foo=lorem&foo=ipsum
), вы получите первое значение (lorem
). Для этого нет стандарта, и способы использования различаются, см., Например, этот вопрос: Авторитетное положение повторяющихся ключей запроса HTTP GET.
ПРИМЕЧАНИЕ. Функция чувствительна к регистру. Если вы предпочитаете имя параметра без учета регистра, добавьте модификатор i в RegExp
Это обновление основано на новых спецификациях URLSearchParams для достижения тот же результат более лаконично. См. Ответ под названием URLSearchParams ниже.
Некоторые из размещенных здесь решений неэффективны. Повторять поиск по регулярному выражению каждый раз, когда скрипту требуется доступ к параметру, совершенно не нужно, достаточно одной единственной функции для разделения параметров на объект стиля ассоциативного массива. Если вы не работаете с API истории HTML 5, это необходимо только один раз при загрузке страницы. Другие предложения здесь также не могут правильно декодировать URL-адрес.
var urlParams;
(window.onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
Пример строки запроса:
?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty
Результат:
urlParams = {
enc: " Hello ",
i: "main",
mode: "front",
sid: "de8d49b78a85a322c4155015fdce22c4",
empty: ""
}
alert(urlParams["mode"]);
// -> "front"
alert("empty" in urlParams);
// -> true
Это можно легко улучшить для обработки строк запроса в стиле массива. Примером этого является здесь, но поскольку параметры стиля массива не определены в RFC 3986 Я не буду засорять этот ответ исходным кодом. Для тех, кто интересуется «загрязненной» версией, посмотрите ответ Кэмпбельна ниже.
Кроме того, как указано в комментариях, ;
является допустимым разделителем для пар key=value
. Потребовалось бы более сложное регулярное выражение для обработки ;
или &
, что, я думаю, не нужно, потому что ;
используется редко, и я бы сказал, что даже маловероятно, что будут использоваться оба. Если вам нужно поддерживать ;
вместо &
, просто поменяйте их местами в регулярном выражении.
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>
Намного проще!
Новой возможностью будет извлекать повторяющиеся параметры, как показано ниже
myparam=1&myparam=2
. спецификации не существует, однако большинство текущих подходов следуют за генерацией массива.
myparam = ["1", "2"]
Итак, вот подход к управлению этим:
let urlParams = {};
(window.onpopstate = function () {
let match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) {
return decodeURIComponent(s.replace(pl, " "));
},
query = window.location.search.substring(1);
while (match = search.exec(query)) {
if (decode(match[1]) in urlParams) {
if (!Array.isArray(urlParams[decode(match[1])])) {
urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
}
urlParams[decode(match[1])].push(decode(match[2]));
} else {
urlParams[decode(match[1])] = decode(match[2]);
}
}
})();
let parameterKey = decode(match[1]); let parameterValue = decode(match[2]);
?
- person mihca; 07.07.2021
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;
}, {}
)
: {}
};
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's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object
//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue¶m2=val"
//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));
Код подготовки: объявление методов
var qs = window.GetQueryString(query);
var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];
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
Улучшенная версия ответа Артема Баргера:
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/
Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ и Chrome 49+ поддерживают API URLSearchParams:
Для стабильных версий существует предложенный Google URLSearchParams. IE.
Он не стандартизирован W3C, но это уровень жизни по оценке WhatWG.
Вы можете использовать его на location
:
const params = new URLSearchParams(location.search);
or
const params = (new URL(location)).searchParams;
Или, конечно, по любому URL:
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
Вы также можете получить параметры, используя сокращенное свойство .searchParams
в объекте URL, например:
const params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2"
Вы читаете / устанавливаете параметры через get(KEY)
, set(KEY, VALUE)
, append(KEY, VALUE)
API. Вы также можете перебирать все значения for (let p of params) {}
.
эталонная реализация и образец страницы доступны для аудита и тестирования.
Еще одна рекомендация. Плагин Purl позволяет получать все части URL, включая привязку, хост и т. Д. .
Его можно использовать с jQuery или без него.
Использование очень простое и крутое:
var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'
Однако с 11 ноября 2014 г. Purl больше не поддерживается, и автор рекомендует вместо него использовать URI.js. Плагин jQuery отличается тем, что он фокусируется на элементах - для использования со строками просто используйте URI
напрямую, с jQuery или без него. Подобный код будет выглядеть так, более подробные документы здесь:
var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
Быстрое полное решение, которое обрабатывает многозначные ключи и закодированные символы.
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})
//using ES6 (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})
Multi-lined:
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
var s = item.split("="),
k = s[0],
v = s[1] && decodeURIComponent(s[1]); // null-coalescing / short-circuit
//(k in qd) ? qd[k].push(v) : qd[k] = [v]
(qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})
Что это за код ...
"объединение нулей", оценка короткого замыкания
ES6 Деструктурирование назначений, Стрелочные функции, Строки шаблона
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
> qd.a[1] // "5"
> qd["a"][1] // "5"
Для доступа к разным частям URL используйте location.(search|hash)
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined
Простая проверка ключей (item in dict) ? dict.item.push(val) : dict.item = [val]
var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
qd.key[index]
или qd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]
Используйте decodeURIComponent()
для второго или обоих разделений.
var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})
Example:
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"] // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]
* !!! Обратите внимание, что decodeURIComponent(undefined)
возвращает строку "undefined"
. Решение заключается в простом использовании &&
, который гарантирует, что decodeURIComponent()
не вызывается для неопределенных значений. (См. «полное решение» вверху.)
v = v && decodeURIComponent(v);
Если строка запроса пуста (location.search == ""
), результат несколько вводит в заблуждение qd == {"": undefined}
. Предлагается проверить строку запроса перед запуском функции синтаксического анализа, например:
if (location.search) location.search.substr(1).split("&").forEach(...)
У Roshambo на snipplr.com есть простой скрипт для достижения этой цели, описанный в Получить параметры URL с помощью jQuery | Улучшено. С его скриптом вы также легко можете выбрать только те параметры, которые вам нужны.
Вот суть:
$.urlParam = function(name, url) {
if (!url) {
url = window.location.href;
}
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
if (!results) {
return undefined;
}
return results[1] || undefined;
}
Затем просто получите свои параметры из строки запроса.
Итак, если строка URL / запроса была xyz.com/index.html?lang=de
.
Просто позвоните var langval = $.urlParam('lang');
, и все готово.
У UZBEKJON есть отличная запись в блоге по этому поводу: Получить параметры и значения URL с помощью jQuery.
Если вы используете jQuery, вы можете использовать библиотеку, например jQuery BBQ: Back Button & Query Библиотека.
... jQuery BBQ предоставляет полный
.deparam()
метод, а также управление состоянием хеширования, а также служебные методы синтаксического анализа и слияния фрагментов / запросов.
Изменить: добавление примера Deparam:
var DeparamExample = function() {
var params = $.deparam.querystring();
//nameofparam is the name of a param from url
//code below will get param if ajax refresh with hash
if (typeof params.nameofparam == 'undefined') {
params = jQuery.deparam.fragment(window.location.href);
}
if (typeof params.nameofparam != 'undefined') {
var paramValue = params.nameofparam.toString();
}
};
Если вы хотите использовать простой JavaScript, вы можете использовать ...
var getParamValue = (function() {
var params;
var resetParams = function() {
var query = window.location.search;
var regex = /[?&;](.+?)=([^&;]+)/g;
var match;
params = {};
if (query) {
while (match = regex.exec(query)) {
params[match[1]] = decodeURIComponent(match[2]);
}
}
};
window.addEventListener
&& window.addEventListener('popstate', resetParams);
resetParams();
return function(param) {
return params.hasOwnProperty(param) ? params[param] : null;
}
})();
Из-за нового API истории HTML и, в частности, history.pushState()
и history.replaceState()
, URL-адрес может измениться, что сделает недействительным кеш параметров и их значений.
Эта версия будет обновлять свой внутренний кеш параметров каждый раз при изменении истории.
Просто используйте два разделения:
function get(n) {
var half = location.search.split(n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}
Я читал все предыдущие и более полные ответы. Но я считаю, что это самый простой и быстрый способ. Вы можете проверить это в тесте jsPerf.
Чтобы решить проблему в комментарии Рупа, добавьте условное разделение, изменив первую строку на две ниже. Но абсолютная точность означает, что теперь он медленнее, чем регулярное выражение (см. jsPerf).
function get(n) {
var half = location.search.split('&' + n + '=')[1];
if (!half) half = location.search.split('?' + n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}
Так что, если вы знаете, что не столкнетесь с встречным делом Рупа, это победит. В противном случае regexp.
Или, если у вас есть контроль над строкой запроса и вы можете гарантировать, что значение, которое вы пытаетесь получить, никогда не будет содержать символы в кодировке URL (наличие их в значении было бы плохой идеей), вы можете использовать следующая чуть более упрощенная и читаемая версия 1-го варианта:
function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
Вот моя попытка превратить отличное решение 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');
Лучшее из обоих миров!
Если вы выполняете больше манипуляций с 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
)
Мне нравится решение Райана Фелана. Но я не вижу смысла расширять для этого jQuery? Функциональность jQuery не используется.
С другой стороны, мне нравится встроенная функция в Google Chrome: window.location.getParameter.
Так почему бы не использовать это? Хорошо, в других браузерах этого нет. Итак, давайте создадим эту функцию, если она не существует:
if (!window.location.getParameter ) {
window.location.getParameter = function(key) {
function parseParams() {
var params = {},
e,
a = /\+/g, // Regex for replacing addition symbol with a space
r = /([^&=]+)=?([^&]*)/g,
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
q = window.location.search.substring(1);
while (e = r.exec(q))
params[d(e[1])] = d(e[2]);
return params;
}
if (!this.queryStringParams)
this.queryStringParams = parseParams();
return this.queryStringParams[key];
};
}
Эта функция в большей или меньшей степени принадлежит Райану Фелану, но она имеет другую оболочку: ясное имя и отсутствие зависимостей от других библиотек javascript. Подробнее об этой функции в моем блоге.
Сделайте это простым в простом коде 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');
Вот быстрый способ получить объект, похожий на массив 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"
}
Все это отличные ответы, но мне нужно было что-то более надежное, и я подумал, что вам всем может понравиться то, что я создал.
Это простой библиотечный метод, который выполняет анализ и управление параметрами URL. Статический метод имеет следующие подметоды, которые можно вызывать по URL-адресу:
Пример:
URLParser(url).getParam('myparam1')
var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";
function URLParser(u){
var path="",query="",hash="",params;
if(u.indexOf("#") > 0){
hash = u.substr(u.indexOf("#") + 1);
u = u.substr(0 , u.indexOf("#"));
}
if(u.indexOf("?") > 0){
path = u.substr(0 , u.indexOf("?"));
query = u.substr(u.indexOf("?") + 1);
params= query.split('&');
}else
path = u;
return {
getHost: function(){
var hostexp = /\/\/([\w.-]*)/;
var match = hostexp.exec(path);
if (match != null && match.length > 1)
return match[1];
return "";
},
getPath: function(){
var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
var match = pathexp.exec(path);
if (match != null && match.length > 1)
return match[1];
return "";
},
getHash: function(){
return hash;
},
getParams: function(){
return params
},
getQuery: function(){
return query;
},
setHash: function(value){
if(query.length > 0)
query = "?" + query;
if(value.length > 0)
query = query + "#" + value;
return path + query;
},
setParam: function(name, value){
if(!params){
params= new Array();
}
params.push(name + '=' + value);
for (var i = 0; i < params.length; i++) {
if(query.length > 0)
query += "&";
query += params[i];
}
if(query.length > 0)
query = "?" + query;
if(hash.length > 0)
query = query + "#" + hash;
return path + query;
},
getParam: function(name){
if(params){
for (var i = 0; i < params.length; i++) {
var pair = params[i].split('=');
if (decodeURIComponent(pair[0]) == name)
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', name);
},
hasParam: function(name){
if(params){
for (var i = 0; i < params.length; i++) {
var pair = params[i].split('=');
if (decodeURIComponent(pair[0]) == name)
return true;
}
}
console.log('Query variable %s not found', name);
},
removeParam: function(name){
query = "";
if(params){
var newparams = new Array();
for (var i = 0;i < params.length;i++) {
var pair = params[i].split('=');
if (decodeURIComponent(pair[0]) != name)
newparams .push(params[i]);
}
params = newparams;
for (var i = 0; i < params.length; i++) {
if(query.length > 0)
query += "&";
query += params[i];
}
}
if(query.length > 0)
query = "?" + query;
if(hash.length > 0)
query = query + "#" + hash;
return path + query;
},
}
}
document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');
document.write(url + '<br>');
// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');
// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');
// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');
// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');
// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');
// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');
Из MDN:
function loadPageVar (sVar) {
return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
alert(loadPageVar("name"));
Код гольф:
var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
var s = a[i].split("=");
a[i] = a[unescape(s[0])] = unescape(s[1]);
}
Покажи это!
for (i in a) {
document.write(i + ":" + a[i] + "<br/>");
};
На моем Mac: отображается test.htm?i=can&has=cheezburger
0:can
1:cheezburger
i:can
has:cheezburger
Я часто использую регулярные выражения, но не для этого.
Мне кажется проще и эффективнее прочитать строку запроса один раз в моем приложении и построить объект из всех пар ключ / значение, например:
var search = function() {
var s = window.location.search.substr(1),
p = s.split(/\&/), l = p.length, kv, r = {};
if (l === 0) {return false;}
while (l--) {
kv = p[l].split(/\=/);
r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
}
return r;
}();
Для URL типа http://domain.com?param1=val1¶m2=val2
вы можете получить их значение позже в своем коде как search.param1
и search.param2
.
Метод jQuery Roshambo не заботился о декодировании URL
http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/
Просто добавил эту возможность также при добавлении в оператор возврата
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
Теперь вы можете найти обновленную суть:
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}
Мне нравится этот (взято из jquery -howto.blogspot.co.uk):
// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
У меня отлично работает.
Вот мое изменение этого отличного ответа - с добавленной возможностью анализировать строки запроса с ключами без значений.
var url = 'http://sb.com/reg/step1?param';
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i) {
var p=a[i].split('=', 2);
if (p[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
b[p[0]] = p[1];
}
return b;
})((url.split('?'))[1].split('&'));
ВАЖНО! Параметр для этой функции в последней строке отличается. Это просто пример того, как можно передать ему произвольный URL. Вы можете использовать последнюю строку из ответа Бруно для анализа текущего URL-адреса.
Так что же именно изменилось? С url http://sb.com/reg/step1?param=
результаты будут такими же. Но с url http://sb.com/reg/step1?param
решение Бруно возвращает объект без ключей, а мое возвращает объект со значением ключа param
и undefined
.
Мне нужен объект из строки запроса, а я ненавижу много кода. Возможно, он не самый надежный во вселенной, но это всего лишь несколько строк кода.
var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
q[i.split('=')[0]]=i.split('=')[1];
});
URL-адрес типа this.htm?hello=world&foo=bar
создаст:
{hello:'world', foo:'bar'}
decodeURIComponent
, но он действительно очень удобочитаем (и, кстати, похож на мою первую идею). Кроме того, _2_ является избыточным, но мне нужно поджарить более высокую производительность, чем разделение строки из 10 символов дважды.
- person Rup; 15.02.2013
Вот расширенная версия связанной Энди Е версии «Обработка строк запроса в стиле массива». Исправлена ошибка (?key=1&key[]=2&key[]=3
; 1
потеряна и заменена на [2,3]
), сделано несколько незначительных улучшений производительности (повторное декодирование значений, пересчет позиции "[" и т. Д.) И добавлен ряд улучшений (функционализация, поддержка ?key=1&key=2
, поддержка разделителей ;
). Я оставил переменные досадно короткими, но добавил множество комментариев, чтобы их можно было читать (о, и я повторно использовал v
в локальных функциях, извините, если это сбивает с толку;).
Он будет обрабатывать следующую строку запроса ...
? test = Hello & person = neek & person [] = jeff & person [] = jim & person [extra] = john & test3 & nocache = 1398914891264
... превращая его в объект, который выглядит как ...
{
"test": "Hello",
"person": {
"0": "neek",
"1": "jeff",
"2": "jim",
"length": 3,
"extra": "john"
},
"test3": "",
"nocache": "1398914891264"
}
Как вы можете видеть выше, эта версия обрабатывает некоторую меру «искаженных» массивов, то есть - person=neek&person[]=jeff&person[]=jim
или person=neek&person=jeff&person=jim
, поскольку ключ идентифицируем и действителен (по крайней мере, в NameValueCollection.Add):
Если указанный ключ уже существует в целевом экземпляре NameValueCollection, указанное значение добавляется к существующему списку значений, разделенных запятыми, в форме «значение1, значение2, значение3».
Кажется, что жюри несколько не согласны с повторяющимися ключами, так как там нет спец. В этом случае несколько ключей хранятся как (поддельный) массив. Но учтите, что я не обрабатываю значения, основанные на запятых, в массивы.
Код:
getQueryStringKey = function(key) {
return getQueryStringAsObject()[key];
};
getQueryStringAsObject = function() {
var b, cv, e, k, ma, sk, v, r = {},
d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter: /([^&=]+)=?([^&]*)/g
;
//# ma(make array) out of the v(alue)
ma = function(v) {
//# If the passed v(alue) hasn't been setup as an object
if (typeof v != "object") {
//# Grab the cv(current value) then setup the v(alue) as an object
cv = v;
v = {};
v.length = 0;
//# If there was a cv(current value), .push it into the new v(alue)'s array
//# NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
if (cv) { Array.prototype.push.call(v, cv); }
}
return v;
};
//# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
//# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry)
b = e[1].indexOf("[");
v = d(e[2]);
//# As long as this is NOT a hash[]-style key-value e(ntry)
if (b < 0) { //# b == "-1"
//# d(ecode) the simple k(ey)
k = d(e[1]);
//# If the k(ey) already exists
if (r[k]) {
//# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
r[k] = ma(r[k]);
Array.prototype.push.call(r[k], v);
}
//# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
else {
r[k] = v;
}
}
//# Else we've got ourselves a hash[]-style key-value e(ntry)
else {
//# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
k = d(e[1].slice(0, b));
sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));
//# ma(make array) out of the k(ey)
r[k] = ma(r[k]);
//# If we have a sk(sub-key), plug the v(alue) into it
if (sk) { r[k][sk] = v; }
//# Else .push the v(alue) into the k(ey)'s array
else { Array.prototype.push.call(r[k], v); }
}
}
//# Return the r(eturn value)
return r;
};
Это функция, которую я создал некоторое время назад, и мне она вполне довольна. Регистр не учитывается, что очень удобно. Кроме того, если запрошенный QS не существует, он просто возвращает пустую строку.
Я использую сжатую версию этого. Я отправляю сообщения в несжатом виде для новичков, чтобы лучше объяснить, что происходит.
Я уверен, что это можно было бы оптимизировать или сделать по-другому, чтобы работать быстрее, но он всегда отлично работал с тем, что мне нужно.
Наслаждаться.
function getQSP(sName, sURL) {
var theItmToRtn = "";
var theSrchStrg = location.search;
if (sURL) theSrchStrg = sURL;
var sOrig = theSrchStrg;
theSrchStrg = theSrchStrg.toUpperCase();
sName = sName.toUpperCase();
theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
var theSrchToken = "&" + sName + "=";
if (theSrchStrg.indexOf(theSrchToken) != -1) {
var theSrchTokenLth = theSrchToken.length;
var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
}
return unescape(theItmToRtn);
}
Мы только что выпустили arg.js, проект, направленный на решение этой проблемы раз и навсегда. Традиционно это было так сложно, но теперь вы можете:
var name = Arg.get("name");
или получить всю партию:
var params = Arg.all();
и если вас волнует разница между ?query=true
и #hash=true
, вы можете использовать методы Arg.query()
и Arg.hash()
.
Проблема с верхним ответом на этот вопрос заключается в том, что он не поддерживает параметры, помещенные после #, но иногда необходимо также получить это значение.
Я изменил ответ, чтобы он также анализировал полную строку запроса со знаком решетки:
var getQueryStringData = function(name) {
var result = null;
var regexS = "[\\?&#]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec('?' + window.location.href.split('?')[1]);
if (results != null) {
result = decodeURIComponent(results[1].replace(/\+/g, " "));
}
return result;
};
Если вы используете 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"
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');
?stringtext&stringword=foo
на _2_, прежде чем вернуться это, если не заменить плюсы сначала пробелами, как и во всех других решениях здесь. Некоторые другие решения также предпочитают ограничение в 2 части на разбиении _3_, чтобы быть более снисходительным при приеме ввода.
- person Rup; 06.02.2013
Этот отлично работает. Регулярные выражения в некоторых других ответах приводят к ненужным накладным расходам.
function getQuerystring(key) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == key) {
return pair[1];
}
}
}
взято из здесь
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
?param=value
)?param
: без знака равенства или значения)?param=
: знак равенства, но без значения справа от знака равенства)?param=1¶m=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"]
Я разработал небольшую библиотеку, используя перечисленные здесь методы, чтобы создать простое в использовании решение любых проблем; Он может быть найден здесь:
https://github.com/Nijikokun/query-js
Использование
Получение определенного параметра / ключа:
query.get('param');
Использование построителя для получения всего объекта:
var storage = query.build();
console.log(storage.param);
и многое другое ... проверьте ссылку на github для получения дополнительных примеров.
Возможности
#hello?page=3
user[]="jim"&user[]="bob"
&&
name&hello="world"
param=1¶m=2
4kb
Однострочный запрос:
var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
(location.search.match(new RegExp('kiosk_modeasdf' + "=(.*?)($|\&)", "i")) || [])[1]
вернет _2_
- person Brad Koch; 29.01.2013
Вот моя версия кода синтаксического анализа строки запроса на GitHub а>.
Он "снабжен префиксом" jquery. *, Но сама функция синтаксического анализа не использует jQuery. Это довольно быстро, но все же открыто для нескольких простых оптимизаций производительности.
Также он поддерживает кодировку списков и хэш-таблиц в URL, например:
arr[]=10&arr[]=20&arr[]=100
or
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;
}
Очень легкий метод 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)
Я бы предпочел использовать 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;
}
Вот что я использую:
/**
* 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.
Для тех, кто хочет короткий метод (с ограничениями):
location.search.split('myParameter=')[1]
Получить все параметры строки запроса, включая значения флажков (массивы).
Учитывая правильное и нормальное использование параметров 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--, производительность должна быть очень хорошей.
Поддержка:
Примечания:
Он не поддерживает массивы объектов (ключ [ключ] = значение)
Если пробел +, он остается +.
При необходимости добавьте .replace(/\+/g, " ")
.
Использование:
qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')
Возврат:
{
"empty": "",
"key": "value",
"array": [
"1",
"2"
]
}
Демо:
Информация
Если вы чего-то не понимаете или не можете прочитать функцию, просто спросите. Я счастлив объяснить, что я здесь сделал.
Если вы считаете, что функция нечитаема и не обслуживается, я буду рад переписать функцию для вас, но учтите, что сокращенные и побитовые операторы всегда быстрее, чем стандартный синтаксис (возможно, прочитайте о сокращениях и побитовых операторах в ECMA-262 закажите или воспользуйтесь любимой поисковой системой). Переписывание кода с использованием стандартного читаемого синтаксиса означает потерю производительности.
function getUrlVar(key){
var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search);
return result && unescape(result[1]) || "";
}
https://gist.github.com/1771618
Следующий код создаст объект, который имеет два метода:
getValue
: получить значение определенного параметра.isKeyExist
: Проверить, существует ли конкретный параметр
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;
}
};
Тогда назовите это так:
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(/(&|;|$)/))) : "";
};
Вы также можете использовать это для файлов cookie:
if(location.search != "") location.search.getValueByKey("id");
Это работает только для строк с _4 _... не будет работать с объектами / массивами.
if(navigator.cookieEnabled) document.cookie.getValueByKey("username");
Если вы не хотите использовать String.prototype ... переместите его в функцию и передайте строку в качестве аргумента.
Вот мой взгляд на это. Эта первая функция декодирует строку URL в объект пар имя / значение:
И в качестве дополнительного бонуса, если вы измените некоторые из аргументов, вы можете использовать эту вторую функцию, чтобы вернуть массив аргументов в строку 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;
};
Я использовал этот код (JavaScript), чтобы получить то, что передается через 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;
};
Затем, чтобы присвоить значение переменной, вам нужно только указать, какой параметр вы хотите получить, т.е. если URL-адрес example.com/?I=1&p=2&f=3
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Вы можете сделать это, чтобы получить значения:
тогда значения будут такими:
var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];
Следующая функция возвращает объектную версию вашего queryString. Вы можете просто написать
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
и 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
в параметре.
getI = 1, getP = 2 and getF = 3
И чтобы использовать эту функцию, вы можете написать
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;
}
Эта функция преобразует строку запроса в объект, подобный JSON, а также обрабатывает параметры без значений и с несколькими значениями:
var obj= getQueryStringObject();
alert(obj.key1);
Мы выполняем проверку undefined
на parameter[1]
, потому что decodeURIComponent
возвращает строку «undefined», если переменная равна undefined
, а это неверно.
"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;
}
Использование:
Я сделал небольшую библиотеку URL-адресов для своих нужд здесь: https://github.com/Mikhus/jsurl
"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
Это более распространенный способ манипулирования URL-адресами в JavaScript. Между тем, это действительно легкий (уменьшенный и сжатый с помощью gzip ‹1 КБ) и имеет очень простой и чистый API. И для работы ему не нужна никакая другая библиотека.
Что касается начального вопроса, сделать это очень просто:
Я взял этот ответ и добавил поддержку для необязательной передачи URL-адреса как параметр; возвращается к window.location.search. Очевидно, это полезно для получения параметров строки запроса из URL-адресов, которые не являются текущей страницей:
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);
Если у вас есть Underscore.js или lodash, быстрый и грязный способ сделать это:
(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);
Для этого есть симпатичная маленькая
_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
утилита с классным шугарингом:
_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
_.chain(document.location.search.slice(1).split('&')).invoke('split', '=').object().value()
не вернет 123, потому что он берет строку _2_ из _3_, а _4_ вернет _5_, а не просто _6_, если это не последнее значение в строке, и т. Д. Вы также не декодируетеUriComponent извлеченные значения. К тому же я не смог попробовать вашу демоверсию - меня перенаправили на сайт ставок ??
- person David Fregoli; 07.01.2014
Ознакомьтесь с другими примерами и загрузите их здесь: https://github.com/websanova/js-url#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)
Это самая простая и небольшая функция JavaScript для получения значения параметра int и String из URL
Источник и ДЕМО: http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html
/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */
function getParameterint(param) {
var val = document.URL;
var url = val.substr(val.indexOf(param))
var n=parseInt(url.replace(param+"=",""));
alert(n);
}
getParameteraint("page");
getParameteraint("pagee");
/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
var val = document.URL;
var url = val.substr(val.indexOf(param))
var n=url.replace(param+"=","");
alert(n);
}
getParameterstr("str");
Я считаю, что это точный и краткий способ добиться этого (изменено из http://css-tricks.com/snippets/javascript/get-url-variables/):
В исходном коде Node.js есть надежная реализация
https://github.com/joyent/node/blob/master/lib/querystring.js
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.
}
Также QS TJ выполняет парсинг вложенных параметров
https://github.com/visionmedia/node-querystring < / а>
Есть много решений для получения значений запроса URI, я предпочитаю это, потому что оно короткое и отлично работает:
Простое решение с простым JavaScript и регулярными выражениями:
function get(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
encodeURIComponent
, plusses-to-space)
- person Rup; 09.09.2013
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"));
}
Если вам нужны параметры в стиле массива, URL.js поддерживает произвольно вложенные параметры в стиле массива, а также строку указатели (карты). Он также обрабатывает декодирование URL-адресов.
Если вы не хотите использовать библиотеку JavaScript, вы можете использовать строковые функции JavaScript для анализа
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'
}
. Сохраните этот код во внешнем файле .js, и вы можете использовать его снова и снова в разных проектах.
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'
}
Это очень простой способ получить значение параметра (строку запроса)
// 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;
}
Используйте функцию 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)}
Он не обрабатывает списки значений, такие как ?a[]=1&a[]2
data = {};
$.each(
location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
return kvpairs.split('=')
}),
function(i,values) {
data[values.shift()] = values.join('=')
}
);
Использовать:
decodeURIComponent
- person Rup; 06.06.2014
location.search.substr(1).split('&').filter(Boolean).map(...
- person Damien; 06.06.2014
$.map(queryhash, function(v,k){ return [k,v].join('=')}).join('&')
не может _2_, поскольку в этот момент это всегда будет строка, а не целое число, а также _3_ из _4_ тоже не имеет смысла. Откуда вы взяли этот код?
- person Damien; 06.06.2014
Пожалуйста, проверьте и дайте мне знать свои комментарии. Также см. Как получить значение строки запроса. с помощью jQuery.
$(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;
}
Я рекомендую Dar Lessons как хороший плагин. Я работал с ним долгое время. Вы также можете использовать следующий код. Просто поместите
$(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;
}
перед document.ready и поместите приведенный ниже код в начало document.ready. После этого кода вы можете использовать _2_ для любого объекта запроса, который у вас есть
Это проанализирует массивы переменных AND из строки URL. Он не использует ни регулярное выражение, ни какую-либо внешнюю библиотеку.
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;
}
Пример:
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"
Вы можете использовать элемент A
для синтаксического анализа URI из строки на его location
-подобные компоненты (например, чтобы избавиться от #...
):
var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });
См. Это сообщение или воспользуйтесь этим:
var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
У меня это не сработало, я хочу сопоставить
<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>
, поскольку присутствует параметр _2_, а не сопоставить _3_ в качестве параметра _4_, вот мое решение.
<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>
Вот реализация ?b
прототипа:
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;
}
};
decodeURIComponent
(и спецификацию для него). Ответ, получивший наибольшее количество голосов (2600 баллов за jolly) работает не так, как ожидалось: не возвращает _2_ для ненайденных параметров и не обнаруживает _3_, например, существующий параметр.
- person Rup; 13.02.2014
Пример вызова:
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];
}
}
str
может быть строкой запроса или URL
var status = str.getParam("status")
Сделать это надежно - сложнее, чем может показаться на первый взгляд.
[\\?&]*
, чтобы получить извлекаемую строку.
- person krisrak; 19.04.2014
Чтобы решить эту проблему, вот настраиваемый API с полезной дозой защитное программирование. Обратите внимание, что его можно уменьшить вдвое, если вы хотите жестко запрограммировать некоторые переменные, или если входные данные никогда не могут включать hasOwnProperty
и т. Д.
decodeURIComponent
в значительной степени обязательным.Версия 1: возвращает объект данных с именами и значениями для каждого параметра. Он эффективно дедуплицирует их и всегда соблюдает первое, найденное слева направо.
Версия 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 = {};
// 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;
}
}
location.search
, который используется в других ответах, является хрупким, и его следует избегать - например, он возвращает пустой, если кто-то ошибается и помещает идентификатор #fragment
перед строкой ?query
.
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;
}
}
Вот пример 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;
};
Быстро, легко и быстро:
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];
}
Функция:
Использование:
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;
}
Я использую плагин getUrlParam, описанный в jQuery-Plugin - getUrlParam (версия 2).
var varRequest = getUrlVar()["theUrlVarName"];
?key
, который будет отлично работать, но если мы попробуем его с акцентными символами - в некоторых случаях это не удастся (в основном FF) Мой ответ Как вы можете see - это просто и быстро, что подойдет большинству программистов, которым нужно быстрое решение для извлечения переменных строки запроса. Добавление i (нечувствительность к регистру) немного более гибкое, но может быть удалено, я согласен.
- person Rup; 14.04.2014