我有一个带有一些GET参数的URL，如下所示：
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
我需要得到c的整个值。 我尝试读取URL，但是只有m2 。 如何使用JavaScript执行此操作？
#1楼
我见过的大多数实现都错过了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);
#2楼
我很久以前就发现这很简单：
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
然后这样称呼它：
var fType = getUrlVars()["type"];
#3楼
这是仅检查一个参数的简便方法：
范例网址：
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充满了参数，它也可以正常工作。
#4楼
这是一个没有正则表达式且具有最小变异的递归解决方案（仅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'];
#5楼
另一个建议。
已经有一些好的答案，但是我发现它们不必要地复杂且难以理解。 它简短，简单，并且返回一个简单的关联数组，其键名与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'] );
...将打印“墨累”。
#6楼
这个问题有太多答案，所以我要再添加一个。
/**
* 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组件解码。
#7楼
这是我的工作：
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;
}
#8楼
// 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
#9楼
我写了一个更简单优雅的解决方案。
var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];
#10楼
或者，如果您不想重新发明URI解析轮，请使用URI.js
要获取名为foo的参数的值：
new URI((''+document.location)).search(true).foo
那是什么
- 将document.location转换为字符串（是一个对象）
- 将该字符串提供给URI.js的URI类构造函数
- 调用search（）函数以获取网址的搜索（查询）部分
（传递true告诉它输出一个对象） - 访问结果对象的foo属性以获取值
这是一个小提琴。... http : //jsfiddle.net/m6tett01/12/
#11楼
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; }, {});
paramObject包含所有映射为js对象的参数，但有点冗长/ hacky但也有功能
#12楼
对于像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
}
}
#13楼
我在这里发布一个例子。 但这是在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>
#14楼
这是用于将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"
#15楼
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())
#16楼
我做了一个做到这一点的功能：
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;
};
更新5/26/2017，这是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
},
{}
)
更新2/13/2019，这是与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, {})
#17楼
我需要读取URL GET变量并完成基于url参数的操作。 我在高处寻找解决方案，并遇到了这段小代码。 它基本上会读取当前页面的url，在URL上执行一些正则表达式，然后将url参数保存在一个关联数组中，我们可以方便地访问它。
因此，举个例子，如果我们在URL的底部放置了以下URL。
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>
#18楼
简单的方法
function getParams(url){
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while(match = regex.exec(url)) {
params[match[1]] = match[2];
}
return params;
}
然后像getParams（url）这样称呼它
#19楼
浏览器供应商已通过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/zh-CN/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
Google的工程师Eric Bidelman 建议将此polyfill用于不受支持的浏览器。
#20楼
我用
function getVal(str) {
var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
return v ? v[1] : null;
}
#21楼
这是我的解决方案。 正如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".
#22楼
// 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"
#23楼
使用URLSearchParams的超级简单方法。
function getParam(param){
return new URLSearchParams(window.location.search).get(param);
}
目前在Chrome，Firefox，Safari，Edge和其他版本中支持该功能 。
#24楼
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 。
#25楼
最短的方法：
new URL(location.href).searchParams.get("my_key");
#26楼
使用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}'`);
#27楼
我使用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'
#28楼
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";
}
}
#29楼
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);
#30楼
您可以在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;
#31楼
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')
2318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
