Question

我的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>，以便我可以将每个输出为捕获[0]，捕获[1]等。我该怎么做？

谢谢。

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

Answer 1

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

这个工作可以通过这种方式用jquery来完成：

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

其次，如果你想要使用正则表达式，并假设div之间只有文本（没有标记），你可以使用这样的东西：

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

Answer 2

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

要消除量词的贪婪，请在量词之后加?，如下所示：

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

这会强制+尽可能少地匹配。也适用于*。

Answer 3

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

Answer 4

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

如果您允许其他解决方案。假设您的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);
});

Javascript匹配正则表达式 - 防止贪婪

4 个答案: