如何在 JavaScript 中获取查询字符串值

在使用 JavaScript 时,通常需要获取查询字符串值。

在这个片段中,我们将为我们提供几种有效的解决方案,以防止获取特定查询字符串或者所有查询字符串。

如何获取所有查询字符串

获取所有查询字符串与获取单个查询字符串不同。
让我们看看如何在以下代码片段的帮助下解决这个问题:

const getQueryParams = (url) => {
  let qParams = {};
  //创建绑定标签以使用名为 search 的属性
  let anchor = document.createElement('a');
  //将url分配给锚标签的href URL
  anchor.href = url;
  //search 属性返回 URL 查询字符串
  let qStrings = anchor.search.substring(1);
  let params = qStrings.split('&');
  for (let i = 0; i < params.length; i++) {
    let pair = params[i].split('=');
      qParams[pair[0]] = decodeURIComponent(pair[1]);
    }
    return qParams;
};
console.log(getQueryParams('http://onitroad.com?example=something&data=24'));

在这里创建一个锚元素并在元素中使用一个名为 search 的属性。
search 属性完全返回 queryString。

创建锚元素并将url赋值给href后,search返回url的查询字符串。
完成所有这些工作后,我们可以通过使用 & 关键字拆分字符串来获取所有查询参数。

如何获取特定的查询字符串

可以使用纯 JavaScript 或者 jQuery 获取查询字符串值。

要实现它,请创建一个函数,例如 getQueryParams 并添加以下代码:

const getQueryParams = ( params, url ) => {
  let href = url;
  //this is an expression to get query strings
  let regexp = new RegExp( '[?&]' + params + '=([^&#]*)', 'i' );
  let qString = regexp.exec(href);
  return qString ? qString[1] : null;
};
console.log(getQueryParams('data','http://onitroad.com?example=something&data=32'));

该函数以 params 和 url 作为参数。
其中我们将 url 分配给函数内的变量 href。

正则表达式模式检查以 & 或者 ?其次是传递的参数。
它获取 = 之后的值并将其存储在 queryString 中并返回它。

日期:2020-06-02 22:16:19 来源:oir作者:oir