从“GET”参数中获取值(JavaScript)

我有一个带有一些GET参数的URL,如下所示:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5

我需要获取c的整个值。我尝试读取URL,但我只得到m2。如何使用JavaScript执行此操作?

2727415 次浏览

JavaScript本身没有内置任何处理查询字符串参数的功能。

在(现代)浏览器中运行的代码可以使用#0对象(a网页应用程序接口)。URL也由Node.js实现:

// You can get url_string from window.location.href if you want to work with// the URL of the current pagevar url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5";var url = new URL(url_string);var c = url.searchParams.get("c");console.log(c);


对于较旧的浏览器(包括Internet Explorer),您可以使用这种聚乙烯填料

您还可以将一个用于参数名URLSearchParams并提取查询字符串以使用window.location.search.substring(1)传递给它。


您还可以使用此答案的原始版本中的代码,该代码早于URL。上面的polill是健壮的并且经过了良好的测试,但我强烈推荐它。

您可以访问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.shift());var value = decodeURIComponent(pair.join("="));// If first entry with this nameif (typeof query_string[key] === "undefined") {query_string[key] = value;// If second entry with this name} else if (typeof query_string[key] === "string") {var arr = [query_string[key], value];query_string[key] = arr;// If third or later entry with this name} else {query_string[key].push(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')

我见过的大多数实现都错过了对名称和值的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);

我使用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 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]);elsearrParamValues[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";}}

这里有一个解决方案,我觉得更具可读性-但它需要.forEach()垫片

var getParams = function () {var params = {};if (location.search) {var parts = location.search.slice(1).split('&');
parts.forEach(function (part) {var pair = part.split('=');pair[0] = decodeURIComponent(pair[0]);pair[1] = decodeURIComponent(pair[1]);params[pair[0]] = (pair[1] !== 'undefined') ?pair[1] : true;});}return params;}

很久以前我就发现了这个,很简单:

function getUrlVars() {var vars = {};var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(m,key,value) {vars[key] = value;});return vars;}

然后这样称呼它:

var fType = getUrlVars()["type"];

这是只检查一个参数的简单方法:

示例URL:

http://myserver/action?myParam=2

示例Javascript:

var myParam = location.search.split('myParam=')[1]

如果“myParam”存在于URL中…变量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 urlvar captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)var result = captured ? captured : 'myDefaultValue';

即使URL充满参数,它也可以正常工作。

