我有一个带有一些 GET 参数的 URL，如下所示：
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
我需要获得c. 我试图阅读 URL，但我只得到m2. 如何使用 JavaScript 做到这一点？
问问题
2579667 次
64 回答
2489
JavaScript本身没有内置任何东西来处理查询字符串参数。
在（现代）浏览器中运行的代码可以使用该URL对象（这是浏览器向 JS 提供的 API 的一部分）：
var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);对于较旧的浏览器（包括 Internet Explorer），您可以使用此 polyfill或此答案的原始版本中的代码，该版本早于URL：
您可以访问location.search，这将使您从?字符到 URL 的末尾或片段标识符 (#foo) 的开头，以先到者为准。
然后你可以用这个来解析它：
function parse_query_string(query) {
var vars = query.split("&");
var query_string = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
var key = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair[1]);
// If first entry with this name
if (typeof query_string[key] === "undefined") {
query_string[key] = decodeURIComponent(value);
// If second entry with this name
} else if (typeof query_string[key] === "string") {
var arr = [query_string[key], decodeURIComponent(value)];
query_string[key] = arr;
// If third or later entry with this name
} else {
query_string[key].push(decodeURIComponent(value));
}
}
return query_string;
}
var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);您可以从当前页面的 URL 中获取查询字符串：
var query = window.location.search.substring(1);
var qs = parse_query_string(query);
于 2009-06-11T08:37:53.483 回答
257
我见过的大多数实现都错过了对名称和值进行 URL 解码。
这是一个通用的实用程序函数，它也可以进行正确的 URL 解码：
function getQueryParams(qs) {
qs = qs.split('+').join(' ');
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params;
}
//var query = getQueryParams(document.location.search);
//alert(query.foo);
于 2009-07-08T18:04:19.100 回答
252
function gup( name, url ) {
if (!url) url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( url );
return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')
于 2009-06-11T08:38:05.573 回答
236
这是检查一个参数的简单方法：
示例网址：
http://myserver/action?myParam=2
示例 Javascript：
var myParam = location.search.split('myParam=')[1]
如果 URL 中存在“myParam”...变量 myParam 将包含“2”，否则它将是未定义的。
也许你想要一个默认值，在这种情况下：
var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';
更新：这效果更好：
var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
var result = captured ? captured : 'myDefaultValue';
即使 URL 充满参数，它也能正常工作。
于 2013-12-02T19:19:40.160 回答
149
浏览器供应商已经通过 URL 和 URLSearchParams 实现了一种本地方式来执行此操作。
let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c')); // outputs "m2-m3-m4-m5"
目前支持 Firefox、Opera、Safari、Chrome 和 Edge。有关浏览器支持的列表，请参见此处。
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
于 2016-02-18T17:52:47.563 回答
101
我很久以前就发现了这个，很容易：
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
然后像这样调用它：
var fType = getUrlVars()["type"];
于 2013-11-20T14:01:25.623 回答
82
您可以在 中获取查询字符串location.search，然后您可以拆分问号后的所有内容：
var params = {};
if (location.search) {
var parts = location.search.substring(1).split('&');
for (var i = 0; i < parts.length; i++) {
var nv = parts[i].split('=');
if (!nv[0]) continue;
params[nv[0]] = nv[1] || true;
}
}
// Now you can get the parameters you want like so:
var abc = params.abc;
于 2009-06-11T08:37:57.570 回答
48
使用URLSearchParams的超级简单方法。
function getParam(param){
return new URLSearchParams(window.location.search).get(param);
}
Chrome、Firefox、Safari、Edge等目前支持它。
于 2017-04-12T20:16:41.863 回答
39
我写了一个更简单优雅的解决方案。
var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];
于 2014-10-14T23:03:55.993 回答
34
这是一个没有正则表达式的递归解决方案，并且具有最小的突变（只有 params 对象发生了突变，我认为这在 JS 中是不可避免的）。
这很棒，因为它：
- 是递归的
- 处理多个同名参数
- 很好地处理格式错误的参数字符串（缺失值等）
- 如果 '=' 在值中，则不会中断
- 执行 URL 解码
- 最后，太棒了，因为它……啊！！！
代码：
var get_params = function(search_string) {
var parse = function(params, pairs) {
var pair = pairs[0];
var parts = pair.split('=');
var key = decodeURIComponent(parts[0]);
var value = decodeURIComponent(parts.slice(1).join('='));
// Handle multiple parameters of the same name
if (typeof params[key] === "undefined") {
params[key] = value;
} else {
params[key] = [].concat(params[key], value);
}
return pairs.length == 1 ? params : parse(params, pairs.slice(1))
}
// Get rid of leading ?
return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}
var params = get_params(location.search);
// Finally, to get the param you want
params['c'];
于 2014-01-16T01:42:14.880 回答
31
我做了一个函数来做到这一点：
var getUrlParams = function (url) {
var params = {};
(url + '?').split('?')[1].split('&').forEach(function (pair) {
pair = (pair + '=').split('=').map(decodeURIComponent);
if (pair[0].length) {
params[pair[0]] = pair[1];
}
});
return params;
};
2017 年 5 月 26 日更新，这是一个 ES7 实现（使用 babel 预设阶段 0、1、2 或 3 运行）：
const getUrlParams = url => `${url}?`.split('?')[1]
.split('&').reduce((params, pair) =>
((key, val) => key ? {...params, [key]: val} : params)
(...`${pair}=`.split('=').map(decodeURIComponent)), {});
一些测试：
console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('https://google.com/')); // Will log {}
console.log(getUrlParams('a=1&b=2&c')); // Will log {}
2018 年 3 月 26 日更新，这是一个 Typescript 实现：
const getUrlParams = (search: string) => `${search}?`
.split('?')[1]
.split('&')
.reduce(
(params: object, pair: string) => {
const [key, value] = `${pair}=`
.split('=')
.map(decodeURIComponent)
return key.length > 0 ? { ...params, [key]: value } : params
},
{}
)
2019 年 2 月 13 日更新，这是一个更新的 TypeScript 实现，适用于 TypeScript 3。
interface IParams { [key: string]: string }
const paramReducer = (params: IParams, pair: string): IParams => {
const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)
return key.length > 0 ? { ...params, [key]: value } : params
}
const getUrlParams = (search: string): IParams =>
`${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})
于 2015-06-25T17:45:19.990 回答
26
function getURLParameters(paramName)
{
var sURL = window.document.URL.toString();
if (sURL.indexOf("?") > 0)
{
var arrParams = sURL.split("?");
var arrURLParams = arrParams[1].split("&");
var arrParamNames = new Array(arrURLParams.length);
var arrParamValues = new Array(arrURLParams.length);
var i = 0;
for (i = 0; i<arrURLParams.length; i++)
{
var sParam = arrURLParams[i].split("=");
arrParamNames[i] = sParam[0];
if (sParam[1] != "")
arrParamValues[i] = unescape(sParam[1]);
else
arrParamValues[i] = "No Value";
}
for (i=0; i<arrURLParams.length; i++)
{
if (arrParamNames[i] == paramName)
{
//alert("Parameter:" + arrParamValues[i]);
return arrParamValues[i];
}
}
return "No Parameters Found";
}
}
于 2012-01-05T20:18:06.857 回答
20
ECMAScript 6 解决方案：
var params = window.location.search
.substring(1)
.split("&")
.map(v => v.split("="))
.reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())
于 2015-06-23T13:10:43.913 回答
16
最短的方法：
new URL(location.href).searchParams.get("my_key");
于 2018-08-11T15:09:03.340 回答
14
我使用parseUri库。它允许您完全按照您的要求做：
var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5';
var c = uri.queryKey['c'];
// c = 'm2-m3-m4-m5'
于 2011-08-14T22:25:20.503 回答
12
我用
function getVal(str) {
var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
return v ? v[1] : null;
}
于 2016-03-18T05:31:01.467 回答
10
这个问题的答案太多了，所以我再添加一个。
/**
* parses and returns URI query parameters
*
* @param {string} param parm
* @param {bool?} asArray if true, returns an array instead of a scalar
* @returns {Object|Array}
*/
function getURIParameter(param, asArray) {
return document.location.search.substring(1).split('&').reduce(function(p,c) {
var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); });
if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
}, []);
}
用法：
getURIParameter("id") // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids
这可以处理空参数（那些不存在的键"=value"）、标量和基于数组的值检索 API 的公开，以及正确的 URI 组件解码。
于 2014-04-28T03:27:35.767 回答
10
这是我的解决方案。正如 Andy E 在回答这个问题时所建议的那样，如果它反复构建各种正则表达式字符串、运行循环等只是为了获得一个值，这对你的脚本的性能不利。所以，我想出了一个更简单的脚本，它在单个对象中返回所有 GET 参数。您应该只调用一次，将结果分配给一个变量，然后在将来的任何时候，使用适当的键从该变量中获取您想要的任何值。请注意，它还负责 URI 解码（例如 %20 之类的内容）并将 + 替换为空格：
function getUrlQueryParams(url) {
var queryString = url.split("?")[1];
var keyValuePairs = queryString.split("&");
var keyValue = [];
var queryParams = {};
keyValuePairs.forEach(function(pair) {
keyValue = pair.split("=");
queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(/\+/g, " ");
});
return queryParams;
}
因此，这里有一些脚本测试供您查看：
// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".
// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".
// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".
于 2016-09-21T22:10:28.567 回答
10
使用方法最简单的replace()方法：
从urlStr字符串：
paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
或从当前网址：
paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
解释：
document.URL- 接口以字符串形式返回文档位置（页面 url）。replace()- 方法返回一个新字符串，其中模式的部分或全部匹配被替换。/.*param_name=([^&]*).*/-斜线之间 的正则表达式模式，这意味着：.*- 零个或多个任意字符，param_name=- 搜索的参数名称，()- 正则表达式中的组，[^&]*- 任何字符中的一个或多个，不包括&,|- 交替，$1- 在正则表达式中引用第一组。
var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);于 2019-07-23T14:48:18.980 回答
8
还有一个建议。
已经有一些很好的答案，但我发现它们不必要地复杂且难以理解。这是简短的，简单的，并返回一个简单的关联数组，其中键名对应于 URL 中的令牌名称。
我在下面添加了一个带有评论的版本，供那些想要学习的人使用。
请注意，它的循环依赖于 jQuery ($.each)，我推荐使用它而不是 forEach。我发现全面使用 jQuery 确保跨浏览器兼容性比插入单独的修复程序来支持旧浏览器不支持的任何新功能更简单。
编辑：在我写完这篇文章后，我注意到 Eric Elliott 的答案几乎相同，尽管它使用了 forEach，而我通常反对（出于上述原因）。
function getTokens(){
var tokens = [];
var query = location.search;
query = query.slice(1);
query = query.split('&');
$.each(query, function(i,value){
var token = value.split('=');
var key = decodeURIComponent(token[0]);
var data = decodeURIComponent(token[1]);
tokens[key] = data;
});
return tokens;
}
评论版本：
function getTokens(){
var tokens = []; // new array to hold result
var query = location.search; // everything from the '?' onward
query = query.slice(1); // remove the first character, which will be the '?'
query = query.split('&'); // split via each '&', leaving us an array of something=something strings
// iterate through each something=something string
$.each(query, function(i,value){
// split the something=something string via '=', creating an array containing the token name and data
var token = value.split('=');
// assign the first array element (the token name) to the 'key' variable
var key = decodeURIComponent(token[0]);
// assign the second array element (the token data) to the 'data' variable
var data = decodeURIComponent(token[1]);
tokens[key] = data; // add an associative key/data pair to our result array, with key names being the URI token names
});
return tokens; // return the array
}
对于下面的示例，我们将假设此地址：
http://www.example.com/page.htm?id=4&name=murray
您可以将 URL 令牌分配给您自己的变量：
var tokens = getTokens();
然后按名称引用每个 URL 令牌，如下所示：
document.write( tokens['id'] );
这将打印“4”。
您也可以直接从函数中简单地引用一个令牌名称：
document.write( getTokens()['name'] );
...这将打印“默里”。
于 2014-04-15T13:09:44.583 回答
8
或者，如果您不想重新发明 URI 解析轮，请使用URI.js
要获取名为 foo 的参数的值：
new URI((''+document.location)).search(true).foo
那是什么
- 将 document.location 转换为字符串（它是一个对象）
- 将该字符串提供给 URI.js 的 URI 类构造函数
- 调用 search() 函数来获取 url 的搜索（查询）部分
（传递 true 告诉它输出一个对象） - 访问结果对象的 foo 属性以获取值
这是一个小提琴...... http://jsfiddle.net/m6tett01/12/
于 2014-10-16T17:31:23.533 回答
8
对于像这个 index.html?msg=1 这样的单个参数值，请使用以下代码，
$(window).load(function(){
queryString();
});
function queryString()
{
var queryString = window.location.search.substring(1);
var varArray = queryString.split("="); //eg. index.html?msg=1
var param1 = varArray[0];
var param2 = varArray[1];
}
对于所有参数值，请使用以下代码，
$(window).load(function(){
queryString();
});
function queryString()
{
var queryString = window.location.search;
var varArray = queryString.split("&");
for (var i=0;i<varArray.length;i++) {
var param = varArray[i].split("=");
//parameter-value pair
}
}
于 2015-03-03T06:55:36.400 回答
8
在这里，我发布一个示例。但它在 jQuery 中。希望它会帮助其他人：
<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"
});
</script>
于 2015-03-25T10:50:26.393 回答
7
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];
从这里得到：http: //jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html
于 2014-07-27T23:15:45.007 回答
7
我需要读取一个 URL GET 变量并根据 url 参数完成一个操作。我到处寻找解决方案，发现了这段小代码。它基本上是读取当前页面的 url，对 URL 执行一些正则表达式，然后将 url 参数保存在一个关联数组中，我们可以轻松访问它。
例如，如果我们有以下 url，底部有 javascript。
http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July
获取参数 id 和 page 我们需要做的就是调用它：
该准则将是：
<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];
alert(first);
alert(second);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
于 2015-06-28T04:40:20.140 回答
6
简单的方法
function getParams(url){
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while(match = regex.exec(url)) {
params[match[1]] = match[2];
}
return params;
}
然后像 getParams(url) 一样调用它
于 2015-09-02T13:44:32.983 回答
6
优雅、实用的风格解决方案
让我们创建一个包含 URL 参数名称作为键的对象，然后我们可以轻松地通过其名称提取参数：
// URL: https://example.com/?test=true&orderId=9381
// Build an object containing key-value pairs
export const queryStringParams = window.location.search
.split('?')[1]
.split('&')
.map(keyValue => keyValue.split('='))
.reduce<QueryStringParams>((params, [key, value]) => {
params[key] = value;
return params;
}, {});
type QueryStringParams = {
[key: string]: string;
};
// Return URL parameter called "orderId"
return queryStringParams.orderId;
于 2019-07-31T02:16:51.727 回答
6
这是我正在寻找一种干净的方法来做到这一点的 N++ 时间。
会保存在这里，以防我回来，因为我知道我会...
const parseUrlQuery = (value) => {
var urlParams = new URL(value).searchParams
return Array.from(urlParams.keys()).reduce((acc, key) => {
acc[key] = urlParams.getAll(key)
return acc
}, {})
}
console.log(parseUrlQuery('http://url/path?param1=A¶m1=B¶m2=ABC¶m3=61569'))于 2021-07-23T12:27:11.840 回答
5
这是我所做的：
var uriParams = getSearchParameters();
alert(uriParams.c);
// background functions:
// Get object/associative array of URL parameters
function getSearchParameters () {
var prmstr = window.location.search.substr(1);
return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}
// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
var params = {},
prmarr = prmstr.split("&");
for (var i = 0; i < prmarr.length; i++) {
var tmparr = prmarr[i].split("=");
params[tmparr[0]] = tmparr[1];
}
return params;
}
于 2014-06-18T18:03:44.900 回答
5
// http:localhost:8080/path?param_1=a¶m_2=b
var getParamsMap = function () {
var params = window.location.search.split("&");
var paramsMap = {};
params.forEach(function (p) {
var v = p.split("=");
paramsMap[v[0]]=decodeURIComponent(v[1]);
});
return paramsMap;
};
// -----------------------
console.log(getParamsMap()["param_1"]); // should log "a"
于 2016-11-16T04:05:39.703 回答
5
Eldon McGuinness 的这篇 Gist是迄今为止我见过的最完整的 JavaScript 查询字符串解析器实现。
不幸的是，它是作为一个 jQuery 插件编写的。
我将其重写为 vanilla JS 并进行了一些改进：
function parseQuery(str) {
var qso = {};
var qs = (str || document.location.search);
// Check for an empty querystring
if (qs == "") {
return qso;
}
// Normalize the querystring
qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
while (qs.indexOf("&&") != -1) {
qs = qs.replace(/&&/g, '&');
}
qs = qs.replace(/([\&]+$)/, '');
// Break the querystring into parts
qs = qs.split("&");
// Build the querystring object
for (var i = 0; i < qs.length; i++) {
var qi = qs[i].split("=");
qi = qi.map(function(n) {
return decodeURIComponent(n)
});
if (typeof qi[1] === "undefined") {
qi[1] = null;
}
if (typeof qso[qi[0]] !== "undefined") {
// If a key already exists then make this an object
if (typeof (qso[qi[0]]) == "string") {
var temp = qso[qi[0]];
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = [];
qso[qi[0]].push(temp);
qso[qi[0]].push(qi[1]);
} else if (typeof (qso[qi[0]]) == "object") {
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]].push(qi[1]);
}
} else {
// If no key exists just set it as a string
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = qi[1];
}
}
return qso;
}
// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));另请参阅此 Fiddle。
于 2018-04-10T13:23:22.987 回答
5
这是获取单个参数的简短函数：
function getUrlParam(paramName) {
var match = window.location.search.match("[?&]" + paramName + "(?:&|$|=([^&]*))");
return match ? (match[1] ? decodeURIComponent(match[1]) : "") : null;
}
这些特殊情况的处理与 URLSearchParams 一致：
如果缺少参数，
null则返回。如果参数存在但没有“=”（例如“?param”），
""则返回。
笔记！如果参数名称有可能包含特殊的 URL 或正则表达式字符（例如，如果它来自用户输入），则需要对其进行转义。这可以像这样轻松完成：
function getUrlParamWithSpecialName(paramName) {
return getUrlParam(encodeURIComponent(paramName).replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
}
于 2020-01-13T07:42:37.287 回答
5
window.location.search.slice(1).split('&').reduce((res, val) => ({...res, [val.split('=')[0]]: val.split('=')[1]}), {})
于 2020-07-21T18:46:29.353 回答
4
您可以添加一个输入框，然后要求用户将值复制到其中......这样真的很容易：
<h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1>
<input type='text' id='the-url-value' />
<input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' />
<script>
//...read the value on click
好的，但说真的......我发现了这段代码，它似乎工作得很好：
http://www.developerdrive.com/2013/08/turning-the-querystring-into-a-json-object-using-javascript/
function queryToJSON() {
var pairs = location.search.slice(1).split('&');
var result = {};
pairs.forEach(function(pair) {
pair = pair.split('=');
result[pair[0]] = decodeURIComponent(pair[1] || '');
});
return JSON.parse(JSON.stringify(result));
}
var query = queryToJSON();
于 2014-05-25T21:38:01.663 回答
4
window.location.href.split("?")
然后忽略第一个索引
Array.prototype.slice.call(window.location.href.split("?"), 1)
返回您的 url 参数的数组
var paramArray = Array.prototype.slice.call(window.location.href.split(/[?=]+/), 1);
var paramObject = paramArray.reduce(function(x, y, i, a){ (i%2==0) ? (x[y] = a[i+1]) : void 0; return x; }, {});
有点冗长/hacky但也很实用，paramObject包含映射为js对象的所有参数
于 2014-11-18T11:38:29.610 回答
4
以下是将url 查询参数解析为 Object的angularJs源代码：
function tryDecodeURIComponent(value) {
try {
return decodeURIComponent(value);
} catch (e) {
// Ignore any invalid uri component
}
}
function isDefined(value) {return typeof value !== 'undefined';}
function parseKeyValue(keyValue) {
keyValue = keyValue.replace(/^\?/, '');
var obj = {}, key_value, key;
var iter = (keyValue || "").split('&');
for (var i=0; i<iter.length; i++) {
var kValue = iter[i];
if (kValue) {
key_value = kValue.replace(/\+/g,'%20').split('=');
key = tryDecodeURIComponent(key_value[0]);
if (isDefined(key)) {
var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true;
if (!hasOwnProperty.call(obj, key)) {
obj[key] = val;
} else if (isArray(obj[key])) {
obj[key].push(val);
} else {
obj[key] = [obj[key],val];
}
}
}
};
return obj;
}
alert(JSON.stringify(parseKeyValue('?a=1&b=3&c=m2-m3-m4-m5')));您可以将此功能添加到window.location：
window.location.query = function query(arg){
q = parseKeyValue(this.search);
if (!isDefined(arg)) {
return q;
}
if (q.hasOwnProperty(arg)) {
return q[arg];
} else {
return "";
}
}
// assuming you have this url :
// http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
console.log(window.location.query())
// Object {a: "1", b: "3", c: "m2-m3-m4-m5"}
console.log(window.location.query('c'))
// "m2-m3-m4-m5"
于 2015-05-19T14:43:10.783 回答
4
一个班轮和 IE11 友好：
> (window.location.href).match('c=([^&]*)')[1]
> "m2-m3-m4-m5"
于 2019-06-27T14:51:09.497 回答
3
我喜欢尽可能地写速记：
网址：example.com/mortgage_calc.htm?pmts=120&intr=6.8&prin=10000
香草Javascript：
for ( var vObj = {}, i=0, vArr = window.location.search.substring(1).split('&');
i < vArr.length; v = vArr[i++].split('='), vObj[v[0]] = v[1] ){}
// vObj = {pmts: "120", intr: "6.8", prin: "10000"}
于 2014-03-25T17:31:52.720 回答
3
function getParamValue(param) {
var urlParamString = location.search.split(param + "=");
if (urlParamString.length <= 1) return "";
else {
var tmp = urlParamString[1].split("&");
return tmp[0];
}
}
无论参数是否最后，这都应该适用于您的情况。
于 2015-11-19T18:08:58.867 回答
3
我们可以通过更简单的方式获取c参数值，而无需循环所有参数，请参阅下面的 jQuery 获取参数。
1. 获取参数值：
var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"")
（或者）
url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"")
作为字符串返回
“m2-m3-m4-m5”
2. 替换参数值：
var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)
于 2016-10-01T16:14:44.860 回答
3
您可以简单地使用核心 javascript 将参数的键值作为 js 对象获取：
var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
var url = new URL(url_string);
let obj = {};
var c = url.searchParams.forEach((value, key) => {
obj[key] = value;
});
console.log(obj);
于 2019-02-15T11:52:54.990 回答
3
从 window.location 中的搜索对象中提取所有 url 参数作为 json
export const getURLParams = location => {
const searchParams = new URLSearchParams(location.search)
const params = {}
for (let key of searchParams.keys()) {
params[key] = searchParams.get(key)
}
return params
}
console.log(getURLParams({ search: '?query=someting&anotherquery=anotherthing' }))
// --> {query: "someting", anotherquery: "anotherthing"}
于 2019-03-28T11:32:50.093 回答
2
这是一个我觉得更具可读性的解决方案——但它需要一个.forEach()用于 < IE8 的 shim：
var getParams = function () {
var params = {};
if (location.search) {
var parts = location.search.slice(1).split('&');
parts.forEach(function (part) {
var pair = part.split('=');
pair[0] = decodeURIComponent(pair[0]);
pair[1] = decodeURIComponent(pair[1]);
params[pair[0]] = (pair[1] !== 'undefined') ?
pair[1] : true;
});
}
return params;
}
于 2013-10-02T07:35:38.167 回答
2
这是我的解决方案：jsfiddle
下面的方法返回一个包含给定 URL 参数的字典。如果没有参数，它将为空。
function getParams(url){
var paramsStart = url.indexOf('?');
var params = null;
//no params available
if(paramsStart != -1){
var paramsString = url.substring(url.indexOf('?') + 1, url.length);
//only '?' available
if(paramsString != ""){
var paramsPairs = paramsString.split('&');
//preparing
params = {};
var empty = true;
var index = 0;
var key = "";
var val = "";
for(i = 0, len = paramsPairs.length; i < len; i++){
index = paramsPairs[i].indexOf('=');
//if assignment symbol found
if(index != -1){
key = paramsPairs[i].substring(0, index);
val = paramsPairs[i].substring(index + 1, paramsPairs[i].length);
if(key != "" && val != ""){
//extend here for decoding, integer parsing, whatever...
params[key] = val;
if(empty){
empty = false;
}
}
}
}
if(empty){
params = null;
}
}
}
return params;
}
于 2014-06-12T15:29:11.640 回答
2
使用道场。这里没有其他解决方案如此简短或经过充分测试：
require(["dojo/io-query"], function(ioQuery){
var uri = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ";
var query = uri.substring(uri.indexOf("?") + 1, uri.length);
var queryObject = ioQuery.queryToObject(query);
console.log(queryObject.c); //prints m2-m3-m4-m5
});
于 2014-10-03T22:55:04.353 回答
2
PHPparse_str模仿者.. :)
// Handles also array params well
function parseQueryString(query) {
var pars = (query != null ? query : "").replace(/&+/g, "&").split('&'),
par, key, val, re = /^([\w]+)\[(.*)\]/i, ra, ks, ki, i = 0,
params = {};
while ((par = pars.shift()) && (par = par.split('=', 2))) {
key = decodeURIComponent(par[0]);
// prevent param value going to be "undefined" as string
val = decodeURIComponent(par[1] || "").replace(/\+/g, " ");
// check array params
if (ra = re.exec(key)) {
ks = ra[1];
// init array param
if (!(ks in params)) {
params[ks] = {};
}
// set int key
ki = (ra[2] != "") ? ra[2] : i++;
// set array param
params[ks][ki] = val;
// go on..
continue;
}
// set param
params[key] = val;
}
return params;
}
var query = 'foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last';
var params = parseQueryString(query);
console.log(params)
console.log(params.foo) // 1
console.log(params.bar) // The bar!
console.log(params.arr[0]) // a0
console.log(params.arr[1]) // a1
console.log(params.arr.s) // as
console.log(params.arr.none) // undefined
console.log("isset" in params) // true like: isset($_GET['isset'])
/*
// in php
parse_str('foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last', $query);
print_r($query);
Array
(
[foo] => 1
[bar] => The bar!
[arr] => Array
(
[0] => a0
[1] => a1
[s] => as
[2] => last
)
[isset] =>
)*/
于 2014-12-25T20:07:42.930 回答
2
尝试
url.match(/[?&]c=([^&]*)/)[1]
var url = "www.test.com/t.html?a=1&bc=3&c=m2-m3-m4-m5";
c= url.match(/[?&]c=([^&]*)/)[1];
console.log(c);这是 Daniel Sokolowski回答 2019 年 6 月 27 日的改进。正则表达式解释
[?&]第一个匹配的字符必须是?or&（省略参数 likeac=）c=以=char 结尾的参数名称(...)第一组比赛[^&]*零个或多个字符 (*) 不同于 (^)&[1]从匹配数组中选择第一组
于 2020-01-17T13:18:36.990 回答
2
简化版，经过测试
function get(name){
var r = /[?&]([^=#]+)=([^&#]*)/g,p={},match;
while(match = r.exec(window.location)) p[match[1]] = match[2];
return p[name];
}
用法：
var 参数 = get['参数']
于 2020-10-11T23:39:32.217 回答
1
我更喜欢使用可用资源，而不是重新发明如何解析这些参数。
- 将 URL 解析为对象
- 提取搜索参数部分
- 将 searchParams 从 Iterator 转换为具有数组扩展的 Array。
- 将键值数组缩减为对象。
const url = 'http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
const params = [... new URL(url).searchParams.entries()]
.reduce((a, c) => Object.assign(a, {[c[0]]:c[1]}), {})
console.log(params);于 2018-10-02T16:16:25.787 回答
1
function parseUrl(url){
let urlParam = url.split("?")[1];
console.log("---------> URL param : " + urlParam);
urlParam = urlParam.split("&");
let urlParamObject = {};
for(let i=0;i < urlParam.length;i++){
let tmp = urlParam[i].split("=");
urlParamObject[tmp[0]] = tmp[1];
}
return urlParamObject;
}
let param = parseUrl(url);
param.a // output 10
param.b // output 20
于 2019-03-09T06:43:00.927 回答
1
获取单个参数值：
function getQueryParameter(query, parameter) {
return (window.location.href.split(parameter + '=')[1].split('&')[0]);}
于 2019-05-31T08:48:03.957 回答
1
您可以通过以下功能做到这一点：
function getParameter(parameterName){
let paramsIndex = document.URL.indexOf("?");
let params="";
if(paramsIndex>0)
params=document.URL.substring(paramsIndex+1, document.URL.length).split("&");
let result = [];
for(let i=0;i<params.length;i++)
{
console.warn(params[i].split("=")[0].toString()+ "," + params[i].split("=")[1].toString());
var obj = {"key":params[i].split("=")[0].toString(),"value":params[i].split("=")[1].toString()};
result.push(obj);
}
return passedValue = result.find(x=>x.key==parameterName).value;
}
现在您可以使用getParameter("parameterName")
于 2020-10-11T21:21:03.520 回答
0
从许多答案中学习（例如VaMoose的、Gnarf的或Blixt的）。
您可以创建一个对象（或使用 Location 对象）并添加一个方法，该方法允许您获取 URL 参数，解码并使用 JS 样式：
Url = {
params: undefined,
get get(){
if(!this.params){
var vars = {};
if(url.length!==0)
url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value){
key=decodeURIComponent(key);
if(typeof vars[key]==="undefined") {
vars[key]= decodeURIComponent(value);
}
else {
vars[key]= [].concat(vars[key], decodeURIComponent(value));
}
});
this.params = vars;
}
return this.params;
}
};
这允许仅使用调用该方法Url.get。
第一次它会从 url 中获取对象，下一次它将加载保存的对象。
例子
在 url like?param1=param1Value¶m2=param2Value¶m1=param1Value2中，可以像这样获取参数：
Url.get.param1 //["param1Value","param1Value2"]
Url.get.param2 //"param2Value"
于 2015-01-28T21:26:26.850 回答
0
$_GET: function (param) {
var regex = new RegExp("(?:[?&]+" + param + "=)([^&]*)?", "i");
var match = regex.exec(window.location.href);
return match === null ? match : match[1];
}
于 2016-03-30T08:35:29.080 回答
0
这有效：
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
我没有得到任何其他最佳答案。
于 2016-10-07T17:01:17.303 回答
0
我开发了一个 JavaScript 工具，只需一步即可完成
首先，将此脚本链接复制到 HTML 的头部：
<script src="https://booligoosh.github.io/urlParams/urlParams.js"></script>
然后简单地获取cusing urlParams.cor的值urlParams['c']。简单的！
另请记住，我确实开发了这个，但它是解决您问题的简单而无忧无虑的解决方案。此工具还包括十六进制字符解码，这通常很有帮助。
于 2017-05-22T09:16:02.337 回答
0
正如在最新浏览器中的第一个答案中提到的，我们可以使用新的URL api，但是一个更一致的原生 javascript 简单的解决方案来获取对象中的所有参数并使用它们可能是
例如这个类说locationUtil
const locationSearch = () => window.location.search;
const getParams = () => {
const usefulSearch = locationSearch().replace('?', '');
const params = {};
usefulSearch.split('&').map(p => {
const searchParam = p.split('=');
const [key, value] = searchParam;
params[key] = value;
return params;
});
return params;
};
export const searchParams = getParams();
用法 :: 现在你可以在你的类中导入 searchParams 对象
例如 url ---https://www.google.com?key1=https://www.linkedin.com/in/spiara/&valid=true
import { searchParams } from '../somewhere/locationUtil';
const {key1, valid} = searchParams;
if(valid) {
console.log("Do Something");
window.location.href = key1;
}
于 2019-01-15T12:43:29.910 回答
-1
你可以运行这个函数
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var source = getUrlVars()["lm_supplier"];
var el = source.toString();
var result= decodeURI(el);
console.log(result)
这个函数从url获取你想要的，var source = getUrlVars()["put what you want to get from the url"];
于 2017-11-05T13:42:20.790 回答
-1
function gup() {
var qs = document.location.search;
qs = qs.split('+').join(' ');
var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs))
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
return params;
}
像使用它一样
var params = gup()
进而
params.param1
params.param2
于 2017-11-07T07:21:04.630 回答
-1
在我的情况下（使用所有子 url 重定向到新域）::
window.location.replace("https://newdomain.com" + window.location.pathname);
于 2018-03-29T19:20:09.670 回答
-1
我尝试了很多不同的方法，但是当我在 URL 中查找参数值时，这个久经考验的真正正则表达式函数对我有用，希望这会有所帮助：
var text = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5'
function QueryString(item, text){
var foundString = text.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));
return foundString ? foundString[1] : foundString;
}
console.log(QueryString('c', text));使用 likeQueuryString('param_name', url)并将返回值
m2-m3-m4-m5
于 2018-07-13T09:20:37.187 回答
-1
我的解决方案：
/**
* get object with params from query of url
*/
const getParams = (url) => {
const params = {};
const parser = document.createElement('a');
parser.href = url;
const query = parser.search.substring(1);
if (query !== '') {
const vars = query.split('&');
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split('=');
const key = decodeURIComponent(pair[0]).replace('[]', '');
const value = decodeURIComponent(pair[1]);
if (key in params) {
if (Array.isArray(params[key])) {
params[key].push(value);
} else {
params[key] = [params[key]];
params[key].push(value);
}
} else params[key] = value;
}
}
return params;
}
于 2021-03-27T07:44:33.043 回答
-1
同一主题的变体....此函数通过使用两个正则表达式来解析 URL，返回所有参数的键/值字典。这在替换参数值时可能很有用。这应该适用于旧浏览器
function get_all_params(url)
{
var regexS = /(?<=&|\?)([^=]*=[^&#]*)/;
var regex = new RegExp( regexS,'g' );
var results = url.match(regex);
if(results==null)
{
return {};
}
else
{
returned={};
for(i=0;i<results.length;i++)
{
var tmp=results[i];
var regexS2="([^=]+)=([^=]+)";
var regex2 = new RegExp( regexS2 );
var results2 = regex2.exec(tmp );
returned[results2[1]]=results2[2];
}
return returned;
}
}
于 2021-12-03T11:02:20.880 回答
-2
我一遍又一遍地遇到同样的问题。现在这里有很多用户，我以我的 HAX 工作而闻名，
所以我通过使用解决它：
PHP：
echo "<p style="display:none" id=\"hidden-GET\">".$_GET['id']."</p>";
JS：
document.getElementById("hidden-GET").innerHTML;
简单的HAX，但工作。
于 2018-09-19T17:40:24.047 回答