我有一个带有一些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执行此操作?
当前回答
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.param1
params.param2
其他回答
这是一个我觉得更可读的解决方案,但它需要一个.forEach()填充程序,用于<IE8:
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;
}
我见过的大多数实现都错过了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);
我在这里举了一个例子。但它在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和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/
谷歌工程师埃里克·比德尔曼(Eric Bidelman)建议在不受支持的浏览器上使用这种polyfill。
正如在最新浏览器的第一个答案中提到的,我们可以使用新的URL 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();
用法::现在可以在类中导入searchParams对象
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;
}