这是一个没有正则表达式的递归解决方案,并且具有最小的突变(只有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 nameif (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:example.com/mortgage_calc.htm?pmts=120&; intr=6.8&prin=10000

香草Javascript:

for ( var vObj = {}, i=0, vArr = window.location.search.substring(1).split('&');i < vArr.length; v = vArr[i++].split('='), vObj[v[0]] = v[1] ){}// vObj = {pmts: "120", intr: "6.8", prin: "10000"}

还有一个建议。

已经有了一些很好的答案,但我发现它们不必要地复杂和难以理解。这很简短,简单,并返回一个简单的关联数组,其中的键名与URL中的令牌名称相对应。

我为那些想学习的人添加了一个带有评论的版本。

请注意,这依赖于jQuery($. each)作为其循环,我建议使用jQuery而不是for每个。我发现全面使用jQuery来确保跨浏览器兼容性更简单,而不是插入单个修复来支持旧浏览器不支持的新功能。

编辑:在我写了这篇文章之后,我注意到埃里克·埃利奥特的回答,这几乎是一样的,尽管它使用了for每个,而我通常反对(原因如上所述)。

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 resultvar query = location.search; // everything from the '?' onwardquery = 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 datavar token = value.split('=');
// assign the first array element (the token name) to the 'key' variablevar key = decodeURIComponent(token[0]);
// assign the second array element (the token data) to the 'data' variablevar 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"

这个问题有太多的答案,所以我再加上一个。

/*** 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组件解码。

您可以添加一个输入框,然后要求用户将值复制到其中……这种方式非常简单:

<h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1><input type='text' id='the-url-value' /><input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' />
<script>//...read the value on click

好吧,说真的……我找到了这个代码,它似乎工作得很好:

function queryToJSON() {var pairs = location.search.slice(1).split('&');
var result = {};pairs.forEach(function(pair) {pair = pair.split('=');result[pair[0]] = decodeURIComponent(pair[1] || '');});
return JSON.parse(JSON.stringify(result));}
var query = queryToJSON();

这是我的解决方案:jsfiddle

下面的方法返回一个包含给定URL参数的字典。如果没有参数,它将为空。

function getParams(url){var paramsStart = url.indexOf('?');var params = null;
//no params availableif(paramsStart != -1){var paramsString = url.substring(url.indexOf('?') + 1, url.length);
//only '?' availableif(paramsString != ""){var paramsPairs = paramsString.split('&');
//preparingparams = {};var empty = true;var index  = 0;var key = "";var val = "";
for(i = 0, len = paramsPairs.length; i < len; i++){index = paramsPairs[i].indexOf('=');
//if assignment symbol foundif(index != -1){key = paramsPairs[i].substring(0, index);val = paramsPairs[i].substring(index + 1, paramsPairs[i].length);
if(key != "" && val != ""){
//extend here for decoding, integer parsing, whatever...
params[key] = val;
if(empty){empty = false;}}}}
if(empty){params = null;}}}
return params;}

这就是我所做的:

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"];

从这里开始:http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html

使用dojo。这里没有其他解决方案如此简短或经过良好测试:

require(["dojo/io-query"], function(ioQuery){var uri = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ";var query = uri.substring(uri.indexOf("?") + 1, uri.length);var queryObject = ioQuery.queryToObject(query);console.log(queryObject.c); //prints m2-m3-m4-m5});

我写了一个更简单和优雅的解决方案。

var arr = document.URL.match(/room=([0-9]+)/)var room = arr[1];

或者,如果您不想重新发明URI解析轮,请使用URI.js

要获取名为foo的参数的值:

new URI((''+document.location)).search(true).foo

它的作用是

  1. 将document.location转换为字符串(它是一个对象)
  2. 将该字符串提供给URI.js的URI类构造器
  3. 调用search()函数以获取url的搜索(查询)部分
    (传递true告诉它输出一个对象)
  4. 访问结果对象的foo属性以获取值

这里有一个小提琴……http://jsfiddle.net/m6tett01/12/

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; }, {});

有点冗长/hacky但也很实用,参数对象包含映射为js对象的所有参数

PHPparse_str抄袭…:)

// Handles also array params wellfunction parseQueryString(query) {var pars = (query != null ? query : "").replace(/&+/g, "&").split('&'),par, key, val, re = /^([\w]+)\[(.*)\]/i, ra, ks, ki, i = 0,params = {};
while ((par = pars.shift()) && (par = par.split('=', 2))) {key = decodeURIComponent(par[0]);// prevent param value going to be "undefined" as stringval = decodeURIComponent(par[1] || "").replace(/\+/g, " ");// check array paramsif (ra = re.exec(key)) {ks = ra[1];// init array paramif (!(ks in params)) {params[ks] = {};}// set int keyki = (ra[2] != "") ? ra[2] : i++;// set array paramparams[ks][ki] = val;// go on..continue;}// set paramparams[key] = val;}
return params;}
var query = 'foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last';var params = parseQueryString(query);console.log(params)console.log(params.foo)        // 1console.log(params.bar)        // The bar!console.log(params.arr[0])     // a0console.log(params.arr[1])     // a1console.log(params.arr.s)      // asconsole.log(params.arr.none)   // undefinedconsole.log("isset" in params) // true like: isset($_GET['isset'])


/*// in phpparse_str('foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last', $query);print_r($query);
Array([foo] => 1[bar] => The bar![arr] => Array([0] => a0[1] => a1[s] => as[2] => last)
[isset] =>)*/

从许多答案中学习(如VaMooseGnarfBlixt)。

您可以创建一个对象(或使用位置对象)并添加一个方法,该方法允许您获取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中获取对象,下一次它会加载保存的对象。

示例

在像?param1=param1Value&param2=param2Value&param1=param1Value2这样的url中,可以像这样获取参数:

Url.get.param1 //["param1Value","param1Value2"]Url.get.param2 //"param2Value"

对于像这样的单个参数值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}}

在这里我发布了一个例子。但它是在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>

以下是将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"

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;};

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 {}

更新3/26/2018,这是一个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实现,适用于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, {})

我需要读取一个URL GET变量并根据url参数完成一个操作。我到处寻找解决方案,遇到了这个小段代码。它基本上读取当前页面url,对URL执行一些正则表达式,然后将url参数保存在关联数组中,我们可以轻松访问。

举个例子,如果我们有下面的URL,底部有javascript。

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>

简单的方法

