如何从 location.search 获得特定的参数？

如果我有一个 URL，比如

http://localhost/search.php?year=2008

如何编写一个 JavaScript 函数来获取变量 年并查看它是否包含任何内容？

我知道它可以做到与 location.search，但我不能搞清楚它如何抓取参数。

169985 次浏览
小开 
function gup( name ) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
var year = gup("year"); // returns "2008"
小开

一种非正则表达式的方法，您可以简单地用字符’&’进行分割，然后遍历键/值对:

function getParameter(paramName) {
var searchString = window.location.search.substring(1),
i, val, params = searchString.split("&");


for (i=0;i<params.length;i++) {
val = params[i].split("=");
if (val[0] == paramName) {
return val[1];
}
}
return null;
}

2020年编辑:

现在，在 现代浏览器中你可以使用 URLSearchParams构造函数:

const params = new URLSearchParams('?year=2020&month=02&day=01')


// You can access specific parameters:
console.log(params.get('year'))
console.log(params.get('month'))


// And you can iterate over all parameters
for (const [key, value] of params) {
console.log(`Key: ${key}, Value: ${value}`);
}

小开

下面使用正则表达式，并仅搜索 URL 的查询字符串部分。

最重要的是，此方法支持普通参数和数组参数，如 http://localhost/?fiz=zip&foo[]=!!=&bar=7890#hashhashhash

function getQueryParam(param) {
var result =  window.location.search.match(
new RegExp("(\\?|&)" + param + "(\\[\\])?=([^&]*)")
);


return result ? result[3] : false;
}


console.log(getQueryParam("fiz"));
console.log(getQueryParam("foo"));
console.log(getQueryParam("bar"));
console.log(getQueryParam("zxcv"));

产出:

zip
!!=
7890
false
小开

我最喜欢的获取 URL 参数的方法是这种方法:

var parseQueryString = function() {


var str = window.location.search;
var objURL = {};


str.replace(
new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
function( $0, $1, $2, $3 ){
objURL[ $1 ] = $3;
}
);
return objURL;
};


//Example how to use it:
var params = parseQueryString();
alert(params["foo"]);
小开

我花了一段时间才找到这个问题的答案。大多数人似乎都建议使用正则表达式解决方案。我强烈地倾向于使用经过尝试和测试的代码，而不是我或其他人临时想出来的 regex。

我使用这里提供的 parseUri 库: Http://stevenlevithan.com/demo/parseuri/js/

它允许你完全按照你的要求去做:

var uri = 'http://localhost/search.php?year=2008';
var year = uri.queryKey['year'];
// year = '2008'
小开

我使用了 Alex 的一个变体-但需要将出现多次的参数转换为数组。似乎有很多选择。我不想依赖另一个图书馆来完成这么简单的事情。我认为这里发布的其他选项之一可能更好——我改编了 Alex 的，因为它直截了当。

parseQueryString = function() {
var str = window.location.search;
var objURL = {};


// local isArray - defer to underscore, as we are already using the lib
var isArray = _.isArray


str.replace(
new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
function( $0, $1, $2, $3 ){


if(objURL[ $1 ] && !isArray(objURL[ $1 ])){
// if there parameter occurs more than once, convert to an array on 2nd
var first = objURL[ $1 ]
objURL[ $1 ] = [first, $3]
} else if(objURL[ $1 ] && isArray(objURL[ $1 ])){
// if there parameter occurs more than once, add to array after 2nd
objURL[ $1 ].push($3)
}
else
{
// this is the first instance
objURL[ $1 ] = $3;
}


}
);
return objURL;
};
小开

最简单的方法就是

if (document.location.search.indexOf('yourtext=') >= 0) {
// your code
} else {
// what happens?
}

IndexOf ()

函数返回

  • 如果函数中传递的文本不在您要查找的变量或字符串中，则整数低于0 ——在本例中为 document.location.search。
  • 当函数中传递的文本位于您要查找的变量或字符串中时，整个数字等于0或者更高 ——在本例中为 document.location.search。

我希望这是有用的，< a href = “ https://stackoverflow. com/users/53114/gumbo”title = “@gumbo”>@gumbo < a href = “ https://stackoverflow. com/users/53114/gumbo”title = “@gumbo”>@gumbo

