如何使用类似于 PHP 的 preg_match_all() 的 JavaScript 中的正则表达式匹配多次出现？

Question

我正在尝试解析由 key=value 对组成的 url 编码字符串，这些对由 & 或 & 分隔。

以下将仅匹配第一次出现，将键和值分解为单独的结果元素：

var result = mystring.match(/(?:&|&)?([^=]+)=([^&]+)/)

字符串 '1111342=Adam%20Franco&348572=Bob%20Jones' 的结果将是：

['1111342', 'Adam%20Franco']

使用全局标志 'g' 将匹配所有匹配项，但只返回完全匹配的子字符串，而不是分离的键和值：

var result = mystring.match(/(?:&|&)?([^=]+)=([^&]+)/g)

字符串 '1111342=Adam%20Franco&348572=Bob%20Jones' 的结果将是：

['1111342=Adam%20Franco', '&348572=Bob%20Jones']

虽然我可以在 & 上拆分字符串并单独拆分每个键/值对，但有没有办法使用 JavaScript 的正则表达式支持来匹配模式 /(?:&|&)?([^=]+)=([^&]+)/ 的多次出现，类似于 PHP 的 preg_match_all() 函数？

我的目标是通过一些方法来获得结果，子匹配分隔如下：

[['1111342', '348572'], ['Adam%20Franco', 'Bob%20Jones']]

或

[['1111342', 'Adam%20Franco'], ['348572', 'Bob%20Jones']]

Answer 1

为全局匹配设置 g 修饰符：

/…/g

Answer 2

您需要使用“g”开关进行全局搜索

var result = mystring.match(/(&|&)?([^=]+)=([^&]+)/g)

Answer 3

从 cmets 吊起

2020 评论：我们现在有了URLSearchParams，而不是使用正则表达式，它为我们完成了所有这些，因此不再需要自定义代码，更不用说正则表达式了。

——Mike 'Pomax' Kamermans

此处列出了浏览器支持https://caniuse.com/#feat=urlsearchparams

---

我会建议一个替代正则表达式，使用子组来单独捕获参数的名称和值，re.exec():

