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

Posted

技术标签:

【中文标题】如何使用 jQuery 或纯 JavaScript 获取 URL 参数？【英文标题】：How to get URL parameter using jQuery or plain JavaScript? 【发布时间】：2013-10-29 18:10:21 【问题描述】：

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

我的网址只会有 1 个字符串：

http://example.com?sent=yes

我只想检测：

    sent 存在吗？ 是否等于“是”？

【问题讨论】：

How can I get query string values?的可能重复 ***.com/questions/1403888/… ***.com/a/901144/979621 我见过的最佳解决方案 [这里][1] [1]：***.com/a/901144/3106590 现在有一个插件/库，称为 URI.js：github.com/medialize/URI.js 【参考方案1】：

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

API：

inArray：http://api.jquery.com/jQuery.inArray/

这应该有助于:)

代码

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

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

【讨论】：

仅适用于单个 var -- & 会抛出它 -- 可以用正则表达式扩展【参考方案2】：

我希望这会有所帮助。

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

【讨论】：

【参考方案3】：

最佳解决方案here。

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&amp;blog=jquerybyexample。

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

【讨论】：

谢谢！但是在复制这个时，我发现了一个令人讨厌的惊喜，在结尾处包含一个零宽度的空白 (\u200b)。使脚本出现不可见的语法错误。 返回 false 或 null 用于空搜索 这个解决方案对我来说效果很好我刚刚使用过 var sPageURL = decodeURI(window.location.search.substring(1));将 %20 个字符转换为空格，如果参数不匹配，我也会返回一个空字符串而不是什么。 我已经更新了答案以包含此评论上方的所有 cmets 代码更改。 解码应该在参数值上完成（正如 Iouri 建议的那样）。如果在 url 上完成解码（如答案所示），如果参数值中有编码的 &amp; 或 =，它将无法正常工作。【参考方案4】：

jQuery 代码 sn-p 获取存储在 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&param2=&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

【讨论】：

注意：如果有特殊字符作为参数或变音符号等，您需要解码。所以应该是return results[1] || 0;而不是return decodeURI(results[1]) || 0; 只是好奇，为什么它需要|| 0 部分，因为已经检查了结果，它不会总是返回匹配数组吗？ @AirWick219 适当的故障保护。虽然是多余的，但谨慎一点也无妨 这很可能是原始来源：sitepoint.com/url-parameters-jquery 但这个答案添加了一些新想法 不确定是否值得为此使用 jQuery。【参考方案5】：

这会给你一个很好的对象来使用

    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(/\?|\&/) 这意味着【参考方案6】：

也许您想看看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，您基本上可以对所有字符串（例如 document.URL.extract() ）调用 extract() 函数，然后您会返回找到的所有参数的 HashMap。它还可以自定义处理分隔符和所有内容。

缩小版

【讨论】：

【参考方案7】：

我总是把它当作一条线。现在 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

【讨论】：

【参考方案8】： 
$.urlParam = function(name) 
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;

【讨论】：

& 被错误地编码为“&”以上答案请参考正确答案***.com/a/25359264/73630【参考方案9】：

Sameer 回答的咖啡脚本版本

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

【讨论】：

【参考方案10】：

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

【讨论】：

这个库不再维护，但是我使用它，它很棒。确保您使用 param 而不是 attr 来获取这些查询字符串参数，正如作者在他们的示例中所包含的那样。【参考方案11】：

可能为时已晚。但是这个方法很简单很简单

<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

【讨论】：

决定这个的人应该首先检查回购。用法发生了变化。 $.url.attr('message') 变成 $.url("query") 并且它只给出完整的查询！为了只得到一个参数，我必须： $.url("query").split("=")[1] url github link【参考方案12】：

使用这个

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

【讨论】：

【参考方案13】：

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

【讨论】：

【参考方案14】：

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

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'] // 未定义或'值'

但是如果你有编码字符或多值键呢？

你最好看看这个答案：How can I get query string values in 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"

【讨论】：

