使用jQuery从URL获取查询字符串[重复]

Posted 2023-03-10

【中文标题】使用jQuery从URL获取查询字符串[重复]

【英文标题】：Get querystring from URL using jQuery [duplicate]

【发布时间】：2011-06-07 02:38:27

【问题描述】：

我有以下网址：

http://www.mysite.co.uk/?location=mylocation1

我需要从URL中获取location的值到一个变量中，然后在jQuery代码中使用：

var thequerystring = "getthequerystringhere"

$('html,body').animate(scrollTop: $("div#" + thequerystring).offset().top, 500);

如何使用 javascript 或 jQuery 获取该值？

【问题讨论】：

可能会有所帮助1。 gist.github.com/helpse/4d4842c69782b9f94a72

var locationValue = (new URL(location.href)).searchParams.get('location')

【参考方案1】：

发件人：http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html

这就是你需要的:)

以下代码将返回一个包含 URL 参数的 JavaScript 对象：

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

例如，如果您有 URL：

http://www.example.com/?me=myValue&name2=SomeOtherValue

此代码将返回：

    "me"    : "myValue",
    "name2" : "SomeOtherValue"

你可以这样做：

var me = getUrlVars()["me"];
var name2 = getUrlVars()["name2"];

【讨论】：

请注意，解决方案不会取消对参数值的编码......而且似乎也没有明确处理 url 中的 # 值？我建议 ***.com/questions/901115/… 代替，就像 @Steve 所做的那样

错误答案。不处理片段。

@Rory，是的：这个：“***.com?foo=bar#topic1”会给你“foo”：“bar#topic”。这就是为什么可怜的家伙要求一个知名图书馆的解决方案，大概是希望找到一个已经对其进行了一些测试并涵盖所有基础的解决方案（我是说这就是他希望找到的，而不是那个 jQuery一定会提供它）。

你应该修改你的代码以使用window.location.search，而不是切片window.location.href

此外，它返回一个对象 - JavaScript 没有关联数组。并且打开花括号应该与 JavaScript 中的表达式在同一行。

【参考方案2】：

要从当前 URL 检索整个查询字符串，以 ? 字符开头，您可以使用

location.search

https://developer.mozilla.org/en-US/docs/DOM/window.location

例子：

// URL = https://example.com?a=a%20a&b=b123
console.log(location.search); // Prints "?a=a%20a&b=b123" 

关于检索特定的查询字符串参数，虽然 URLSearchParams 和 URL 等类存在，但 Internet Explorer 目前不支持它们，应该避免使用。相反，您可以尝试以下方法：

/**
 * Accepts either a URL or querystring and returns an object associating 
 * each querystring parameter to its value. 
 *
 * Returns an empty object if no querystring parameters found.
 */
function getUrlParams(urlOrQueryString) 
  if ((i = urlOrQueryString.indexOf('?')) >= 0) 
    const queryString = urlOrQueryString.substring(i+1);
    if (queryString) 
      return _mapUrlParams(queryString);
     
  
  
  return ;


/**
 * Helper function for `getUrlParams()`
 * Builds the querystring parameter to value object map.
 *
 * @param queryString string - The full querystring, without the leading '?'.
 */
function _mapUrlParams(queryString) 
  return queryString    
    .split('&') 
    .map(function(keyValueString)  return keyValueString.split('=') )
    .reduce(function(urlParams, [key, value]) 
      if (Number.isInteger(parseInt(value)) && parseInt(value) == value) 
        urlParams[key] = parseInt(value);
       else 
        urlParams[key] = decodeURI(value);
      
      return urlParams;
    , );

你可以像这样使用上面的：

// Using location.search
let urlParams = getUrlParams(location.search); // Assume location.search = "?a=1&b=2b2"
console.log(urlParams); // Prints  "a": 1, "b": "2b2" 

// Using a URL string
const url = 'https://example.com?a=A%20A&b=1';
urlParams = getUrlParams(url);
console.log(urlParams); // Prints  "a": "A A", "b": 1 

// To check if a parameter exists, simply do:
if (urlParams.hasOwnProperty('parameterName'))  
  console.log(urlParams.parameterName);

【讨论】：

这个便携吗？

这不会从 url 字符串返回搜索字符串。它只返回当前页面的当前地址栏搜索字符串值。

@Cheezmeister：location.search 适用于 Chrome、Firefox 和 IE10+。也可以在 IE9 及更低版本中工作，但我手头没有。 Dwight：window.location.search 返回查询字符串。在控制台中尝试this page，你会看到?a=b&c=d。

在提取 location.search 之后还有一些工作要做。不过，这是让你走到一半的最快方法。您需要删除“？”并在“&”上拆分，然后在“=”上拆分每个结果。

使用 URLSearchParams。更多细节：developer.mozilla.org/en-US/docs/Web/API/URLSearchParams 例如 URL 有两个参数 ?id=123&category=abc var urlParams = new URLSearchParams(location.search) var id = urlParams.get('id'); var cat = urlParams.get('category');

【参考方案3】：

使用一些 jQuery 和直接 JavaScript 的简单方法，只需在 Chrome 或 Firefox 中查看控制台以查看输出...

  var queries = ;
  $.each(document.location.search.substr(1).split('&'),function(c,q)
    var i = q.split('=');
    queries[i[0].toString()] = i[1].toString();
  );
  console.log(queries);

【讨论】：

您可能想在途中删除 + 和 decodeURIComponent... 并改用 window.location.search

好用！请注意，如果您想处理空/空查询字符串元素，您需要添加一个 'if (i[0].length > 0)...' 块...

另外，不敢相信这需要 5 行 javascript 来完成。现在是哪一年？？

您不应该在 '=' 上拆分，在任何键/值对的值中使用第二个等号在技术上是可以的。 -- 只有您遇到的第一个等号（每个键/值对）应该被视为分隔符。 （另外，等号不是严格要求的；可能有一个没有值的键。）

此解决方案不考虑查询中的数组，例如filters[class]=健身房

【参考方案4】：

看看这个Stack Overflow answer。

 function getParameterByName(name, url) 
     if (!url) url = window.location.href;
     name = name.replace(/[\[\]]/g, "\\$&");
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
         results = regex.exec(url);
     if (!results) return null;
     if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/\+/g, " "));
 

您可以使用该方法制作动画：

即：

var thequerystring = getParameterByName("location");
$('html,body').animate(scrollTop: $("div#" + thequerystring).offset().top, 500);

【参考方案5】：

我们是这样做的……

String.prototype.getValueByKey = function (k) 
    var p = new RegExp('\\b' + k + '\\b', 'gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p) + k.length + 1).substr(0, this.substr(this.search(p) + k.length + 1).search(/(&|;|$)/))) : "";
;

【讨论】：

我认为人们不会认为字符串对象中包含查询字符串值。