Як отримати параметр URL за допомогою jQuery або звичайного JavaScript?


617

Я бачив безліч прикладів 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-адресою (як у відповіді), вона не працюватиме правильно, якщо є закодоване &чи =значення параметра.
закінстер

286

Рішення від 2020 року

У нас є: http://example.com?sent=yes

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

Чи надсилається існує ?

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}
виявляйте

4
Досить добре для мене та моєї призначеної аудиторії. caniuse.com/#feat=urlsearchparams
jontsai

4
@p_champ Edge отримав підтримку в v17 (квітень 2018). Нехай IE помер.
Ryan DuVal

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

приклад парами з пробілами

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 відповідна помилка. хоч і зайвий, але ніколи не зашкодить бути обережним
zanderwar

2
Ось, швидше за все, оригінальне джерело: sitepoint.com/url-parameters-jquery, але до цієї відповіді додано нові ідеї
bgmCoder

1
Не впевнений, що варто використовувати для цього jQuery.
Квентін 2

88

Я завжди дотримуюся цього як один рядок. Тепер у парам є вар:

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
@Bryce Це фактично не змінює рядок пошуку. .replace фактично повертає нову рядок, і ці повернуті рядки обробляються в об’єкт params.
AwokeKnowing

Приємне, коротке та, всупереч прийнятому рішенню, не потребує перезавантаження URL-адреси кожного разу, коли вам потрібно значення. Можна трохи покращити, replace(/[?&;]+([^=]+)=([^&;]*)/giщоб відновити ";" персонаж як роздільник.
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 Зверніть увагу, хоча це тип пошуку "закінчується". Наприклад, якщо ви перейдете в "Телефон" для імені, а також є поле під назвою "Домашній телефон", воно може повернути значення неправильного, якщо воно з’явиться першим в URL-адресі.
efreed

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

Дуже просто і елегантно. Працює як сон. Дякую.
Аняна Сільва

// (змусити існувати повний ключ замість лише останньої частини ключа)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 ("повідомлення") стає $ .url ("запит"), і він дає лише повний запит! Щоб отримати лише один параметр, мені довелося: $ .url ("query"). Split ("=") [1] url github link
pseudozach

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 ['відправлено'] // невизначено або 'значення'

Але що робити, якщо у вас є закодовані символи або багатозначні ключі ?

Ви краще побачите цю відповідь: Як я можу отримати значення рядка запиту в 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-парамері є "+", воно буде замінено.
Буркун

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

Можливо, ви можете поглянути на зубного лікаря ? (відмова від відповідальності: я написав код)

код:

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 ви можете в основному викликати функцію extra () на всіх рядках (наприклад, 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
працює лише для одного вару - і & він би скинув його - можна було б продовжити за допомогою регулярного виразу
Елвін

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

Ідеальний відповідь!
Srijani Ghosh

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

Я використовую це, і це працює. 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"];

1

За допомогою ванільного JavaScript ви можете легко взяти парами (location.search), отримати підрядку (без?) Та перетворити її на масив, розділивши її на "&".

Під час ітерації через urlParams ви можете знову розділити рядок на "=" і додати його до об'єкта "params" як об'єкт [elmement [0]] = елемент [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, як filename = "p & g.html" & uid = 66

У цьому випадку 1-а функція не працюватиме належним чином. Тому я змінив код

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.