将一个查询字符串参数解析为Javascript数组

时间:2015-05-24 22:39:37

标签: javascript jquery

我有这个查询字符串q

如何使用javascript或jquery解析数组中的['how', 'can', 'i', 'get', 'this'] 参数值?

我想要像这样的数组

gsub

3 个答案:

答案 0 :(得分:2)

假设您的查询字符串的顺序并不总是已知,并且您必须支持在任何地方找到“q”;

// substring(1) to skip the '?' character
var queryStrings = window.location.search.substring(1).split('&');
var qArray;
for (var i = 0; i < queryStrings.length; i++) {
  if (queryStrings[i].substring(0, 2) === 'q=') {
    qArray = queryStrings[i].substring(2).split('+');
    break;
  }
}

答案 1 :(得分:2)

您的问题实际上是一系列问题的组合,每个问题都需要回答才能转移到下一部分。

您询问如何从查询字符串中提取q参数并将其拆分为空格,但这忽略了您首先需要解析 URL的事实。

第1部分:将URL解析为部分

您标记为完全 100% 不必要 。但是,这确实告诉我您在浏览器环境而不是服务器端JavaScript中工作,这意味着我们可以使用一些技巧来解析中无法使用的网址。

如果您知道要从当前网址获取查询字符串,则只需访问location.search

如果您有URL字符串并且想要获取查询字符串,则可以使用a元素自动为您执行解析。请参阅link anatomy以查看网址的哪些部分:

function parseUrl(url) {
  var a = document.createElement('a');
  a.href = url;
  return {
    href: a.href,
    protocol: a.protocol,
    host: a.host,
    hostname: a.hostname,
    port: a.port,
    pathname: a.pathname,
    search: a.search,
    hash: a.hash
  };
}

此时值得注意的是,给定的网址(www.example.com/yy?q=how+can+i+get+this&o=1&source=home)格式不正确,并且缺少协议,这意味着解析它会导致pathname被视为来自当前URL的相对路径。要解决此问题,请在网址前加上http://

var parts = parseUrl('http://www.example.com/yy?q=how+can+i+get+this&o=1&source=home');
var search = parts.search;

&#13;
&#13;
function parseUrl(url) {
  var a = document.createElement('a');
  a.href = url;
  return {
    href: a.href,
    protocol: a.protocol,
    host: a.host,
    hostname: a.hostname,
    port: a.port,
    pathname: a.pathname,
    search: a.search,
    hash: a.hash
  };
}
var parts = parseUrl('http://www.example.com/yy?q=how+can+i+get+this&o=1&source=home');
console.log(parts);
&#13;
&#13;
&#13;

第2部分:将查询字符串解析为部分

这部分容易搞砸,因为query strings are hard(完全披露,我写了博客文章)。

任何尝试使用正则表达式解析查询字符串的人在许多方面可能都是错误的。

我的建议是不要重新发明轮子I wrote a QueryString parser,可以使用MIT许可证,或者如果您对我的解决方案尝试不满意,请考虑使用querystring module中的 {3}}

我自己编写的模块使用UMD,因此它应该与大多数项目兼容,无论您使用(或不使用)什么进行捆绑和依赖管理。

&#13;
&#13;
var qs = new QueryString({
  flatten: true,
  semicolons: false
});
console.log(qs.parse('?q=how+can+i+get+this&o=1&source=home'));
&#13;
<script src="https://cdn.rawgit.com/zzzzBov/QueryStringJS/master/dist/querystring.min.js"></script>
&#13;
&#13;
&#13;

第3部分:在空格上分割字符串

这部分看似简单易行。告诉你使用它很容易:

'how can i get this'.split(' ');

但那可能不是你想要的。如果您还希望拆分标签或换行符,则会更复杂。您可能还希望避免数组中的空字符串(' foo bar '将有3个空字符串)。在不了解您的意图的情况下,很难推荐一个行动方案。通常,使用沿/\s+/g行的正则表达式进行拆分,然后过滤任何可能的前导和尾随空字符串是一种更具弹性的解决方案:

var arr = 'how can i get this'.split(/\s+/g).filter(function (v) {
  return v;
});

第4部分:现在全部在一起

&#13;
&#13;
var parts,
    qs,
    queryString,
    arr;

function parseUrl(url) {
  var a = document.createElement('a');
  a.href = url;
  return {
    href: a.href,
    protocol: a.protocol,
    host: a.host,
    hostname: a.hostname,
    port: a.port,
    pathname: a.pathname,
    search: a.search,
    hash: a.hash
  };
}

parts = parseUrl('http://www.example.com/yy?q=how+can+i+get+this&o=1&source=home');
console.log('parts', parts);

qs = new QueryString({
  flatten: true,
  semicolons: false
});
queryString = qs.parse(parts.search);
console.log('query string', queryString);

arr =
  (queryString.q || '')
    .split(/\s+/g)
    .filter(function (v) {
      return v;
    });
console.log('array', arr);
&#13;
<script src="https://cdn.rawgit.com/zzzzBov/QueryStringJS/master/dist/querystring.min.js"></script>
&#13;
&#13;
&#13;

现在这看起来像是一堆工作,而且确实如此。不幸的是,JS对这些常用功能中的一些没有很多原生支持。 UrlSearchParams具有部分浏览器支持,但即使这样也会解析查询字符串。

请确保您正确处理这些部分,否则用户只需更改网页的网址,并可能以意外的方式崩溃。

答案 2 :(得分:0)

尝试在输入字符串String.prototype.match()上使用str,使用RegExp参数/q=\w+.*/来匹配以"q="开头的字符串;使用.split()参数0.match()返回的数组的索引RegExp处对字符串项调用/q=|&.*|\+|#|%20/;调用.filter().split()

返回的数组中删除空项
var res = str.match(/q=\w+.*/)[0].split(/q=|&.*|\+|#|%20/).filter(Boolean);

&#13;
&#13;
var str = "www.example.com/yy?q=how+can+i+get+this&o=1&source=home";
var res = str.match(/q=\w+.*/)[0].split(/q=|&.*|\+/).filter(Boolean); 
document.write(JSON.stringify(res));
&#13;
&#13;
&#13;