字符串拆分也可能比正则表达式更快。考虑到 url 只会被解析一次，这并不是一个因素。 这是解决方案（第一个）在浏览器中对我来说非常有效 - 谢谢！ @NickyTheWrench 很高兴听到这个消息，谢谢！无论如何，请注意这是一个非常简单的解决方案，如果您得到包含特殊字符的复杂 url 参数，您最好检查提供的链接。 @Qwerty 是的 - 我的用例非常简单，参数始终相同，等等（基本上正是 OP 要求的）再次感谢！ @BernardVanderBeken 很有趣，我修好了，反正这是一个非常愚蠢的解决方案，底部支持编码字符和数组的解决方案要好得多。【参考方案15】：

这可能有点过头了，但现在有一个非常流行的库可用于解析 URI，称为 URI.js。

示例

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

【讨论】：

【参考方案16】：

我使用它并且它有效。 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"];

【讨论】：

【参考方案17】：

使用 vanilla JavaScript，您可以轻松获取参数（location.search），获取子字符串（不带？）并将其转换为数组，方法是用 '&' 拆分它。

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

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

【讨论】：

【参考方案18】：

如果像 filename="p&g.html"&uid=66 这样的 URL 参数中有 & 怎么办

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

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

【讨论】：

【参考方案19】：

这是基于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://***.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;

【讨论】：

【参考方案20】：

诚然，我正在对一个过度回答的问题添加我的答案，但这具有以下优点：

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

【讨论】：

【参考方案21】：

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

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

【讨论】：

【参考方案22】：

又一个替代功能...

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

【讨论】：

这是错误的！例如 OP 示例中的 param('t') == param('sent') == 'yes'。这是一个修复：return (location.search.split(new RegExp('[?&amp;]' + name + '='))[1] || '').split('&amp;')[0];另请注意，您无法判断参数是否存在，因为缺少参数会得到空字符串。 //（强制存在完整的密钥，而不是只存在密钥的最后一部分）return (location.search.split('?' + name + '=')[1] || location.search.split('&amp;' + name + '=')[1] || '').split('&amp;')[0];【参考方案23】：

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js"&gt;&lt;/script&gt;

【讨论】：

【参考方案24】：

这个很简单，对我有用

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

【讨论】：

【参考方案25】：

只是想显示我的代码：

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

【讨论】：

您需要在答案中补充说明这对 OP 有何帮助（不是他们需要它，因为他们有 24 个其他答案可供选择并且已经解决了他们的问题）。【参考方案26】：

2021 的解决方案

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

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

发送 存在吗？

searchParams.has('sent') // true

是否等于“是”？

let param = searchParams.get('sent')

然后只是比较它。

【讨论】：

我认为这在浏览器中不受支持，那么为什么要使用它呢？参考 - developer.mozilla.org/en-US/docs/Web/API/URLSearchParams 目前无法在 IE / Edge 中工作，所以功能检测：if ('URLSearchParams' in window) // Browser supports URLSearchParamsSee here 对我和我的目标受众来说已经足够好了。 caniuse.com/#feat=urlsearchparams @p_champ Edge 在 v17（2018 年 4 月）中获得支持。让 IE 死吧。 这是现代问题的现代解决方案。【参考方案27】： 

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;

【讨论】：

【参考方案28】： 

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

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

【讨论】：

【参考方案29】：

从字符串中获取参数：

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'

【讨论】：

【参考方案30】：

另一个使用 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&amp;language=en&amp;page=3

之后只需要使用如下参数即可：

param.language

返回

en

最有用的用法是在页面加载时运行它，并利用全局变量在您可能需要的任何地方使用参数。

如果您的参数包含数值，则只需解析该值。

parseInt(param.page)

如果没有参数，param 将只是一个空对象。

【讨论】：

以上是关于如何使用 jQuery 或纯 JavaScript 获取 URL 参数？的主要内容，如果未能解决你的问题，请参考以下文章

使用 jQuery 或纯 Javascript 访问一组 HTML 输入文本框

使用 jQuery（或纯 JS）添加新的 DOM 元素

如何使用 jQuery 或仅使用 Javascript 将按钮重定向到另一个页面

使用 JavaScript/jQuery 将 URL 保存在锚标记中？

jQuery / AJAX - 响应格式

jquery ajax - 更好地返回 json 或纯 html