Javascript正则表达式功能

Question

我花了几个小时在这个问题上，但我似乎还是不明白这个问题。

在下面的代码中，我试图确切地理解url.match中的正则表达式是什么以及如何工作的。

如下面的代码所示，它不起作用。然而，如果我删除(?:&toggle=|&ie=utf-8|&FORM=|&aq=|&x=|&gwp)，它似乎给了我想要的输出。

然而，我不想在不了解它在做什么的情况下删除它。

我找到了一个非常有用的资源，但是几个小时后，我仍然不能准确地确定这些表达式在做什么:

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions Using_Parenthesized_Substring_Matches

谁能帮我解释一下它是如何解析字符串的?表达式本身和括号的位置对我来说不是很清楚，坦率地说，非常令人困惑。

任何帮助都是感激的。

(function($) {    
  $(document).ready(function() {         
      function parse_keywords(url){
          var matches = url.match(/.*(?:?p=|?q=|&q=|?s=)([a-zA-Z0-9 +]*)(?:&toggle=|&ie=utf-8|&FORM=|&aq=|&x=|&gwp)/);
          return matches ? matches[1].split('+') : [];
      }
      myRefUrl = "http://www.google.com/url?sa=f&rct=j&url=https://www.mydomain.com/&q=my+keyword+from+google&ei=fUpnUaage8niAKeiICgCA&usg=AFQjCNFAlKg_w5pZzrhwopwgD12c_8z_23Q";
      myk1 = (parse_keywords(myRefUrl));
      kw="";
      for (i=0;i<myk1.length;i++) {
          if (i == (myk1.length - 1)) {
          kw = kw + myk1[i];
          }
          else {
          kw = kw + myk1[i] + '%20';
          }
      }
      console.log (kw);
      if (kw != null && kw != "" && kw != " " && kw != "%20") {
      orighref = $('a#applynlink').attr('href');
      $('a#applynlink').attr('href', orighref + '&scbi=' + kw);
      }                     
  });  
})(jQuery);

Answer 1

让我们把这个正则表达式分解一下。

/

开始正则表达式。

.*

匹配0个或更多的任何东西-基本上，我们愿意在字符串的任何点匹配这个正则表达式。

(?:?p=
|?q=
|&q=
|?s=)

在这里，?:意味着"不捕获这个组内的任何东西"。见http://www.regular-expressions.info/refadv.html

?意味着从字面上理解?，这通常是一个字符，意思是"匹配前一个令牌的0或1个副本"，但我们想要匹配一个实际的?

除此之外，它只是在寻找多种不同的选项来选择(|意味着'如果我匹配我之前或之后的内容，regex是有效的。

([a-zA-Z0-9 +]*)

现在我们匹配0个或多个以下字符的任何排列:a-ZA-Z0-9 +并且由于它在没有?:的()中，我们确实捕获了它。

(?:&toggle=
|&ie=utf-8
|&FORM=
|&aq=
|&x=
|&gwp)

我们看到另一个?:，所以这是另一个非捕获组。除此之外，它只是充满了由| s分隔的文字字符，所以它没有做任何花哨的逻辑。

/

正则表达式。

总之，这个正则表达式在字符串中查找第一个非捕获组的任何实例，捕获其中的所有内容，然后查找第二个非捕获组的任何实例来"封盖"它，并返回这两个非捕获组之间的所有内容。(把它想象成一个"三明治"，我们寻找页眉和页脚，并捕获我们感兴趣的所有内容)

在正则表达式运行后，我们这样做:

返回匹配?[1].split('+'): [];

获取捕获的组，并将其在+上分割为字符串数组。

Answer 2

对于这种情况，使用www.debuggex.com(我构建的)将其可视化非常有帮助。它会立即向您显示正则表达式的结构，并允许您逐步执行。

在这种情况下，当您删除regex的最后一部分时，它工作的原因是因为示例url中没有字符串&toggle=, &ie=utf-8等。要看到这一点，在debuggex上拖动测试字符串上方的灰色滑块，您将看到它永远不会超过最后一组的&。