本文共 17271 字,大约阅读时间需要 57 分钟。
我有一个带有一些GET参数的,如下所示:
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
我需要得到c
的整个值。 我尝试读取URL,但是只有m2
。 如何使用执行此操作?
我见过的大多数实现都错过了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);
我很久以前就发现这很简单:
function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; }
然后这样称呼它:
var fType = getUrlVars()["type"];
这是仅检查一个参数的简便方法:
范例网址:
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充满了参数,它也可以正常工作。
这是一个没有正则表达式且具有最小变异的递归解决方案(仅params对象是变异的,我相信这在JS中是不可避免的)。
很棒,因为:
码:
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 wantparams['c'];
另一个建议。
已经有一些好的答案,但是我发现它们不必要地复杂且难以理解。 它简短,简单,并且返回一个简单的关联数组,其键名与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'] );
...将打印“墨累”。
这个问题有太多答案,所以我要再添加一个。
/** * 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 presentgetURIParameter("id", true) // returns an array of all ids
这可以处理空参数(那些键不带"=value"
),公开标量和基于数组的值检索API以及正确的URI组件解码。
这是我的工作:
var uriParams = getSearchParameters();alert(uriParams.c);// background functions:// Get object/associative array of URL parametersfunction getSearchParameters () { var prmstr = window.location.search.substr(1); return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};}// convert parameters from url-style string to associative arrayfunction 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;}
// 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=falsevar id = getUrlVars()["locationId"];
从这里获得: :
我写了一个更简单优雅的解决方案。
var arr = document.URL.match(/room=([0-9]+)/)var room = arr[1];
或者,如果您不想重新发明URI解析轮,请使用
要获取名为foo的参数的值:
new URI((''+document.location)).search(true).foo
那是什么
这是一个小提琴。... :
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但也有功能
对于像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
我在这里发布一个例子。 但这是在jQuery中。 希望它能帮助其他人:
这是用于将url查询参数解析为Object的源代码:
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
您可以将此函数添加到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-m5console.log(window.location.query())// Object {a: "1", b: "3", c: "m2-m3-m4-m5"}console.log(window.location.query('c'))// "m2-m3-m4-m5"
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())
我做了一个做到这一点的功能:
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(paramReducer, {})
我需要读取URL GET变量并完成基于url参数的操作。 我在高处寻找解决方案,并遇到了这段小代码。 它基本上会读取当前页面的url,在URL上执行一些正则表达式,然后将url参数保存在一个关联数组中,我们可以方便地访问它。
因此,举个例子,如果我们在URL的底部放置了以下URL。
http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July
我们需要获取参数id和page的所有操作就是调用此方法:
该守则将是:
简单的方法
function getParams(url){ var regex = /[?&]([^=#]+)=([^&#]*)/g, params = {}, match; while(match = regex.exec(url)) { params[match[1]] = match[2]; } return params; }
然后像getParams(url)这样称呼它
浏览器供应商已通过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中受支持。 有关浏览器支持的列表, 。
Google的工程师Eric Bidelman 将此用于不受支持的浏览器。
我用
function getVal(str) { var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)')); return v ? v[1] : null;}
这是我的解决方案。 正如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".
// http:localhost:8080/path?param_1=a¶m_2=bvar 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"
使用超级简单方法。
function getParam(param){ return new URLSearchParams(window.location.search).get(param);}
目前在Chrome,Firefox,Safari,Edge和 。
撰写的是迄今为止我所见过的最完整的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"));
另请参 。
最短的方法:
new URL(location.href).searchParams.get("my_key");
replace()
方法的最简单方法是: 从urlStr
字符串:
paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
或从当前网址 :
paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
说明:
/.*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}'`);
我使用库。 它使您可以完全按照自己的要求进行操作:
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 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
JavaScript 本身没有内置处理查询字符串参数的内容。
在(现代)浏览器中运行的代码可以使用 (这是浏览器为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),您可以使用或该答案的原始版本中早于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);
您可以在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;
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')
转载地址:http://htogj.baihongyu.com/