如何使用jQuery或纯JavaScript获取URL参数？

我见过很多参数大小和名称未知的jQuery示例。

我的URL永远只有1个字符串：

http://example.com?sent=yes

我只想检测：

  1. sent存在吗？
  2. 它等于“是”吗？
1616218 次浏览
小开

试试这个工作演示http://jsfiddle.net/xy7cX/

API：

这应该有助于:)

代码

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


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

我希望这会有帮助。

 <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>
小开
最佳答案

最佳解决方案这里。

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

假设URL是
，这就是您如何使用此函数 http://dummy.com/?technology=jquery&blog=jquerybyexample.

var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');
小开

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&；参数2=&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
小开

这将给你一个很好的对象与工作

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

也许你想看看牙医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，您基本上可以在所有字符串（例如，document.URL.extract（））上调用提取（）函数，并返回所有找到的参数的HashMap。它也可以自定义以处理分隔符等。

缩小版<1kb

小开

我总是把这个作为一行。现在params有vars：

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
小开 
$.urlParam = function(name) {
var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
return results[1] || 0;
}
小开

Sameer回答的Coffeescript版本

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

有一个很棒的图书馆： 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一样使用它，语法会有所不同。

小开

可能为时已晚但这种方法非常简单易行

<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

小开

使用此

$.urlParam = function(name) {
var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
return results[1] || 0;
}
小开

对Sameer的答案略有改进，将参数缓存到闭包中，以避免每次调用时解析和循环遍历所有参数

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

或者你可以使用这个简洁的小函数，因为为什么解决方案过于复杂？

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

result:
queryDict['sent'] // undefined or '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"
小开

这可能有点夸张，但现在有一个非常流行的库可用于解析URI，称为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>

小开

我使用它，它工作。 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"];
小开

使用vanilla JavaScript，您可以轻松获取参数（location.search），获取子字符串（没有？）并将其转换为数组，通过“&”将其拆分。

当您遍历urlParams时，您可以使用'='再次拆分字符串并将其作为对象[elmement[0]]=元素[1]添加到'params'对象中。超级简单且易于访问。

http://www.website.com/?error=userError&； type=hand的

            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'];
小开

如果URL参数中有&，比如filename="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]);
}
}
}
小开

这是基于Gazoris的答案，但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;
}
小开

诚然，我将我的答案添加到一个过度回答的问题中，但这有以下优点：

不依赖于任何外部库，包括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
小开

如此简单，您可以使用任何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=value e1&秒=value e2），您将获得第一个值（value e1）和第二个值（value e2）。

小开

另一个替代功能…

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

还有一个使用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>

小开

这是一个简单的和工作给我 

$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results[1] || 0;
}

所以如果你的网址是http://www.yoursite.com?city=4

试试这个 

console.log($.urlParam('city'));
小开

只是想展示我的代码：

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

}

小开

解决方案2022年

我们有：http://example.com?sent=yes

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

发送存在？

searchParams.has('sent') // true

平等是“是”吗？

let param = searchParams.get('sent')

然后比较一下。

小开 

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

小开 

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

请求参数现在是一个包含所有参数的对象

小开

从字符串中获取参数：

Object.defineProperty(String.prototype, 'urlParam', {


value: function (param) {


"use strict";


var str = this.trim();


var regex = "[\?&]" + param + "=([^&#]*)";


var results = new RegExp(regex, "i").exec(str);


return (results !== null) ? results[1] : '';


}
});

使用：

var src = 'http://your-url.com/?param=value'


console.log(src.urlParam(param)); // returns 'value'
小开

另一种使用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将只是一个空对象。

小开

如果您想从特定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"));
小开

使用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）

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

我希望使用完整的简单REG Exp

  function getQueryString1(param) {
return decodeURIComponent(
(location.search.match(RegExp("[?|&]"+param+'=(.+?)(&|$)'))||[,null])[1]
);
}

提交答案