function getUrlParams(url) {
  var re = /(?:\?|&(?:amp;)?)([^=&#]+)(?:=?([^&#]*))/g,
      match, params = {},
      decode = function (s) {return decodeURIComponent(s.replace(/\+/g, " "));};

  if (typeof url == "undefined") url = document.location.href;

  while (match = re.exec(url)) {
    params[decode(match[1])] = decode(match[2]);
  }
  return params;
}

var result = getUrlParams("http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=Frankfurt+am+Main&sll=50.106047,8.679886&sspn=0.370369,0.833588&ie=UTF8&ll=50.116616,8.680573&spn=0.35972,0.833588&z=11&iwloc=addr");

result 是一个对象：

{ f：“q” 地理编码：“” hl：“德” 即：“UTF8” iwloc：“地址” ll: "50.116616,8.680573" 问：“美因河畔法兰克福” sll：“50.106047,8.679886” 来源：“s_q” spn：“0.35972,0.833588” sspn：“0.370369,0.833588” z：“11” }

正则表达式分解如下：

(?: # 非捕获组 \?|& # "?"要么 ”＆” (?:amp;)? # （允许“&”，用于错误的 HTML 编码 URL） ) # 结束非捕获组 ( # 第一组 [^=]+ # 除“=”、“&”或“#”之外的任何字符；至少一次 ) # 结束组 1 - 这将是参数的名称 (?: # 非捕获组 =？ # 一个“=”，可选 (#第二组 [^]* # 除“&”或“#”外的任何字符；任意次数 ) # 结束组 2 - 这将是参数的值 ) # 结束非捕获组

Answer 4

对于捕获组，我习惯于在 PHP 中使用 preg_match_all，我尝试在此处复制它的功能：

<script>

// Return all pattern matches with captured groups
RegExp.prototype.execAll = function(string) {
    var match = null;
    var matches = new Array();
    while (match = this.exec(string)) {
        var matchArray = [];
        for (i in match) {
            if (parseInt(i) == i) {
                matchArray.push(match[i]);
            }
        }
        matches.push(matchArray);
    }
    return matches;
}

// Example
var someTxt = 'abc123 def456 ghi890';
var results = /[a-z]+(\d+)/g.execAll(someTxt);

// Output
[["abc123", "123"],
 ["def456", "456"],
 ["ghi890", "890"]]

</script>

Answer 5

嗯...我遇到了类似的问题... 我想要使​​用 RegExp 进行增量/步进搜索 （例如：开始搜索...做一些处理...继续搜索直到最后一个匹配）

经过大量的互联网搜索......像往常一样（现在这正在变成一种习惯） 我最终在 StackOverflow 中找到了答案...

没有提到和提到的事情是“lastIndex” 我现在明白为什么 RegExp 对象实现了“lastIndex”属性

Answer 6

为了捕获使用相同名称的多个参数，我修改了 Tomalak 方法中的 while 循环，如下所示：

  while (match = re.exec(url)) {
    var pName = decode(match[1]);
    var pValue = decode(match[2]);
    params[pName] ? params[pName].push(pValue) : params[pName] = [pValue];
  }

输入：?firstname=george&lastname=bush&firstname=bill&lastname=clinton

返回：{firstname : ["george", "bill"], lastname : ["bush", "clinton"]}

Answer 7

如果有人（比如我）需要支持数组的 Tomalak 方法（即多选），这里是：

function getUrlParams(url) {
  var re = /(?:\?|&(?:amp;)?)([^=&#]+)(?:=?([^&#]*))/g,
      match, params = {},
      decode = function (s) {return decodeURIComponent(s.replace(/\+/g, " "));};

  if (typeof url == "undefined") url = document.location.href;

  while (match = re.exec(url)) {
    if( params[decode(match[1])] ) {
        if( typeof params[decode(match[1])] != 'object' ) {
            params[decode(match[1])] = new Array( params[decode(match[1])], decode(match[2]) );
        } else {
            params[decode(match[1])].push(decode(match[2]));
        }
    }
    else
        params[decode(match[1])] = decode(match[2]);
  }
  return params;
}
var urlParams = getUrlParams(location.search);

输入?my=1&my=2&my=things

结果1,2,things（之前只返回：东西）

Answer 8

2020 年编辑

使用URLSearchParams，因为这项工作不再需要任何类型的自定义代码。浏览器可以使用单个构造函数为您完成此操作：

const str = "1111342=Adam%20Franco&348572=Bob%20Jones";
const data = new URLSearchParams(str);
for (pair of data) console.log(pair)

产量

Array [ "1111342", "Adam Franco" ]
Array [ "348572", "Bob Jones" ]

所以没有理由再使用正则表达式了。

原答案

如果您不想依赖运行 exec 样式匹配所带来的“盲匹配”，JavaScript 确实内置了 match-all 功能，但它是 replace 函数调用的一部分，当使用“如何处理捕获组”handling function：

var data = {};

var getKeyValue = function(fullPattern, group1, group2, group3) {
  data[group2] = group3;
};

mystring.replace(/(?:&|&)?([^=]+)=([^&]+)/g, getKeyValue);

完成。

我们没有使用捕获组处理函数来实际返回替换字符串（对于替换处理，第一个 arg 是完整的模式匹配，随后的 args 是单独的捕获组）我们只是获取组 2 和 3 捕获，然后缓存那对。

因此，不要编写复杂的解析函数，记住 JavaScript 中的“matchAll”函数只是简单地用替换处理函数“替换”，可以提高模式匹配效率。

Answer 9

为了坚持标题所示的建议问题，您实际上可以使用String.prototype.replace() 遍历字符串中的每个匹配项。例如，下面的内容就是根据正则表达式获取所有单词的数组：

function getWords(str) {
  var arr = [];
  str.replace(/\w+/g, function(m) {
    arr.push(m);
  });
  return arr;
}

var words = getWords("Where in the world is Carmen Sandiego?");
// > ["Where", "in", "the", "world", "is", "Carmen", "Sandiego"]

如果我想获得捕获组甚至每场比赛的索引，我也可以这样做。下面显示了每个匹配项如何与整个匹配项、第一个捕获组和索引一起返回：

function getWords(str) {
  var arr = [];
  str.replace(/\w+(?=(.*))/g, function(m, remaining, index) {
    arr.push({ match: m, remainder: remaining, index: index });
  });
  return arr;
}

var words = getWords("Where in the world is Carmen Sandiego?");

上面运行后，words会如下：

[
  {
    "match": "Where",
    "remainder": " in the world is Carmen Sandiego?",
    "index": 0
  },
  {
    "match": "in",
    "remainder": " the world is Carmen Sandiego?",
    "index": 6
  },
  {
    "match": "the",
    "remainder": " world is Carmen Sandiego?",
    "index": 9
  },
  {
    "match": "world",
    "remainder": " is Carmen Sandiego?",
    "index": 13
  },
  {
    "match": "is",
    "remainder": " Carmen Sandiego?",
    "index": 19
  },
  {
    "match": "Carmen",
    "remainder": " Sandiego?",
    "index": 22
  },
  {
    "match": "Sandiego",
    "remainder": "?",
    "index": 29
  }
]

为了将类似于 PHP 中可用的多个匹配项与 preg_match_all 匹配，您可以使用这种类型的思维来制作自己的思维或使用类似 YourJS.matchAll() 的东西。 YourJS 或多或少地定义了这个函数如下：

function matchAll(str, rgx) {
  var arr, extras, matches = [];
  str.replace(rgx.global ? rgx : new RegExp(rgx.source, (rgx + '').replace(/[\s\S]+\//g , 'g')), function() {
    matches.push(arr = [].slice.call(arguments));
    extras = arr.splice(-2);
    arr.index = extras[0];
    arr.input = extras[1];
  });
  return matches[0] ? matches : null;
}

Answer 10

来源：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec

查找连续匹配项

如果您的正则表达式使用“g”标志，您可以多次使用 exec() 方法在同一字符串中查找连续匹配项。当您这样做时，搜索将从正则表达式的 lastIndex 属性指定的 str 的子字符串开始（test() 也会推进 lastIndex 属性）。例如，假设你有这个脚本：

var myRe = /ab*/g;
var str = 'abbcdefabh';
var myArray;
while ((myArray = myRe.exec(str)) !== null) {
  var msg = 'Found ' + myArray[0] + '. ';
  msg += 'Next match starts at ' + myRe.lastIndex;
  console.log(msg);
}

此脚本显示以下文本：

Found abb. Next match starts at 3
Found ab. Next match starts at 912

注意：不要将正则表达式文字（或 RegExp 构造函数）放在 while 条件中，否则如果由于 lastIndex 属性在每次迭代时被重置而存在匹配，它将创建一个无限循环。还要确保设置了全局标志，否则这里也会出现循环。

Answer 11

如果您可以使用map，这是一个四行解决方案：

var mystring = '1111342=Adam%20Franco&348572=Bob%20Jones';

var result = mystring.match(/(&|&)?([^=]+)=([^&]+)/g) || [];
result = result.map(function(i) {
  return i.match(/(&|&)?([^=]+)=([^&]+)/);
});

console.log(result);

不漂亮，效率不高，但至少它是紧凑的。 ;)

Answer 12

使用window.URL:

> s = 'http://www.example.com/index.html?1111342=Adam%20Franco&348572=Bob%20Jones'
> u = new URL(s)
> Array.from(u.searchParams.entries())
[["1111342", "Adam Franco"], ["348572", "Bob Jones"]]

Answer 13

在我看来，拆分它是最好的选择：

'1111342=Adam%20Franco&348572=Bob%20Jones'.split('&').map(x => x.match(/(?:&|&)?([^=]+)=([^&]+)/))

Answer 14

为了避免正则表达式地狱，你可以找到你的第一个匹配，切掉一个块然后尝试在子字符串上找到下一个。在 C# 中，这看起来像这样，抱歉，我没有为您将其移植到 JavaScript。

        long count = 0;
        var remainder = data;
        Match match = null;
        do
        {
            match = _rgx.Match(remainder);
            if (match.Success)
            {
                count++;
                remainder = remainder.Substring(match.Index + 1, remainder.Length - (match.Index+1));
            }
        } while (match.Success);
        return count;

Answer 15

您好，从 2020 年开始。让我提请您注意 String.prototype.matchAll()：

let regexp = /(?:&|&)?([^=]+)=([^&]+)/g;
let str = '1111342=Adam%20Franco&348572=Bob%20Jones';

for (let match of str.matchAll(regexp)) {
    let [full, key, value] = match;
    console.log(key + ' => ' + value);
}

输出：

1111342 => Adam%20Franco
348572 => Bob%20Jones