如何使用正则表达式获取 div 类中的段落

Question

我需要一个正则表达式来提取来自 react 本机应用程序中 json api 的 html 字符串中的类轮播标题div 内的段落。

var m,
array= [],
str = '
<p>some other text .....  </p>
<div class="carousel-caption d-none d-md-block">nn                <p>some text .....  </p></div>
<div class="carousel-caption d-none d-md-block">nn                n            </div>
<div class="carousel-caption d-none d-md-block">nn                <p>some text .....  </p></div>
<div class="carousel-caption d-none d-md-block">nn                <p>some text .....  </p></div>
<p>some other text .....  </p>';
rex = /<div [^<>]+carousel-caption[^<>]+>s*<p>(.+?)</p>/g;
do {
m = rex.exec(str);
if (m) {
console.log(m[1]);
}
} while (m);

我有多个div，每个类别的名称轮播标题都包含一个段落，并且我有一些段落不在类轮播标题中，使用 rex，我可以在轮播标题div 类中获取段落，但是我希望数组具有空字段，以防div 在保持顺序的同时不包含段落，因为我需要其图像下的标题， 有些图像没有标题。

Answer 1

这假设您的段落中没有子元素...m[1] 包含段落标签的文本...

var m, str = `
<p>some other text .....  </p>
<div class="d-none carousel-caption d-md-block">
<p>some text 1 .....  </p>
</div>
<div class="carousel-caption d-none d-md-block">
<p> some text 2 .....  </p>
</div>
<div class="carousel-caption d-none d-md-block">
<p>  some <span>text 3</span> .....  </p>
</div>
<div class="carousel-caption d-none d-md-block">
</div>
<div class="d-none d-md-block">
<p>oh-no! missing style class</p>
</div>
<p>some other text .....  </p>
`;
matches = str.matchAll(/<div [^<>]+carousel-caption[^<>]+>s*(?:<p>)?s*(.*?)s*(?:</p>)?s*</div>/gsi);
for (m of matches) {
console.log("match: '" + m[1] + "'");
}

生成

match: 'some text 1 .....'
match: 'some text 2 .....'
match: 'some <span>text 3</span> .....'
match: ''

更新：修复了正则表达式以仅选择带有类=轮播标题的div内的段落

更新：更改了正则表达式以可能允许段落内的标签...其他 p 标签除外。请记住正则表达式！= HTML解析器，不应该(滥用(这样使用。如果 HTML 结构如定义的那样，则此方法有效。如果你的HTML可以以任何可以想象的方式改变，请使用HTML解析器，正则表达式Oneliner不会这样做。

更新：更改了正则表达式以选择具有相应样式类集的空div。

Answer 2

这允许更改类的顺序，类属性上的单引号或双引号，并允许div的更多属性。p必须在同一行中，并且p标记中不得有任何参数。此外，p不得包含任何换行符。在div标签之间必须有一个换行符。

有两个结果组，第一个是引号(单引号或双引号，用于正则表达式本身(，第二个是p中的文本。

<div.*class=("|')(?:s*(?:carousel-caption|d-none|d-md-block)s*){3}1.*>s*<p>(.*)</p>s*</div>

let str = 
'<p>some other text .....  </p>n' + 
'<div class="carousel-caption d-none d-md-block"> <p>1 some text .....  </p></div>n' + 
'<div class="carousel-caption d-none d-md-block"> <p>2 some text .....  </p></div>n' + 
'<div class="carousel-caption d-none d-md-block"> <p>3 some text .....  </p></div>n' + 
'<p>some other text .....  </p>';
const rex = /<div.*class=("|')(?:s*(?:carousel-caption|d-none|d-md-block)s*){3}1.*>s*<p>(.*)</p>s*</div>/g;
let m;
while ((m = rex.exec(str)) !== null) {
console.log("Found", m[2]);
}

请注意，这也会错误地检测到

<div class="carousel-caption carousel-caption carousel-caption"> <p>some text .....  </p></div>

---

如果您确定该格式与您在问题中发布的格式完全相同，我建议您使用substring和indexOf.

let str = 
'<p>some other text .....  </p>n' + 
'<div class="carousel-caption d-none d-md-block"> <p>some text .....  </p></div>n' + 
'<div class="carousel-caption d-none d-md-block"> <p>some text .....  </p></div>n' + 
'<div class="carousel-caption d-none d-md-block"> <p>some text .....  </p></div>n' + 
'<p>some other text .....  </p>';
let search = '<div class="carousel-caption d-none d-md-block"> <p>';
let offset = 0;
let pos;
while((pos = str.indexOf(search, offset)) > 0){
let end = str.indexOf("</p>", pos);
offset = pos + search.length;
console.log("Found div at", pos, ", content of p: ", str.substr(offset, end - offset))
}