Получить параметр URL JQuery или Как получить значения строки запроса в JS
Я видел много примеров jQuery, где размер и имя параметра неизвестны. У моего URL будет только одна строка:
http://example.com?sent=yes
Я просто хочу обнаружить:
- Есть ли
sentсуществовать? - Это равно "да"?
35 ответов
Лучшее решение здесь.
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
};
И вот как вы можете использовать эту функцию, предполагая, что URL,http://dummy.com/?technology=jquery&blog=jquerybyexample,
var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');
Решение с 2018 года
У нас есть: http://example.com/?sent=yes
let searchParams = new URLSearchParams(window.location.search)
Существует ли отправленный?
searchParams.has('sent') // true
Это равно "да"?
let param = searchParams.get('sent')
а затем просто сравните это.
Фрагмент кода jQuery, чтобы получить динамические переменные, хранящиеся в URL-адресе в качестве параметров, и сохранить их в виде переменных JavaScript, готовых для использования с вашими сценариями:
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null) {
return null;
}
return decodeURI(results[1]) || 0;
}
example.com?param1=name¶m2=&id=6
$.urlParam('param1'); // name
$.urlParam('id'); // 6
$.urlParam('param2'); // null
пример params с пробелами
http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));
//output: Gold%20Coast
console.log(decodeURIComponent($.urlParam('city')));
//output: Gold Coast
Я всегда придерживаюсь одной строки. Теперь у params есть переменные:
params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})
многострочный:
var params={};
window.location.search
.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
params[key] = value;
}
);
как функция
function getSearchParams(k){
var p={};
location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
return k?p[k]:p;
}
который вы могли бы использовать как:
getSearchParams() //returns {key1:val1, key2:val2}
или же
getSearchParams("key1") //returns val1
Еще одна альтернативная функция...
function param(name) {
return (location.search.split(name + '=')[1] || '').split('&')[0];
}
С помощью URLSearchParams:
var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));
Может быть, уже слишком поздно. Но этот метод очень прост и прост
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>
<!-- URL: www.example.com/correct/?message=done&year=1990 -->
<script type="text/javascript">
$(function(){
$.url.attr('protocol') // --> Protocol: "http"
$.url.attr('path') // --> host: "www.example.com"
$.url.attr('query') // --> path: "/correct/"
$.url.attr('message') // --> query: "done"
$.url.attr('year') // --> query: "1990"
});
ОБНОВИТЬ
Требуется плагин url: https://plugins.jquery.com/url/
Спасибо -Рипоунет
Или вы можете использовать эту аккуратную маленькую функцию, потому что почему слишком сложные решения?
function getQueryParam(param) {
location.search.substr(1)
.split("&")
.some(function(item) { // returns first occurence and stops
return item.split("=")[0] == param && (param = item.split("=")[1])
})
return param
}
что выглядит еще лучше, когда упрощено и подчеркнуто:
tl; dr однолинейное решение
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
результат: queryDict['sent'] // undefined или 'value'
Но что, если у вас есть закодированные символы или многозначные ключи?
Вам лучше увидеть этот ответ: Как я могу получить значения строки запроса в JavaScript?
Красться пик
"?a=1&b=2&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"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
> queryDict["a"][1] // "5"
> queryDict.a[1] // "5"
Этот простой и работал для меня
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results[1] || 0;
}
так что если ваш URL-адрес http://www.yoursite.com/?city=4
попробуй это
console.log($.urlParam('city'));
Возможно, вы захотите взглянуть на Dentist JS? (отказ от ответственности: я написал код)
код:
document.URL == "http://helloworld.com/quotes?id=1337&author=kelvin&message=hello"
var currentURL = document.URL;
var params = currentURL.extract();
console.log(params.id); // 1337
console.log(params.author) // "kelvin"
console.log(params.message) // "hello"
с помощью Dentist JS вы можете в основном вызывать функцию extract() для всех строк (например, document.URL.extract()), и вы получаете HashMap всех найденных параметров. Это также настраивается для работы с разделителями и все.
Минимизированная версия < 1 КБ
Я надеюсь, это поможет.
<script type="text/javascript">
function getParameters() {
var searchString = window.location.search.substring(1),
params = searchString.split("&"),
hash = {};
if (searchString == "") return {};
for (var i = 0; i < params.length; i++) {
var val = params[i].split("=");
hash[unescape(val[0])] = unescape(val[1]);
}
return hash;
}
$(window).load(function() {
var param = getParameters();
if (typeof param.sent !== "undefined") {
// Do something.
}
});
</script>
function GetRequestParam(param)
{
var res = null;
try{
var qs = decodeURIComponent(window.location.search.substring(1));//get everything after then '?' in URI
var ar = qs.split('&');
$.each(ar, function(a, b){
var kv = b.split('=');
if(param === kv[0]){
res = kv[1];
return false;//break loop
}
});
}catch(e){}
return res;
}Это даст вам хороший объект для работы с
function queryParameters () {
var result = {};
var params = window.location.search.split(/\?|\&/);
params.forEach( function(it) {
if (it) {
var param = it.split("=");
result[param[0]] = param[1];
}
});
return result;
}
А потом;
if (queryParameters().sent === 'yes') { .....
Попробуйте это рабочее демо http://jsfiddle.net/xy7cX/
API:
Это должно помочь :)
код
var url = "http://myurl.com?sent=yes"
var pieces = url.split("?");
alert(pieces[1] + " ===== " + $.inArray("sent=yes", pieces));
Это может быть излишним, но сейчас есть довольно популярная библиотека для анализа URI, которая называется URI.js.
пример
var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackru";
var components = URI.parse(uri);
var query = URI.parseQuery(components['query']);
document.getElementById("result").innerHTML = "URI = " + uri;
document.getElementById("result").innerHTML += "<br>technology = " + query['technology'];
// If you look in your console, you will see that this library generates a JS array for multi-valued queries!
console.log(query['technology']);
console.log(query['blog']);<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.min.js"></script>
<span id="result"></span>Так просто вы можете использовать любой URL и получить значение
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: ?first=value1&second=&value2
var foo = getParameterByName('first'); // "value1"
var bar = getParameterByName('second'); // "value2"
Примечание. Если параметр присутствует несколько раз (? First=value1&second=value2), вы получите первое значение (value1) и второе значение как (value2).
Вот эта замечательная библиотека: https://github.com/allmarkedup/purl
что позволяет делать просто
url = 'http://example.com?sent=yes';
sent = $.url(url).param('sent');
if (typeof sent != 'undefined') { // sent exists
if (sent == 'yes') { // sent is equal to yes
// ...
}
}
В примере предполагается, что вы используете jQuery. Вы также можете использовать его как обычный javascript, тогда синтаксис будет немного другим.
http://example.com?sent=yes
Лучшее решение здесь.
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
С помощью функции выше вы можете получить отдельные значения параметров:
getUrlParameter('sent');
Есть еще один пример использования библиотеки URI.js.
Пример отвечает на вопросы точно так, как задано.
var url = 'http://example.com?sent=yes';
var urlParams = new URI(url).search(true);
// 1. Does sent exist?
var sendExists = urlParams.sent !== undefined;
// 2. Is it equal to "yes"?
var sendIsEqualtToYes = urlParams.sent == 'yes';
// output results in readable form
// not required for production
if (sendExists) {
console.log('Url has "sent" param, its value is "' + urlParams.sent + '"');
if (urlParams.sent == 'yes') {
console.log('"Sent" param is equal to "yes"');
} else {
console.log('"Sent" param is not equal to "yes"');
}
} else {
console.log('Url hasn\'t "sent" param');
}<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js"></script>Это основано на Reza Baradaran Gazorisangi, но URL декодирует параметры, поэтому их можно использовать, когда они содержат данные, отличные от цифр и букв:
function urlParam(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
// Need to decode the URL parameters, including putting in a fix for the plus sign
// https://stackru.com/a/24417399
return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}
По общему признанию, я добавляю свой ответ на переоцененный вопрос, но у этого есть преимущества:
- Не зависит от каких-либо внешних библиотек, в том числе jQuery
- Не загрязняет глобальное пространство имен функций, расширяя 'String'
- Не создавать глобальные данные и не выполнять ненужную обработку после того, как совпадение найдено
- Обработка проблем кодирования и принятие (при условии) не закодированного имени параметра
- Избегать явного for петли
String.prototype.urlParamValue = function() {
var desiredVal = null;
var paramName = this.valueOf();
window.location.search.substring(1).split('&').some(function(currentValue, _, _) {
var nameVal = currentValue.split('=');
if ( decodeURIComponent(nameVal[0]) === paramName ) {
desiredVal = decodeURIComponent(nameVal[1]);
return true;
}
return false;
});
return desiredVal;
};
Тогда вы бы использовали его как:
var paramVal = "paramName".urlParamValue() // null if no match
С ванильным JavaScript, вы можете легко взять параметры (location.search), получить подстроку (без?) И превратить ее в массив, разделив его на '&'.
Выполняя итерацию по urlParams, вы можете снова разделить строку с помощью '=' и добавить ее к объекту 'params' как объект [elmement[0]] = element[1]. Супер просто и легко получить доступ.
http://www.website.com/?error=userError&type=handwritten
var urlParams = location.search.substring(1).split('&'),
params = {};
urlParams.forEach(function(el){
var tmpArr = el.split('=');
params[tmpArr[0]] = tmpArr[1];
});
var error = params['error'];
var type = params['type'];
Я использую это, и это работает. http://codesheet.org/codesheet/NF246Tzs
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var first = getUrlVars()["id"];
Если вы хотите найти конкретный параметр из определенного URL:
function findParam(url, param){
var check = "" + param;
if(url.search(check )>=0){
return url.substring(url.search(check )).split('&')[0].split('=')[1];
}
}
var url = "http://www.yourdomain.com/example?id=1&order_no=114&invoice_no=254";
alert(findParam(url,"order_no"));
Кофейная версия ответа Самира
getUrlParameter = (sParam) ->
sPageURL = window.location.search.substring(1)
sURLVariables = sPageURL.split('&')
i = 0
while i < sURLVariables.length
sParameterName = sURLVariables[i].split('=')
if sParameterName[0] == sParam
return sParameterName[1]
i++
Что, если в параметре URL есть &, например имя файла ="p&g.html"&uid=66
В этом случае первая функция не будет работать должным образом. Поэтому я изменил код
function getUrlParameter(sParam) {
var sURLVariables = window.location.search.substring(1).split('&'), sParameterName, i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
}
Небольшое улучшение в ответе Самера, кэширование параметров в закрытие, чтобы избежать разбора и циклического перебора всех параметров при каждом вызове
var getURLParam = (function() {
var paramStr = decodeURIComponent(window.location.search).substring(1);
var paramSegs = paramStr.split('&');
var params = [];
for(var i = 0; i < paramSegs.length; i++) {
var paramSeg = paramSegs[i].split('=');
params[paramSeg[0]] = paramSeg[1];
}
console.log(params);
return function(key) {
return params[key];
}
})();
Другое решение, которое использует jQuery и JSON, так что вы можете получить доступ к значениям параметра через объект.
var loc = window.location.href;
var param = {};
if(loc.indexOf('?') > -1)
{
var params = loc.substr(loc.indexOf('?')+1, loc.length).split("&");
var stringJson = "{";
for(var i=0;i<params.length;i++)
{
var propVal = params[i].split("=");
var paramName = propVal[0];
var value = propVal[1];
stringJson += "\""+paramName+"\": \""+value+"\"";
if(i != params.length-1) stringJson += ",";
}
stringJson += "}";
// parse string with jQuery parseJSON
param = $.parseJSON(stringJson);
}
Предполагая, что ваш URL http://example.com/?search=hello+world&language=en&page=3
После этого нужно использовать только такие параметры:
param.language
возвращать
en
Наиболее полезное использование этого - запускать его при загрузке страницы и использовать глобальную переменную для использования параметров там, где они могут вам понадобиться.
Если ваш параметр содержит числовые значения, просто проанализируйте значение.
parseInt(param.page)
Если нет параметров param будет просто пустой объект.
var RequestQuerystring;
(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);
RequestQuerystring = {};
while (match = search.exec(query))
RequestQuerystring[decode(match[1])] = decode(match[2]);
})();RequestQuerystring теперь объект со всеми вашими параметрами
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results[1] || 0;
}