选择具有特定类的所有DIV，包括仅使用JavaScript中的REGEX的细分

Question

我想选择具有特定类及其所有内容的DIV，即使它包含其他DIV元素。我在JS中找不到任何好的正则表达式。 下面的代码应该返回2个DIV。

＆＃13;

＆＃13;

var content = document.querySelector('textarea').value;
var matches = content.match(/<div class\="custom">(.*?)<\/div>/g);
console.log(matches);

＆＃13;

textarea {
  width: 100%;
  height: 200px;
}

＆＃13;

<textarea><div><div class="custom"><p>TEST</p><div>Another inner div</div><div class="another-class">Some text</div></div></div>
<p>Another text</p>
<div><div class="hello"><div class="custom another" data-custom="test-data"><div>Another inner div</div><p>TEST</p><div class="another-class">Some text</div></div></div></div></textarea>

＆＃13;

＆＃13;

＆＃13;

或者也用于测试：https://regex101.com/r/5TEMRq/1

Answer 1

我不确定你为什么要使用正则表达式来解析它...我建议使用更具体的DOM方法MDN来获取它，如下所示

＆＃13;

＆＃13;

//var content = document.querySelector('body').innerHTML;
//var matches = content.match(/<div class\="custom">(.
//*?)//<\/div>/g);
var content=document.getElementsByClassName('custom');
var conent2 =document.querySelector('.custom')
console.log(content);
console.log(conent2);

＆＃13;

<div><div class="custom"><p>TEST</p><div>Another inner div</div><div class="another-class">Some text</div></div></div>
<p>Another text</p>
<div><div class="hello"><div class="custom another" data-custom="test-data"><div>Another inner div</div><p>TEST</p><div class="another-class">Some text</div></div></div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正则表达式不解决您的问题。如果你的div只是一个平坦的级别并且没有任何嵌入的div，你只能使用正则表达式解决方案。

如果是这样，那么你的正则表达式就可以了。

但是，如果你有嵌套的div，那么更好的方法是使用xpath解析器使用xpath或xquery选择器并使用如下表达式：

//div[@class="custom"]

Answer 3

你可以这样做：

＆＃13;

＆＃13;

document.getElementsByClassName('custom');

＆＃13;

<div><div class="custom"><p>TEST</p><div>Another inner div</div><div class="another-class">Some text</div></div></div>
<p>Another text</p>
<div><div class="hello"><div class="custom another" data-custom="test-data"><div>Another inner div</div><p>TEST</p><div class="another-class">Some text</div></div></div></div>

＆＃13;

＆＃13;

＆＃13;