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

Question

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

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

http://example.com?sent=yes

我只想检测：

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

Answer 1

最佳解决方案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&blog=jquerybyexample。

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

Answer 2

2021 的解决方案

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

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

发送 存在吗？

searchParams.has('sent') // true

是否等于“是”？

let param = searchParams.get('sent')

然后只是比较它。

Answer 3

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

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"

Answer 4

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

Answer 5

http://example.com?sent=yes

最佳解决方案here。

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

Answer 6

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

Answer 7

如果要从特定的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"));

Answer 8

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

Answer 9

从字符串中获取参数：

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'

Answer 10

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 现在是一个包含所有参数的对象

Answer 11

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

Answer 12

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

Answer 13

只是想显示我的代码：

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

}

Answer 14

这个很简单，对我有用

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

Answer 15

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

Answer 16

另一个替代功能...

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

Answer 17

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

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

Answer 18

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

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

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

Answer 20

如果像 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]);
        }
    }
}

Answer 21

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

Answer 22

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

Answer 23

这可能有点矫枉过正，但现在有一个非常流行的库可用于解析 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>

Answer 24

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

Answer 25

使用这个

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

Answer 26

也许您想看看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。它还可以自定义处理分隔符和所有内容。

缩小版

Answer 27

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

<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

Answer 28

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

Answer 29

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

Answer 30

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