使用非捕获组获取JavaScript查询字符串值

Question

给定以下查询字符串：

?cgan=1&product_cats=mens-jeans,shirts&product_tags=fall,classic-style&attr_color=charcoal,brown&attr_size=large,x-small&cnep=0

我如何从以下参数类型中提取值 'product_cat, product_tag, attr_color, attr_size' 并仅返回 'mens-jeans,shirts,fall,classic-style,charcoal,brown,large,x-small？

我尝试使用非捕获组来获取参数类型和捕获组来获取值，但是它会返回两者。

(?:product_cats=|product_tags=|attr\w+=)(\w|,|-)+

- Benjamin

Answer 1

您可以使用以下方式收集值：

(?:product_cats|product_tags|attr\w+)=([\w,-]+)

请注意，字符类 ([\w,-]+) 比备选项列表 ((\w|,|-)*) 更加高效，并且我们避免了捕获仅为最后一个单个字符的问题。

下面是代码示例：

var re = /(?:product_cats|product_tags|attr\w+)=([\w,-]+)/g; 
var str = '?cgan=1&product_cats=mens-jeans,shirts&product_tags=fall,classic-style&attr_color=charcoal,brown&attr_size=large,x-small&cnep=0';
var res = [];
while ((m = re.exec(str)) !== null) {
    res.push(m[1]);
}
document.getElementById("res").innerHTML = res.join(",");

<div id="res"/>

- Wiktor Stribiżew

---

这个很好用。你认为这是实现这个的有效方法吗？感谢关于字符类的提示。 - Benjamin

如果您正在使用普通JS，这是从查询字符串获取数据的好方法。如果您喜欢一种通过提供的键名返回值的函数，您可以查看此SO帖子。 - Wiktor Stribiżew

Answer 2

您可以始终使用jQuery方法param。

- stile17

Answer 3

您可以使用以下简单的正则表达式：

/&\w+=([\w,-]+)/g

演示

你需要返回捕获组的结果并用,分割它们。

var mystr="?cgan=1&product_cats=mens-jeans,shirts&product_tags=fall,classic-style&attr_color=charcoal,brown&attr_size=large,x-small&cnep=0
";
var myStringArray = mystr.match(/&\w+=([\w,-]+)/g);
var arrayLength = myStringArray.length-1; //-1 is because of that the last match is 0
var indices = [];
for (var i = 0; i < arrayLength; i++) {
    indices.push(myStringArray[i].split(','));
}

- Mazdak

Answer 4

类似于

/(?:product_cats|product_tag|attr_color|attr_size)=[^,]+/g

• (?:product_cats|product_tag|attr_color|attr_size) 将匹配 product_cats 或 product_tag 或 attr_color 或 attr_size

• = 匹配等于号

• [^,] 否定字符类匹配除了逗号以外的任何字符。基本上它会一直匹配到下一个逗号

正则表达式演示

测试

string = "?cgan=1&product_cats=mens-jeans,shirts&product_tags=fall,classic-style&attr_color=charcoal,brown&attr_size=large,x-small&cnep=0";

matched = string.match(/(product_cats|product_tag|attr_color|attr_size)=[^,]+/g);  

for (i in matched)
{
console.log(matched[i].split("=")[1]);
}

将会产生输出

mens-jeans
charcoal
large

- nu11p01n73R

---

你没有使用分组，所以我会在这个正则表达式的备选项列表周围设置一个非捕获分组。而且这个正则表达式无法正确完成工作。 - Wiktor Stribiżew

@stribizhev 是的，我已将其编辑为非捕获组。谢谢。 - nu11p01n73R

Answer 5

无需使用正则表达式，只需使用 split 和 join 即可。

var s = '?cgan=1&product_cats=mens-jeans,shirts&product_tags=fall,classic-style&attr_color=charcoal,brown&attr_size=large,x-small&cnep=0';

var query = s.split('?')[1],
    pairs = query.split('&'),
    allowed = ['product_cats', 'product_tags', 'attr_color', 'attr_size'],
    results = [];

$.each(pairs, function(i, pair) {
  var key_value = pair.split('='),
      key = key_value[0],
      value = key_value[1];

  if (allowed.indexOf(key) > -1) {
    results.push(value);
  }
});

console.log(results.join(','));

($.each 是 jQuery 中的方法，但是如果没有 jQuery 也可以很容易地替换它)

- yoavmatchulsky

---

这确实可以运行。但是我忘了提到，与“product_cats”和“product_tags”不同的是，我不总是知道属性参数（attr_？）的值。因此，我认为我需要依靠正则表达式。 - Benjamin

好的，你可以随时更改允许列表/条件，例如 if (allowed.indexOf(key) > -1 || key.indexOf('attr_') === 0)。但这取决于你。我通常尽可能避免使用正则表达式。我认为，如果某些问题可以通过字符串操作解决，那么它将比正则表达式更易读且性能更好。 - yoavmatchulsky