我有一个带有一些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执行此操作?
当前回答
我的解决方案:
/**
* 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;
}
其他回答
Eldon McGuinness的Gist是迄今为止我见过的JavaScript查询字符串解析器的最完整的实现。
不幸的是,它是作为jQuery插件编写的。
我将其重写为vanilla JS,并做了一些改进:
函数parseQuery(str){var qso={};var qs=(str|| document.location.search);//检查是否有空的查询字符串如果(qs==“”){回归qso;}//规范化查询字符串qs=qs.replace(/(^\?)/,“”).replace(/;/g,“&”);而(qs.indexOf(“&&”)!=-1) {qs=qs.替换(/&&/g,'&');}qs=qs.replace(/([\&]+$)/,“”);//将查询字符串拆分为多个部分qs=qs.拆分(“&”);//生成querystring对象对于(变量i=0;i<qs.length;i++){var qi=qs[i].split(“=”);qi=qi.map(函数(n){返回decodeURIComponent(n)});if(类型qi[1]==“未定义”){qi[1]=空;}if(qso[qi[0]的类型!==“未定义”){//如果键已经存在,则将其设置为对象if(typeof(qso[qi[0])==“string”){var temp=qso[qi[0]];如果(qi[1]==“”){qi[1]=空;}qso[qi[0]]=[];qso[qi[0]].推(温度);qso[qi[0]。push(qi[1]);}否则如果(typeof(qso[qi[0])==“对象”){如果(qi[1]==“”){qi[1]=空;}qso[qi[0]。push(qi[1]);}}其他{//如果没有键,只需将其设置为字符串如果(qi[1]==“”){qi[1]=空;}qso[qi[0]]=qi[1];}}回归qso;}//演示console.log(parseQuery(“?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5 B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2My%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%2A%2F%3F%2Fw3schools2.com%2Fmy%20est.asp%3Fame%3Dst%A5%A5le%26car%3Dsaab”);
另请参见此Fiddle。
function getParamValue(param) {
var urlParamString = location.search.split(param + "=");
if (urlParamString.length <= 1) return "";
else {
var tmp = urlParamString[1].split("&");
return tmp[0];
}
}
无论参数是否为最后一个,这都适用于您的情况。
我很早以前就发现了这一点,非常简单:
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
然后这样称呼:
var fType = getUrlVars()["type"];
以json形式从window.location中的搜索对象中提取所有url参数
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"}
还有一个建议。
已经有一些很好的答案,但我发现它们不必要地复杂,难以理解。这是一个简短、简单的数组,它返回一个简单的关联数组,其中键名与URL中的令牌名相对应。
我为那些想学习的人添加了一个带有评论的版本。
注意,它的循环依赖于jQuery($.each),我建议使用jQuery而不是forEach。我发现,全面使用jQuery来确保跨浏览器兼容性比插入单独的补丁来支持旧浏览器不支持的新功能更简单。
编辑:在我写了这篇文章后,我注意到埃里克·埃利奥特的回答几乎相同,尽管它使用了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'] );
…上面会印着“murray”。