Как получить параметр URL, используя jQuery или простой JavaScript?


619

Я видел много примеров jQuery, где размер и имя параметра неизвестны.

Мой URL будет содержать только 1 строку:

http://example.com?sent=yes

Я просто хочу обнаружить:

  1. Существует sent?
  2. Это равно "да"?




Лучшее решение, которое я когда-либо видел [здесь] [1] [1]: stackoverflow.com/a/901144/3106590
hmfarimani

1
Теперь для этого есть плагин / библиотека, которая называется URI.js: github.com/medialize/URI.js
alexw

Ответы:


1211

Лучшее решение здесь .

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

8
Спасибо! Но, копируя это, я обнаружил неприятный сюрприз, включающий пробел нулевой ширины (\ u200b) ближе к концу. Создание скрипта с невидимой синтаксической ошибкой.
Кристофер Олссон

11
Вернуть falseили nullдля пустого поиска
Стефано Каравана

4
Это решение работает очень хорошо для меня, я только что использовал var sPageURL = decodeURI (window.location.search.substring (1)); чтобы преобразовать% 20 ​​символов в пробелы, а также я возвращаю пустую строку вместо ничего, если параметр не соответствует.
Кристоф

18
Я обновил ответ, включив в него все изменения кода комментариев над этим комментарием.
Роб Эванс

7
Декодирование должно быть сделано на значение параметра (как предлагает Iouri). Если декодирование выполняется по URL (как в ответе), оно не будет работать правильно, если есть закодированное значение &или =значение параметра.
Закинстер

288

Решение от 2020

У нас есть: http://example.com?sent=yes

let searchParams = new URLSearchParams(window.location.search)

Имеет ли послал EXIST ?

searchParams.has('sent') // true

Это равно "да"?

let param = searchParams.get('sent')

а затем просто сравните это.


16
я думаю, что это не поддерживается во всех браузерах, так почему нужно его использовать? ссылка - developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
p_champ

1
@p_champ ты прав. Но вы можете использовать polyfill для URLSearchParams
Optio