小开

你可以使用 window.URL类:

new URL(location.href).searchParams.get('year')
// Returns 2008 for href = "http://localhost/search.php?year=2008".
// Or in two steps:
const params = new URL(location.href).searchParams;
const year = params.get('year');
小开

这个问题已经很老了，而且在 JavaScript 中已经发生了变化。 你现在可以这样做:

const params = {}
document.location.search.substr(1).split('&').forEach(pair => {
[key, value] = pair.split('=')
params[key] = value
})

得到包含 2008的 params.year。 您还可以在 params对象中获得其他查询参数。

编辑 : 一个更短/更干净的方法来做到这一点:

const params = new Map(location.search.slice(1).split('&').map(kv => kv.split('=')))

然后，您可以测试 year参数是否存在:

params.has('year')  // true

或者用以下方法检索:

params.get('year')  // 2008

编辑2020

可以将 URL 参数转换为 Object:

const params = location.search.slice(1).split('&').reduce((acc, s) => {
const [k, v] = s.split('=')
return Object.assign(acc, {[k]: v})
}, {})

然后它可以作为一个常规的 JS 对象:

params.year  // 2008
小开

我在这个问题上花了点时间，最后我用了这个:

function getJsonFromUrl() {
return Object.assign(...location.search.substr(1).split("&").map(sliceProperty));
}
  • Object.assign将对象列表转换为一个对象
  • 扩展操作符 ...将数组转换为列表
  • location.search.substr(1).split("&")获取所有参数作为属性数组(foo=bar)
  • map遍历每个属性并将它们分割成一个数组(调用 splitProperty或 sliceProperty)。

返回文章页面

  function splitProperty(pair) {
[key, value] = pair.split("=")
return { [key]: decodeURIComponent(value) }
}
  • 由 =分割
  • 将数组解构为包含两个元素的数组
  • 返回具有动态属性语法的新对象

返回文章页面

  function sliceProperty(pair) {
const position = pair.indexOf("="),
key = pair.slice(0, position),
value = pair.slice(position + 1, pair.length);
return { [key]: decodeURIComponent(value) }
}
  • 设置 =的位置、键和值
  • 返回具有动态属性语法的新对象

我认为 splitProperty更漂亮，但是 sliceProperty更快。运行 JsPerf获取更多信息。

小开

一个简单的一行解决方案:

let query = Object.assign.apply(null, location.search.slice(1).split('&').map(entry => ({ [entry.split('=')[0]]: entry.split('=')[1] })));

详解:

// define variable
let query;


// fetch source query
query = location.search;


// skip past the '?' delimiter
query = query.slice(1);


// split source query by entry delimiter
query = query.split('&');


// replace each query entry with an object containing the query entry
query = query.map((entry) => {


// get query entry key
let key = entry.split('=')[0];


// get query entry value
let value = entry.split('=')[1];


// define query object
let container = {};


// add query entry to object
container[key] = value;


// return query object
return container;
});


// merge all query objects
query = Object.assign.apply(null, query);
小开

从 location.search 中获取 params，使用一行代码进行搜索:

const params = new Map(this.props.location.search.slice(1).split('&').map(param => param.split('=')))

那么，简单地说:

if(params.get("year")){
//year exists. do something...
} else {
//year doesn't exist. do something else...
}
小开

ES6答案:

const parseQueryString = (path = window.location.search) =>
path.slice(1).split('&').reduce((car, cur) => {
const [key, value] = cur.split('=')
return { ...car, [key]: value }
}, {})

例如:

parseQueryString('?foo=bar&foobar=baz')
// => {foo: "bar", foobar: "baz"}
小开

这就是我喜欢做的:

window.location.search
.substr(1)
.split('&')
.reduce(
function(accumulator, currentValue) {
var pair = currentValue
.split('=')
.map(function(value) {
return decodeURIComponent(value);
});


accumulator[pair[0]] = pair[1];


return accumulator;
},
{}
);

当然，您可以使用现代语法或将所有内容写入一行中，使其更加紧凑..。

我让你自己决定。


提交答案