使用 jQuery / Javascript (querystring) 获取查询字符串参数 url 值
Posted
技术标签:
【中文标题】使用 jQuery / Javascript (querystring) 获取查询字符串参数 url 值【英文标题】：Get query string parameters url values with jQuery / Javascript (querystring) 【发布时间】：2011-12-05 14:47:56 【问题描述】：任何人都知道编写一个jQuery 扩展来处理查询字符串参数的好方法吗？我基本上想扩展 jQuery 魔术 ($) 函数，所以我可以做这样的事情：
$('?search').val();
这会给我以下 URL 中的值“test”：http://www.example.com/index.php?search=test。
我已经看到很多可以在 jQuery 和 javascript 中执行此操作的函数，但我实际上想扩展 jQuery 以完全按照上面所示的方式工作。我不是在寻找 jQuery 插件，而是在寻找 jQuery 方法的扩展。
【问题讨论】：
问答：***.com/questions/901115/… @NicoWesterdale - 我浏览了那个链接，但没有看到任何解决这个特定问题的答案。他说他想要的和上面的完全一样。 我认为你不能这样做，传入的字符串由 sizzler 解析，然后解析为 DOM 对象数组。您可以扩展匹配器以提供自定义过滤器，但您不能拥有基于字符串的 jquery 对象。$ 还不够重载吗？
@mrtsherman 查看我提供的链接中的 getParameterByName() 函数。不，您不能直接在 $ 提示符中执行此操作，但这不是 jQuery 选择器的用途。他只是选择了 URL 字符串的一部分，而不是尝试访问 $() 所做的 DOM 的一部分。这是完全不同的事情。如果你真的想使用 jQuery，你可以编写一个使用这种语法的插件：$.getParameterByName(param)，在我链接到的那个页面上还有一个例子就是这样做的。不过有点无意义。
【参考方案1】：
为什么要扩展 jQuery？扩展 jQuery 与仅仅拥有一个全局函数有什么好处？
function qs(key)
key = key.replace(/[*+?^$.\[\]()|\\\/]/g, "\\$&"); // escape RegEx meta chars
var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
return match && decodeURIComponent(match[1].replace(/\+/g, " "));
http://jsfiddle.net/gilly3/sgxcL/
另一种方法是解析整个查询字符串并将值存储在一个对象中以供以后使用。这种方法不需要正则表达式并扩展了window.location 对象（但是，可以很容易地使用全局变量）：
location.queryString = ;
location.search.substr(1).split("&").forEach(function (pair)
if (pair === "") return;
var parts = pair.split("=");
location.queryString[parts[0]] = parts[1] &&
decodeURIComponent(parts[1].replace(/\+/g, " "));
);
http://jsfiddle.net/gilly3/YnCeu/
此版本还使用了Array.forEach()，它在IE7 和IE8 中本机不可用。可以使用the implementation at MDN添加，也可以使用jQuery的$.each()代替。
【讨论】：
不常见，但在查询参数中使用分号而不是和号是有效的。 @Muhd - 只要您的代码理解它，在查询字符串中使用您喜欢的任何分隔符都是“有效的”。但是，当提交表单时，表单字段以name=value 对的形式提交，以& 分隔。如果您的代码使用自定义查询字符串格式，显然，您需要在任何使用查询字符串的地方编写自定义查询字符串解析器，无论是在服务器还是客户端。
@nick - 有趣。但是他们建议 HTTP 服务器将分号视为 & 符号，这只会在使用链接来模拟表单提交时使 html 更漂亮。这只是一个建议，是非标准的。标准格式GET 提交编码为application/x-www-form-urlencoded，其值由& 分隔。我的代码处理该标准。自定义 url 结构（例如您链接的结构）将需要自定义解析器服务器端和客户端。无论如何，在我上面的代码中添加这样的功能将是微不足道的。
@gilly 确实 - 如果你想要可移植的代码，你需要同时支持两者
在 RegExp() 中添加“i”，这样键可以不区分大小写： new RegExp("[?&]"+key+"=([^&]+)(&|$) ", "我"));【参考方案2】：
经过多年难看的字符串解析，有一个更好的方法：URLSearchParams让我们看看如何使用这个新的 API 从位置获取值！
//Assuming URL has "?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"
更新：不支持 IE
从an answer below 使用这个函数，而不是URLSearchParams
$.urlParam = function (name)
var results = new RegExp('[\?&]' + name + '=([^&#]*)')
.exec(window.location.search);
return (results !== null) ? results[1] || 0 : false;
console.log($.urlParam('action')); //edit
【讨论】：
所有浏览器都支持 URLSearchParams 吗？ 糟糕！哦，伙计，不支持 IE ！我刚刚对其进行了测试。而 Chrome、FF、Safari 都没有问题。 @divine - 这里有一个用于 URLSearchParams 的 polyfill：github.com/WebReflection/url-search-params 如果您为不受支持的浏览器添加 polyfill，此 URLSearchParams 解决方案效果很好。 github.com/ungap/url-search-params 不能与https://mytest.com/bippo/#/?utm_source=teeest 或 https://mytest.com/bippo/#/url/?utm_source=teeest 一起使用【参考方案3】：
JQuery jQuery-URL-Parser插件做同样的工作，例如检索search查询字符串参数的值，你可以使用
$.url().param('search');
此库未得到积极维护。正如同一插件的作者所建议的，您可以使用URI.js。
或者您可以改用js-url。它与下面的非常相似。
所以你可以像$.url('?search')这样访问查询参数
【讨论】：
不错。并且代码在公共领域，因此您甚至不必包含 cmets。 很好的解决方案，但如果您碰巧通过 file:// 进行测试，将无法正常工作 有什么关系，@kampsj 嗨@kampsj，使用file:// 协议进行测试会导致很多东西无法工作。您可以使用 node.js 创建一个非常快速和简单的静态 HTML 服务器。 ***.com/questions/16333790/…
此插件已不再维护，作者本人建议改用其他插件。【参考方案4】：
在 SitePoint 从我们的朋友那里找到这颗宝石。 https://www.sitepoint.com/url-parameters-jquery/。
使用纯 jQuery。我刚用了这个，它奏效了。例如，稍微调整一下。
//URL is http://www.example.com/mypage?ref=registration&email=bobo@example.com
$.urlParam = function (name)
var results = new RegExp('[\?&]' + name + '=([^&#]*)')
.exec(window.location.search);
return (results !== null) ? results[1] || 0 : false;
console.log($.urlParam('ref')); //registration
console.log($.urlParam('email')); //bobo@example.com
随意使用。
【讨论】：
太棒了。谢谢！不过，我认为您不需要最后一个右大括号标签。 你应该使用 window.location.search 而不是 .href -- 否则，很好。 而不是results[1] || 0，你必须这样做 if (results) return results[1] return 0; bcoz 查询参数可能根本不存在。并且修改将处理所有一般情况。
如果你有类似https://example.com/?c=Order+ID 的东西，你会怎么做？这个加号仍然保留在这个函数上。
“使用纯 jQuery。”该解决方案实际上不使用任何 JQuery。它只扩展了 JQuery，它可以很容易地成为一个独立的函数。【参考方案5】：
这不是我的代码示例，但我过去曾使用过它。
//First Add this to extend jQuery
$.extend(
getUrlVars: function()
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;
,
getUrlVar: function(name)
return $.getUrlVars()[name];
);
//Second call with this:
// Get object of URL parameters
var allVars = $.getUrlVars();
// Getting URL var by its name
var byName = $.getUrlVar('name');
【讨论】：
您不应该在 '=' 上拆分，在任何键/值对的值中使用第二个等号在技术上是可以的。 -- 只有您遇到的第一个等号（每个键/值对）应该被视为分隔符。 （另外，等号不是严格要求的；可能有一个没有值的键。） 清洁解决方案。在我的情况下工作得很好。 $.extend( getUrlVars: function() var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i 【参考方案6】：我写了一个小函数，你只需要解析查询参数的名称。因此，如果您有： ?Project=12&Mode=200&date=2013-05-27 并且想要“Mode”参数，您只需将“Mode”名称解析到函数中：
function getParameterByName( name )
var regexS = "[\\?&]"+name+"=([^&#]*)",
regex = new RegExp( regexS ),
results = regex.exec( window.location.search );
if( results == null )
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
// example caller:
var result = getParameterByName('Mode');
【讨论】：
如果你的名字没有垃圾，你可以去掉第一个正则表达式，从 location.search 开始更有意义【参考方案7】：以@Rob Neild 的上述回答为基础，这是一个纯 JS 改编，它返回一个简单的解码查询字符串参数对象（没有 %20 等）。
function parseQueryString ()
var parsedParameters = ,
uriParameters = location.search.substr(1).split('&');
for (var i = 0; i < uriParameters.length; i++)
var parameter = uriParameters[i].split('=');
parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
return parsedParameters;
【讨论】：
我没有看到使用此代码的任何错误。你使用的是什么浏览器？我已经针对当前的 Firefox、Chrome 和 Safari 进行了测试。 是的，对不起，我读错了。我以为我看到它在返回未定义的东西上调用了一个方法。所以实际上它只是在不需要的时候运行一次。当搜索为""。你会得到 "": "undefined"
是的。这可能需要一些改进。【参考方案8】：
用原生 Javascript 编写
//Get URL
var loc = window.location.href;
console.log(loc);
var index = loc.indexOf("?");
console.log(loc.substr(index+1));
var splitted = loc.substr(index+1).split('&');
console.log(splitted);
var paramObj = [];
for(var i=0;i<splitted.length;i++)
var params = splitted[i].split('=');
var key = params[0];
var value = params[1];
var obj =
[key] : value
;
paramObj.push(obj);
console.log(paramObj);
//Loop through paramObj to get all the params in query string.
【讨论】：
【参考方案9】：function parseQueryString(queryString)
if (!queryString)
return false;
let queries = queryString.split("&"), params = , temp;
for (let i = 0, l = queries.length; i < l; i++)
temp = queries[i].split('=');
if (temp[1] !== '')
params[temp[0]] = temp[1];
return params;
我用这个。
【讨论】：
【参考方案10】：function getQueryStringValue(uri, key)
var regEx = new RegExp("[\\?&]" + key + "=([^&#]*)");
var matches = uri.match(regEx);
return matches == null ? null : matches[1];
function testQueryString()
var uri = document.getElementById("uri").value;
var searchKey = document.getElementById("searchKey").value;
var result = getQueryStringValue(uri, searchKey);
document.getElementById("result").value = result;
<input type="text" id="uri" placeholder="Uri"/>
<input type="text" id="searchKey" placeholder="Search Key"/>
<Button onclick="testQueryString()">Run</Button><br/>
<input type="text" id="result" disabled placeholder="Result"/>【讨论】：
以上是关于使用 jQuery / Javascript (querystring) 获取查询字符串参数 url 值的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript或jquery获取frame的元素的值？