我有一个带有一些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执行此操作?
当前回答
您可以在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;
其他回答
我更喜欢使用可用的资源,而不是重新设计如何解析这些参数。
将URL解析为对象提取搜索参数部分将searchParams从迭代器转换为具有数组扩展的数组。将键值数组缩减为一个对象。
常量url='http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';const params=[…新URL(URL).searchParams.entries()].reduce((a,c)=>对象.assign(a,{[c[0]]:c[1]}),{})console.log(参数);
您可以简单地使用核心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);
从许多答案中学习(如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中,如?param1=param1Value¶m2=param2Value¶m1=param1Value2,参数的获取方式如下:
Url.get.param1 //["param1Value","param1Value2"]
Url.get.param2 //"param2Value"
您可以在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;
我做了一个函数来实现这一点:
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 3一起使用的更新的TypeScript实现。
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, {})