Как я могу получить значения строки запроса в JavaScript?
Существует ли способ извлечения значений строки запроса через jQuery (или без него) без плагинов?
Если так, то как? Если нет, есть ли плагин, который может это сделать?
73 ответа
Обновление: сентябрь-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 " ниже.
Некоторые из размещенных здесь решений неэффективны. Повторять поиск по регулярному выражению каждый раз, когда скрипту необходим доступ к параметру, совершенно не нужно, достаточно одной функции для разделения параметров на объект стиля ассоциативного массива. Если вы не работаете с HTML 5 History API, это необходимо сделать только один раз для каждой загрузки страницы. Другие предложения здесь также не в состоянии правильно декодировать URL.
var urlParams;
(window. onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window. location.search. substring(1);
urlParams = {};
while (match = search. exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();Пример строки запроса:
?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty
Результат:
urlParams = {
enc: " Hello ",
i: "main",
mode: "front",
sid: "de8d49b78a85a322c4155015fdce22c4",
empty: ""
}
alert(urlParams["mode"]);
// -> "front"
alert("empty" in urlParams);
// -> true
Это может быть легко улучшено для обработки строк запроса в стиле массива. Пример этого здесь, но так как параметры стиля массива не определены в RFC 3986, я не буду загрязнять этот ответ исходным кодом. Для тех, кто заинтересован в "загрязненной" версии, посмотрите ответ Кэмпбелна ниже.
Кроме того, как указано в комментариях, ; является юридическим разделителем для key=value пар. Это потребовало бы более сложного регулярного выражения для обработки ; или же & что я считаю ненужным, потому что редко ; используется, и я бы сказал, даже более маловероятно, что оба будут использованы. Если вам нужно поддержать ; вместо & Просто поменяйте их в регулярных выражениях.
Если вы используете серверный язык предварительной обработки, вы можете использовать его встроенные функции JSON, чтобы выполнить тяжелую работу за вас. Например, в PHP вы можете написать:
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>Намного проще!
ES2015 (ES6)
getQueryStringParams = query => {
return query
? (/^[?#]/.test(query) ? query.slice(1) : query)
.split('&')
.reduce((params, param) => {
let [key, value] = param.split('=');
params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
return params;
}, {}
)
: {}
};
Без jQuery
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=', 2);
if (p.length == 1)
b[p[0]] = "";
else
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
С URL-адресом, как ?topic=123&name=query+string, вернется следующее:
qs["topic"]; // 123
qs["name"]; // query string
qs["nothere"]; // undefined (object)
Метод Google
Срывая код Google, я нашел метод, который они используют: getUrlParameters
function (b) {
var c = typeof b === "undefined";
if (a !== h && c) return a;
for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
var l = b[f][p]("=");
if (l !== -1) {
var q = b[f][I](0, l),
l = b[f][I](l + 1),
l = l[Ca](/\+/g, " ");
try {
d[q] = e(l)
} catch (A) {}
}
}
c && (a = d);
return d
}
Это запутано, но понятно. Это не работает, потому что некоторые переменные не определены.
Они начинают искать параметры в URL из ? а также из хеша #, Затем для каждого параметра они разделяются на знак равенства b[f][p]("=") (который выглядит как indexOf, они используют положение символа, чтобы получить ключ / значение). Разделив его, они проверяют, имеет ли параметр значение или нет, если он имеет, то сохраняют значение dиначе они просто продолжат.
В конце концов объект d возвращается, обрабатывая выход и + знак. Этот объект похож на мой, у него такое же поведение.
Мой метод как плагин jQuery
(function($) {
$.QueryString = (function(paramsArray) {
let params = {};
for (let i = 0; i < paramsArray.length; ++i)
{
let param = paramsArray[i]
.split('=', 2);
if (param.length !== 2)
continue;
params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
}
return params;
})(window.location.search.substr(1).split('&'))
})(jQuery);
использование
//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"
//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }
//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object
//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue¶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));
Тест производительности (метод разделения на метод регулярных выражений) ( 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% медленнее
URLSearchParams
Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ и Chrome 49+ поддерживают API URLSearchParams:
Для стабильных версий IE есть предложенный Google полифилл 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"
Вы читаете / устанавливаете параметры через get(KEY), set(KEY, VALUE), append(KEY, VALUE) API. Вы также можете перебрать все значения for (let p of params) {},
Ссылочная реализация и пример страницы доступны для аудита и тестирования.
Улучшенная версия ответа Артема Баргера:
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/
Просто еще одна рекомендация. Плагин 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)})
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
var s = item.split("="),
k = s[0],
v = s[1] && decodeURIComponent(s[1]); // null-coalescing / short-circuit
//(k in qd) ? qd[k].push(v) : qd[k] = [v]
(qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})
Что это за код?
"нуль-коалесценция", оценка короткого замыкания
ES6 Разрушающие присваивания, функции стрелок, строки шаблона
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
> qd.a[1] // "5"
> qd["a"][1] // "5"
Узнайте больше... о решении Vanilla JavaScript.
Для доступа к различным частям URL используйте location.(search|hash)
Самое простое (фиктивное) решение
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
- Правильно обрабатывает пустые ключи.
- Переопределяет мульти-ключи с последним найденным значением.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined
Многозначные ключи
Простая проверка ключа (item in dict) ? dict.item.push(val) : dict.item = [val]
var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
- Теперь вместо этого возвращает массивы.
- Доступ к значениям по
qd.key[index]или жеqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]
Закодированные символы?
использование decodeURIComponent() для второго или обоих расколов.
var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"] // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]
Из комментариев
*!!! Обратите внимание, что decodeURIComponent(undefined) возвращает строку "undefined", Решение заключается в простом использовании &&, который гарантирует, что decodeURIComponent() не вызывается для неопределенных значений. (См. "Полное решение" в верхней части.)
v = v && decodeURIComponent(v);
Если строка запроса пуста (location.search == ""), результат несколько вводит в заблуждение qd == {"": undefined}, Рекомендуется проверить строку запроса перед запуском функции синтаксического анализа likeso:
if (location.search) location.search.substr(1).split("&").forEach(...)
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 & Query Library.
... JQuery BBQ обеспечивает полный
.deparam()метод, наряду с управлением состоянием хеш-функции, а также методами анализа и объединения строк фрагмента / запроса.
Редактировать: Добавление Deparam Пример:
var DeparamExample = function() {
var params = $.deparam.querystring();
//nameofparam is the name of a param from url
//code below will get param if ajax refresh with hash
if (typeof params.nameofparam == 'undefined') {
params = jQuery.deparam.fragment(window.location.href);
}
if (typeof params.nameofparam != 'undefined') {
var paramValue = params.nameofparam.toString();
}
};Если вы хотите просто использовать простой JavaScript, вы можете использовать...
var getParamValue = (function() {
var params;
var resetParams = function() {
var query = window.location.search;
var regex = /[?&;](.+?)=([^&;]+)/g;
var match;
params = {};
if (query) {
while (match = regex.exec(query)) {
params[match[1]] = decodeURIComponent(match[2]);
}
}
};
window.addEventListener
&& window.addEventListener('popstate', resetParams);
resetParams();
return function(param) {
return params.hasOwnProperty(param) ? params[param] : null;
}
})();
Из-за нового API Истории HTML и особенно history.pushState() а также history.replaceState(), URL может измениться, что сделает недействительным кеш параметров и их значений.
Эта версия будет обновлять свой внутренний кэш параметров при каждом изменении истории.
Просто используйте два разбиения:
function get(n) {
var half = location.search.split(n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}
Я читал все предыдущие и более полные ответы. Но я думаю, что это самый простой и быстрый метод. Вы можете проверить в этом тесте jsPerf
Чтобы решить проблему в комментарии Рупа, добавьте условное разбиение, изменив первую строку на две ниже. Но абсолютная точность означает, что теперь она медленнее, чем регулярное выражение (см. JsPerf).
function get(n) {
var half = location.search.split('&' + n + '=')[1];
if (!half) half = location.search.split('?' + n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}
Так что, если вы знаете, что не столкнетесь с контр-кейсом Рупа, это победит. В противном случае, регулярное выражение.
Или, если у вас есть контроль над строкой запроса, и вы можете гарантировать, что значение, которое вы пытаетесь получить, никогда не будет содержать символы в кодировке URL (иметь их в значении было бы плохой идеей) - вы можете использовать следующую немного более упрощенную и читаемую версию 1-го варианта:
function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
Вот мой пример превращения превосходного решения Энди Э в полноценный плагин 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. Подробнее об этой функции в моем блоге.
Вот быстрый способ получить объект, похожий на массив 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"
}
Сохраняйте это простым в простом коде 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');
Из MDN:
function loadPageVar (sVar) {
return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
alert(loadPageVar("name"));
Все это отличные ответы, но мне нужно было что-то более надежное, и я подумал, что вам всем может понравиться то, что я создал.
Это простой библиотечный метод, который выполняет анализ и манипулирование параметрами 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>');
Код гольф:
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,
Метод Roshambo jQuery не заботился о декодировании URL
http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/
Просто добавил эту возможность также при добавлении в операторе возврата
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
Теперь вы можете найти обновленную суть:
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}
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
Вот мое редактирование этого превосходного ответа - с добавленной возможностью анализировать строки запроса с ключами без значений.
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 значение.
Мне нравится этот (взят из 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 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'}
Вот расширенная версия связанной версии "Обрабатывать строки запроса в стиле массива" Энди Е. Исправлена ошибка (?key=1&key[]=2&key[]=3; 1 теряется и заменяется [2,3]), было сделано несколько небольших улучшений производительности (перекодирование значений, пересчет позиции "[" и т. д.) и добавлен ряд улучшений (функционализирован, поддержка ?key=1&key=2, Поддержка для ; разделители). Я оставил переменные раздражающе короткими, но добавил много комментариев, чтобы сделать их читабельными (о, и я использовал повторно v в местных функциях, извините, если это сбивает с толку;).
Он будет обрабатывать следующую строку запроса...
? Тест =Hello& лицо = NEEK и человек []= Джеф & человек []= джим и человек [экстра] = джон &test3& NoCache = 1398914891264
... превращая его в объект, который выглядит как...
{
"test": "Hello",
"person": {
"0": "neek",
"1": "jeff",
"2": "jim",
"length": 3,
"extra": "john"
},
"test3": "",
"nocache": "1398914891264"
}
Как вы можете видеть выше, эта версия обрабатывает некоторую меру "деформированных" массивов, т.е. person=neek&person[]=jeff&person[]=jim или же person=neek&person=jeff&person=jim так как ключ является идентифицируемым и действительным (по крайней мере, в dotNet's NameValueCollection.Add):
Если указанный ключ уже существует в целевом экземпляре NameValueCollection, указанное значение добавляется в существующий список значений, разделенных запятыми, в форме "значение1, значение2, значение3".
Похоже, что присяжные несколько отдают предпочтение повторным клавишам, так как нет никакой спецификации. В этом случае несколько ключей хранятся в виде (поддельного) массива. Но учтите, что я не обрабатываю значения, основанные на запятых, в массивах.
Код:
getQueryStringKey = function(key) {
return getQueryStringAsObject()[key];
};
getQueryStringAsObject = function() {
var b, cv, e, k, ma, sk, v, r = {},
d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter: /([^&=]+)=?([^&]*)/g
;
//# ma(make array) out of the v(alue)
ma = function(v) {
//# If the passed v(alue) hasn't been setup as an object
if (typeof v != "object") {
//# Grab the cv(current value) then setup the v(alue) as an object
cv = v;
v = {};
v.length = 0;
//# If there was a cv(current value), .push it into the new v(alue)'s array
//# NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
if (cv) { Array.prototype.push.call(v, cv); }
}
return v;
};
//# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
//# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry)
b = e[1].indexOf("[");
v = d(e[2]);
//# As long as this is NOT a hash[]-style key-value e(ntry)
if (b < 0) { //# b == "-1"
//# d(ecode) the simple k(ey)
k = d(e[1]);
//# If the k(ey) already exists
if (r[k]) {
//# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
r[k] = ma(r[k]);
Array.prototype.push.call(r[k], v);
}
//# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
else {
r[k] = v;
}
}
//# Else we've got ourselves a hash[]-style key-value e(ntry)
else {
//# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
k = d(e[1].slice(0, b));
sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));
//# ma(make array) out of the k(ey)
r[k] = ma(r[k]);
//# If we have a sk(sub-key), plug the v(alue) into it
if (sk) { r[k][sk] = v; }
//# Else .push the v(alue) into the k(ey)'s array
else { Array.prototype.push.call(r[k], v); }
}
}
//# Return the r(eturn value)
return r;
};
Это функция, которую я создал некоторое время назад, и я вполне доволен. Это не чувствительно к регистру - что удобно. Также, если запрошенный 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);
}
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');
Если вы используете 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 Руководство и документация
Мы только что выпустили 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;
};