Как получить параметр 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.