如何在JavaScript中从URL中提取查询字符串?
谢谢!
如何在JavaScript中从URL中提取查询字符串?
谢谢!
你可以轻松地构建一个类似字典的集合...
function getQueryStrings() {
var assoc = {};
var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
var queryString = location.search.substring(1);
var keyValues = queryString.split('&');
for(var i in keyValues) {
var key = keyValues[i].split('=');
if (key.length > 1) {
assoc[decode(key[0])] = decode(key[1]);
}
}
return assoc;
}
然后像这样使用它...
var qs = getQueryStrings();
var myParam = qs["myParam"];
unescape
已经被弃用,应该使用decodeURIComponent
来替代。你不应该解码完整的搜索字符串,因为这样会解码参数中的编码的&符号或等号,例如?test=fish%26chips
。另外,我改进了代码以正确地将+
解码为空格。请参考我在类似问题这里的回答。 - Andy E如果您指的是地址栏中的URL,则
window.location.search
这将只提供查询字符串部分。请注意,这包括开头的问号。
如果您正在引用存储在(例如)字符串中的任何随机URL,则可以通过从第一个问号的索引处开始获取子字符串来获取查询字符串,例如:
url.substring(url.indexOf("?"))
这假设URL片段部分的任何问号都已经被正确编码了。如果在结尾有一个目标(即一个#后跟DOM元素的id),那么它也会包括在内。
function Querystring() {
var q = window.location.search.substr(1), qs = {};
if (q.length) {
var keys = q.split("&"), k, kv, key, val, v;
for (k = keys.length; k--; ) {
kv = keys[k].split("=");
key = kv[0];
val = decodeURIComponent(kv[1]);
if (qs[key] === undefined) {
qs[key] = val;
} else {
v = qs[key];
if (v.constructor != Array) {
qs[key] = [];
qs[key].push(v);
}
qs[key].push(val);
}
}
}
return qs;
}
function GetQueryStringByParameter(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
--- 如何使用 ---
var QueryString= GetQueryStringByParameter('QueryString');
现在浏览器中有一个新的API叫做URLSearchParams
,它允许您提取和更改查询字符串的值。
目前,它似乎在Firefox 44+、Chrome 49+和Opera 36+中得到支持。
初始化/输入
要开始使用,创建一个新的URLSearchParams对象。对于当前的实现,您需要使用slice(1)
从查询字符串中删除开头的“?”,就像Jake Archibald建议的那样:
var params = new URLSearchParams(window.location.search.slice(1)); // myParam=12
var params = new URLSearchParams(window.location.search); // myParam=12
获取
您可以通过.get
方法从中获取参数:
params.get('myParam'); // 12
设置
可以使用.set
更改参数:
params.set('myParam', 'newValue');
输出
如果需要再次使用当前查询字符串,则 .toString
方法提供了它:
params.toString(); // myParam=newValue
这个API中还有许多其他方法。
填充
由于浏览器支持仍然不够完善,Andrea Giammarchi编写了一个小型填充(<3kB)。
function querySt(Key) {
var url = window.location.href;
KeysValues = url.split(/[\?&]+/);
for (i = 0; i < KeysValues.length; i++) {
KeyValue= KeysValues[i].split("=");
if (KeyValue[0] == Key) {
return KeyValue[1];
}
}
}
function GetQString(Key) {
if (querySt(Key)) {
var value = querySt(Key);
return value;
}
}
function parseQueryString(){
var assoc = {};
var keyValues = location.search.slice(1).split('&');
var decode = function(s){
return decodeURIComponent(s.replace(/\+/g, ' '));
};
for (var i = 0; i < keyValues.length; ++i) {
var key = keyValues[i].split('=');
if (1 < key.length) {
assoc[decode(key[0])] = decode(key[1]);
}
}
return assoc;
}
我使用过这种方法
function getString()
{
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 buisnessArea = getString();
// Assuming "?post=1234&action=edit"
var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
你也可以使用插件 jQuery-URL-Parser 来检索 URL 的所有部分,包括锚点、主机等。
使用非常简单和酷:
$.url().param("itemID")
通过James&Alfa