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


617

我已经看到许多jQuery示例,其中参数大小和名称是未知的。

我的网址只会包含1个字符串:

http://example.com?sent=yes

我只想检测:

  1. 是否sent存在?
  2. 等于“是”吗?




我见过的最佳解决方案[这里] [1] [1]:stackoverflow.com/a/901144/3106590
hmfarimani 2015年

1
现在有一个用于URI.js的插件/库:github.com/medialize/URI.js
alexw

Answers:


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)。使脚本具有不可见的语法错误。
Christofer Ohlsson 2014年

11
返回a falsenull进行空搜索
Stefano Caravana

4
这个解决方案对我来说效果很好,我刚刚使用了var sPageURL = encodeURI(window.location.search.substring(1)); 将%20个字符转换为空格,并且如果参数不匹配,我还将返回一个空字符串而不是空字符串。
Christophe

18
我已经更新了答案,以包括此注释上方的所有注释代码更改。
罗布·埃文斯

7
解码应在参数值上完成(如Iouri所建议)。如果解码是在url上完成的(如答案中所述),则如果存在编码&=参数值,则解码将无法正常工作 。
zakinster 2015年

286

2020年的解决方案

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

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

发送 是否存在

searchParams.has('sent') // true

它是等于为“yes”?

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 /边工作,所以做特征检测: if ('URLSearchParams' in window) { // Browser supports URLSearchParams} 在这里看到的
mfgmicha

4
对我和我的目标受众来说足够好。caniuse.com/#feat=urlsearchparams
jontsai

4
@p_champ Edge在v17(2018年4月)中获得了支持。让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

带空格的示例参数

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;
Kai Noack

只是好奇,为什么|| 0已经需要检查结果,为什么它需要 零件,难道它不总是返回match数组吗?
AirWick219 '16

@ AirWick219适当的故障保险。尽管多余,但从不小心谨慎
Zanderwar '16

2
这很可能是原始来源:sitepoint.com/url-parameters-jquery, 但是此答案添加了一些新想法
bgmCoder

1
不确定是否值得为此使用jQuery。
昆汀

88

我总是坚持这一条。现在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

修改搜索字符串的丑陋骇客...但是不需要外部模块或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中,窗口中的哈希值使用ajax请求进行更新,但也有一个用户使用uri包含哈希。
汤米

48

另一个替代功能...

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

名称必须是字符串。就像魅力一样
运作

2
这是我最喜欢的。+1值得注意的是,虽然这是“结尾”类型的搜索。例如,如果您输入“ Phone”作为名称,并且还有一个名为“ HomePhone”的字段,则它可能会返回错误的值(如果该值首先出现在URL中)。
efreed

2
错了!例如param('t') == param('sent') == 'yes'在OP示例中。这里有一个修复:return (location.search.split(new RegExp('[?&]' + name + '='))[1] || '').split('&')[0]; 另外请注意,由于缺少参数,您会得到空字符串,因此无法确定参数是否存在。
oriadam '18

非常简单而优雅。像梦一样工作。谢谢。
Anjana Silva '18

//(强制完整密钥存在,而不是仅密钥的最后一部分)return (location.search.split('?' + name + '=')[1] || location.search.split('&' + name + '=')[1] || '').split('&')[0];
Aaron

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链接
pseudozach 2016年

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'] //未定义或'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-我的用例非常简单,参数始终相同,以此类推(基本上与OP要求的完全一样),再次感谢!
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/zh-CN/docs/Web/API/URLSearchParams


并非大多数浏览器都可以使用此功能。
saf21 '19

URLSearchParams用空格替换特殊字符“ +”。因此,如果您的网址参数中包含“ +”,它将被替换。
咆哮者


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。它也可以自定义以处理定界符和所有分隔符。

缩小版<1kb


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



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来获取那些查询字符串参数,如作者在其示例中所包括的那样。
动作Dan

3

这可能是矫枉过正,但现在可用于解析的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>


3

如此简单,您可以使用任何网址并获得价值

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

split(/ \?| \&/)这意味着
Selva Ganapathi

2

这是基于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;
}

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

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

1

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

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时,可以再次使用'='分割字符串,并将其作为object [elmement [0]] = element [1]添加到'params'对象中。超级简单,易于访问。

http://www.website.com/?error=userError&type=handwriting

            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怎么办?

在这种情况下,第一个功能将无法正常工作。所以我修改了代码

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

假设您的网址是 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;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.