2
в настоящее время не работает в IE / Edge, поэтому обнаружение функций: if ('URLSearchParams' in window) { // Browser supports URLSearchParams} см. здесь
mfgmicha

4
Достаточно хорошо для меня и моей предполагаемой аудитории. caniuse.com/#feat=urlsearchparams
jontsai

4
@p_champ Edge получил поддержку в v17 (апрель 2018 года). Пусть IE умрет.
Райан ДюВаль

198

Фрагмент кода 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

12
Примечание: вам нужно декодировать, если есть специальные символы в качестве параметра или Umlaute и т. Д. Так что вместо return results[1] || 0;этого должно бытьreturn decodeURI(results[1]) || 0;
Кай Ноак

Просто любопытно, зачем нужна || 0деталь, поскольку уже есть проверка результата, не всегда ли она возвращает массив совпадений?
AirWick219

@ AirWick219 соответствующий отказоустойчивый. Несмотря на избыточность, никогда не
повредит

2
Вот, скорее всего, первоисточник: sitepoint.com/url-parameters-jquery, но к этому ответу добавлено несколько новых идей
bgmCoder

1
Не уверен, что для этого стоит использовать jQuery.
Квентин 2

88

Я всегда придерживаюсь одной строки. Теперь у 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

Гадкий хак, который изменяет строку поиска ... но не требует никаких внешних модулей или jquery. Мне это нравится.
Брайс

4
@ Брайс Это на самом деле не меняет строку поиска. .replace фактически возвращает новую строку, и эти возвращенные строки обрабатываются в объект params.
Проснулся, Зная

Хороший, короткий и, в отличие от принятого решения, не нужно повторно обрабатывать URL каждый раз, когда вам нужно значение. Может быть немного улучшено с помощью replace(/[?&;]+([^=]+)=([^&;]*)/gireize ";" символ как разделитель тоже.
Le Droid

четкий и безболезненный, лучше, чем принятый для меня ответ, никаких лишних упражнений.
Сэм

Это то, что можно использовать, если использовать хеш вместо разделителя GET-запроса (вопросительный знак): var params={};window.location.hash.replace(/[#&]+([^=&]+)=([^&]*)/gi,function(str,key,value){params[key] = value;}); Это полезно для таких вещей, как AJAX, где хеш в окне обновляется с помощью ajax-запросов, но также и один пользователь может перейти к URI. содержащий хеш
Томми

48

Еще одна альтернативная функция ...

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}

имя должно быть строкой. Работал как шарм ~
mintedsky

2
Это моя любимая. +1 Следует отметить, что это тип поиска «заканчивается». Например, если вы передаете «Phone» для имени, а также есть поле с именем «HomePhone», оно может вернуть неправильное значение, если оно находится первым в URL.
efreed

2
Это не верно! Например, param('t') == param('sent') == 'yes'в примере с OP. Вот исправление: return (location.search.split(new RegExp('[?&]' + name + '='))[1] || '').split('&')[0]; Также обратите внимание, что вы не можете сказать, существует ли параметр, потому что вы получаете пустую строку для пропущенных параметров.
Ориадам

Очень просто и элегантно. Работает как мечта. Спасибо.
Анжана Силва

// (заставить полный ключ существовать вместо только последней части ключа)return (location.search.split('?' + name + '=')[1] || location.search.split('&' + name + '=')[1] || '').split('&')[0];
Аарон

45

Может быть, уже слишком поздно. Но этот метод очень прост и прост

<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: plugins.jquery.com/url
Спасибо -Ripounet


2
Тот, кто решит это, должен сначала проверить репо. Использование изменилось. $ .url.attr ('message') становится $ .url ("query"), и он дает только полный запрос! Чтобы получить только один параметр, мне нужно было: $ .url ("query"). Split ("=") [1] ссылка url github
псевдозач

34

Или вы можете использовать эту аккуратную маленькую функцию, потому что почему слишком сложные решения?

function getQueryParam(param, defaultValue = undefined) {
    location.search.substr(1)
        .split("&")
        .some(function(item) { // returns first occurence and stops
            return item.split("=")[0] == param && (defaultValue = item.split("=")[1], true)
        })
    return defaultValue
}

что выглядит еще лучше, когда упрощено и подчеркнуто:

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"

3
Разделение строк, вероятно, будет быстрее, чем регулярное выражение. Не то, чтобы это был фактор, учитывая, что URL будет анализироваться только один раз.
Патрик

Это решение (первое), которое отлично сработало для меня во всех браузерах - спасибо!
NickyTheWrench

1
@NickyTheWrench Рад это слышать, спасибо! В любом случае, имейте в виду, что это очень простое решение: если вы получаете сложные URL-параметры, содержащие специальные символы, вам лучше проверить предоставленную ссылку.
Qwerty

@Qwerty yup - мой вариант использования очень прост, когда параметр всегда один и тот же и т. Д. (В основном именно то, о чем просил ОП) Еще раз спасибо!
NickyTheWrench

1
@BernardVanderBeken Интересно, я исправил это, во всяком случае, это довольно глупое решение, то, что внизу, которое поддерживает закодированные символы и массивы, намного лучше.
Qwerty

33

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

var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));

Будьте осторожны с совместимостью (в основном это нормально, но IE и Edge могут отличаться, проверьте это на предмет совместимости: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )


Не большинство браузеров могут использовать это.
saf21

URLSearchParams заменяет специальный символ «+» пробелом. Поэтому, если в вашем параметре URL есть «+», он будет заменен.
Growler

11

Этот простой и работал для меня

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

10

Возможно, вы захотите взглянуть на 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 КБ


5

Я надеюсь, это поможет.

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

5

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


4

Попробуйте это рабочее демо http://jsfiddle.net/xy7cX/

API:

Это должно помочь :)

код

var url = "http://myurl.com?sent=yes"

var pieces = url.split("?");
alert(pieces[1] + " ===== " + $.inArray("sent=yes", pieces));

3
работает только для одного var - и он будет отбрасывать - может быть расширен с помощью регулярного выражения
Элвин

3

Вот эта замечательная библиотека: 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, тогда синтаксис будет немного другим.


1
Эта библиотека больше не поддерживается, однако я использую ее, и это здорово. Убедитесь, что вы используете param not attr для получения этих параметров строки запроса, как автор включил в их пример.
Действие Дан

3

Это может быть излишним, но есть довольно популярная библиотека теперь доступны для синтаксического анализа URIs, называемого URI.js .

пример

var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow";
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>


3

Так просто вы можете использовать любой 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).


2

Это даст вам хороший объект для работы с

    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') { .....

раскол (/ \? | \ & /) это означает
Сельва Ганапати

2

Это основано на ответе Газориса , но 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://stackoverflow.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}

2

Есть еще один пример использования 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>


2
http://example.com?sent=yes

Лучшее решение здесь .

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.href);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
};

С помощью функции выше вы можете получить отдельные значения параметров:

getUrlParameter('sent');

Идеальный ответ!
Сриджани Гош

1

Кофейная версия ответа Самира

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++

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];
    }
})();


1

С ванильным JavaScript, вы можете легко взять параметры (location.search), получить подстроку (без?) И превратить ее в массив, разделив его на '&'.

Выполняя итерацию по urlParams, вы можете снова разделить строку с помощью «=» и добавить ее к объекту «params» как object [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'];

1

Что, если в параметре 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]);
        }
    }
}

1

По общему признанию, я добавляю свой ответ на переоцененный вопрос, но у этого есть преимущества:

- Не зависит от каких-либо внешних библиотек, в том числе 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

1

Если вы хотите найти определенный параметр из определенного 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"));

0

Другое решение, которое использует 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, просто будет пустой объект.



-1

использовать этот

$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.