我有一个带有GET参数的URL,如下所示:
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
我需要获取整个 c 的值。我尝试读取URL,但我只得到了 m2 。如何使用JavaScript实现这一点?
我有一个带有GET参数的URL,如下所示:
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
我需要获取整个 c 的值。我尝试读取URL,但我只得到了 m2 。如何使用JavaScript实现这一点?
我写了一个函数来实现这个功能:
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预设的stage 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, {})
Object {"": ""}
。 - Ilya Semenovfunction 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";
}
}
最短的方法:
new URL(location.href).searchParams.get("my_key");
new URL(location.href).searchParams.get("my_key")
而不是 URLSearchParams
,因为后者在检索任何URL的第一个查询参数时会失败。 - Travis ClarkeECMAScript 6 解决方案:
var params = window.location.search
.substring(1)
.split("&")
.map(v => v.split("="))
.reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())
function urlParams(url) {
const [, searchParams = ''] = url.split('?')
return searchParams.split('&')
.map(v => v.split('='))
.reduce((map, [key = '', value]) => key.length ? map.set(key, decodeURIComponent(value)) : map, new Map())
}
- marianocodes我使用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'
我使用
function getVal(str) {
var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
return v ? v[1] : null;
}
window.location.search
不包括如 #id
的哈希部分。 - Fancyounglocation.href
来匹配结果,而不是 location.search
。谢谢。 - Ayano这是我的解决方案。在回答这个问题时,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".
这个问题有太多的答案,所以我要再添加一个。
/**
* 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组件解码。
replace()
方法的最简单方式:从urlStr
字符串中:
paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
从当前的URL中:
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}'`);
http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July
<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>