function getParams(url){var regex = /[?&]([^=#]+)=([^&#]*)/g,params = {},match;while(match = regex.exec(url)) {params[match[1]] = match[2];}return params;}

然后像getParams(url)一样调用它

function getParamValue(param) {var urlParamString = location.search.split(param + "=");if (urlParamString.length <= 1) return "";else {var tmp = urlParamString[1].split("&");return tmp[0];}}

这应该适用于您的情况,无论参数是否最后。

浏览器供应商已经通过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/en-US/docs/Web/API/URLSearchParamshttps://developer.mozilla.org/en-US/docs/Web/API/URL/URL

https://url.spec.whatwg.org/

谷歌的工程师埃里克·比德尔曼建议将此聚填充用于不受支持的浏览器。

我使用

function getVal(str) {var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));return v ? v[1] : null;}
$_GET: function (param) {var regex = new RegExp("(?:[?&]+" + param + "=)([^&]*)?", "i");var match = regex.exec(window.location.href);return match === null ? match : match[1];}

这是我的解决方案。正如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".

我们可以以更简单的方式获取c参数值,而无需循环所有参数,请参阅下面的jQuery获取参数。

1.获取参数值:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"")

(或)

url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"")

以字符串形式返回

"m2-m3-m4-m5"

2.要替换参数值:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)

这工作:

function getURLParameter(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [null, ''])[1].replace(/\+/g, '%20')) || null;}

我没有得到任何其他工作的最高答案。

// http:localhost:8080/path?param_1=a&param_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"

使用参数名URLSearchParams的超级简单方法。

function getParam(param){return new URLSearchParams(window.location.search).get(param);}

它目前支持Chrome,Firefox,Safari,Edge和其他

我开发了一个JavaScript工具来完成这一步

首先,将此脚本链接复制到超文本标记语言的头部:

<script src="https://booligoosh.github.io/urlParams/urlParams.js"></script>

然后简单地使用urlParams.curlParams['c']获取c的值。简单!

你可以看到一个真正的演示使用你的值在这里

还要记住,我确实开发了这个,但它是一个简单而无忧无虑的问题解决方案。此工具还包括十六进制字符解码,这通常很有帮助。

您可以运行此功能

    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;}
var source = getUrlVars()["lm_supplier"];var el = source.toString();var result= decodeURI(el);
console.log(result)

这个函数从url中得到你想要的,var source=getUrlVars()["输入你想从URL中获取的内容"];

    function gup() {var qs = document.location.search;qs = qs.split('+').join(' ');var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;while (tokens = re.exec(qs))params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);return params;}

使用它就像

var params = gup()

然后

params.param1params.param2

在我的情况下(重定向到所有子URL的新域)::

window.location.replace("https://newdomain.com" + window.location.pathname);

Eldon McGuinness的主旨是迄今为止我见过的最完整的JavaScript查询字符串解析器实现。

不幸的是,它是作为一个jQuery插件编写的。

我将其重写为vanilla JS并进行了一些改进:

function parseQuery(str) {var qso = {};var qs = (str || document.location.search);// Check for an empty querystringif (qs == "") {return qso;}// Normalize the querystringqs = qs.replace(/(^\?)/, '').replace(/;/g, '&');while (qs.indexOf("&&") != -1) {qs = qs.replace(/&&/g, '&');}qs = qs.replace(/([\&]+$)/, '');// Break the querystring into partsqs = qs.split("&");// Build the querystring objectfor (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 objectif (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 stringif (qi[1] == "") {qi[1] = null;}qso[qi[0]] = qi[1];}}return qso;}
// DEMOconsole.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"));

另见这个小提琴

我尝试了很多不同的方法,但是当我在URL中查找参数值时,这个尝试过的真正的regex函数适用于我,希望这有助于:

        var text = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5'
function QueryString(item, text){var foundString = text.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));return foundString ? foundString[1] : foundString;}
console.log(QueryString('c', text));

使用likeQueuryString('param_name', url)并返回值

m2-m3-m4-m5

最短的路:

new URL(location.href).searchParams.get("my_key");

我一遍又一遍地遇到同样的问题。现在这里的许多用户现在我以我的HAX工作而闻名,

所以我通过使用来解决它:

PHP:

echo "<p style="display:none" id=\"hidden-GET\">".$_GET['id']."</p>";

js:

document.getElementById("hidden-GET").innerHTML;

简单的HAX但工作。

我更喜欢使用可用的资源,而不是重新发明如何解析这些参数。

  1. 将URL解析为对象
  2. 提取搜索参数部分
  3. 通过数组扩展将搜索参数从迭代器转换为数组。
  4. 将键值数组缩减为对象。

const url = 'http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';const params = [... new URL(url).searchParams.entries()].reduce((a, c) => Object.assign(a, {[c[0]]:c[1]}), {})
console.log(params);

正如在最新浏览器的第一个答案中提到的,我们可以使用newurl api,然而,一个更一致的原生javascript简单解决方案来获取对象中的所有参数并使用它们可能是

例如,这个类说locationUtil

const locationSearch = () => window.location.search;const getParams = () => {const usefulSearch = locationSearch().replace('?', '');const params = {};usefulSearch.split('&').map(p => {const searchParam = p.split('=');const [key, value] = searchParam;params[key] = value;return params;});return params;};
export const searchParams = getParams();

