Javascript匹配防止贪婪

Javascript match prevent greediness

本文关键字：贪婪 Javascript      更新时间：2023-09-26

我的javascript match（）正则表达式有问题。

<div class="a">       whitespace, new lines, and  content    </div>
<div class="junk">    junkjunkjunk                           </div>
<div class="a">       whitespace, new lines, and  content    </div>
<div class="junk">    junkjunkjunk                           </div>
<div class="a">       whitespace, new lines, and  content    </div>

假设我想捕获<div class="a"> and the closest </div>之间的所有内容。下面的正则表达式捕获了所有内容，我认为这是由于贪婪：

/<div class="a">['s'S]+<'/div>?/ig

我想单独捕获每个<div class="a">...</div>，这样我就可以将每个输出为capture[0]、capture[1]等。我该如何做到这一点？

谢谢。

编辑：更新以更好地反映我的问题。假设在所需的div之间存在不需要的标记和文本。

首先，用正则表达式解析HTML是baaad。。。说真的，你可以使用每个div的innerHTML属性来更改它的内容，或者更好的是，使用jQuery或其他javascript框架来完成这类工作。

这个作业可以通过以下方式用jquery完成：

$("div.a").each(
  function() {
    alert($(this).html())
  }
);

其次，如果您非常想使用regex，并且假设div之间只有文本（没有标记），则可以使用以下内容：

/<div class="a">([^<])+<'/div>/ig

要给出一个直接的正则表达式答案：

为了消除量词的贪婪，在量词后面放一个?，如下所示：

/<div class="a">['s'S]+?<'/div>?/ig

这迫使+尽可能少地匹配。也适用于*。

然后您需要在结束div之前但在+运算符之后加上问号，并在您想要捕获的内容周围使用（）。

防止正则表达式贪婪的一种方法是不使用正则表达式。

如果你允许一个替代的解决方案。这假设您的HTML是字符串形式的，而不是DOM:的一部分

var str = '<div class="a">       whitespace, new lines, and  content    </div>'
<div class="a">       whitespace, new lines, and  content    </div>'
<div class="a">       whitespace, new lines, and  content    </div>';
var temp = document.createElement('div');
temp.innerHTML = str;
var capture = [];
for( var i = 0; i < temp.childNodes.length; i++ ) {
    var node = temp.childNodes[i];
    if( node && node.nodeType === 1 && node.className === 'a' ) {
        capture.push( node.innerHTML );
    }
}
alert(capture[0]);

关于正则表达式，这里有一种使用.replace():的方法

var str = '<div class="a">       whitespace, new lines, and  content    </div>'
<div class="a">       whitespace, new lines, and  content    </div>'
<div class="a">       whitespace, new lines, and  content    </div>';
var res = [];
str.replace(/<div class="a">([^<]+)<'/div>/ig,function(s,g1) {
    res.push(g1);
});
相关文章：