用法:: 现在你可以在你的类中导入search chParams对象

for url---https://www.google.com?key1=https://www.linkedin.com/in/spiara/&valid=true的示例

import { searchParams } from '../somewhere/locationUtil';
const {key1, valid} = searchParams;if(valid) {console.log("Do Something");window.location.href = key1;}

您可以简单地使用core 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);
function parseUrl(url){let urlParam = url.split("?")[1];console.log("---------> URL param : " + urlParam);urlParam = urlParam.split("&");let urlParamObject = {};for(let i=0;i < urlParam.length;i++){let tmp = urlParam[i].split("=");urlParamObject[tmp[0]] = tmp[1];}return urlParamObject;}
let param = parseUrl(url);param.a // output 10param.b // output 20

以jsonwindow.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"}

获取单个参数值:

function getQueryParameter(query, parameter) {return (window.location.href.split(parameter + '=')[1].split('&')[0]);}

一个班轮和IE11友好:

> (window.location.href).match('c=([^&]*)')[1]> "m2-m3-m4-m5"

使用replace()方法的最简单方法:

urlStr字符串:

paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

从当前URL

paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

说明:

  • #0-接口以字符串形式返回文档位置(页面url)。
  • #0-方法返回一个新字符串,其中模式的部分或全部匹配项被更换替换。
  • /.*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}'`);

优雅、实用的风格解决方案

让我们创建一个包含URL参数名作为键的对象,然后我们可以通过其名称轻松提取参数:

// URL: https://example.com/?test=true&orderId=9381
// Build an object containing key-value pairsexport const queryStringParams = window.location.search.split('?')[1].split('&').map(keyValue => keyValue.split('=')).reduce<QueryStringParams>((params, [key, value]) => {params[key] = value;return params;}, {});
type QueryStringParams = {[key: string]: string;};

// Return URL parameter called "orderId"return queryStringParams.orderId;

这是一个简短而简单的函数,用于获取单个参数:

function getUrlParam(paramName) {var match = window.location.search.match("[?&]" + paramName + "(?:&|$|=([^&]*))");return match ? (match[1] ? decodeURIComponent(match[1]) : "") : null;}

这些特殊情况的处理与URLSearchParams一致:

  • 如果缺少参数,则返回null

  • 如果参数存在但没有“=”(例如“?参数”),则返回""

注意!如果参数名称可能包含特殊的URL或regex字符(例如,如果它来自用户输入),您需要转义它。这可以像这样轻松完成:

function getUrlParamWithSpecialName(paramName) {return getUrlParam(encodeURIComponent(paramName).replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));}

试试看

url.match(/[?&]c=([^&]*)/)[1]

var url = "www.test.com/t.html?a=1&bc=3&c=m2-m3-m4-m5";
c= url.match(/[?&]c=([^&]*)/)[1];
console.log(c);

这是Daniel Sokolowski回复June 27'19的改进

  • [?&]第一个匹配的字符必须是?&(省略类似ac=的参数)
  • c=参数名,末尾有=个字符
  • (...)第一组匹配
  • [^&]*零个或多个字符(*)与&不同(^
  • [1]从匹配数组中选择第一组
window.location.search.slice(1).split('&').reduce((res, val) => ({...res, [val.split('=')[0]]: val.split('=')[1]}), {})

你可以通过如下函数来实现:

function getParameter(parameterName){let paramsIndex = document.URL.indexOf("?");let params="";if(paramsIndex>0)params=document.URL.substring(paramsIndex+1, document.URL.length).split("&");let result = [];for(let i=0;i<params.length;i++){console.warn(params[i].split("=")[0].toString()+ "," + params[i].split("=")[1].toString());var obj = {"key":params[i].split("=")[0].toString(),"value":params[i].split("=")[1].toString()};result.push(obj);}return passedValue = result.find(x=>x.key==parameterName).value;}

现在您可以使用getParameter("parameterName")获取参数值

简化版,经过测试

function get(name){var r = /[?&]([^=#]+)=([^&#]*)/g,p={},match;while(match = r.exec(window.location)) p[match[1]] = match[2];return p[name];}

用法:

var参数=获取['参数']

我的解决方案:

/*** 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;}

这是N++次,我正在寻找一种干净的方法来做到这一点。
将保存在这里,以防我回来,因为我知道我会…🙄

const parseUrlQuery = (value) => {var urlParams = new URL(value).searchParamsreturn Array.from(urlParams.keys()).reduce((acc, key) => {acc[key] = urlParams.getAll(key)return acc}, {})}
console.log(parseUrlQuery('http://url/path?param1=A&param1=B&param2=ABC&param3=61569'))