const regex = /(?(DEFINE)
(?<void>br|img|area|base|col|command|embed|hr|input|keygen|link|meta|param|source|track|wbr|!DOCTYPE)
(?<any>[^<>]*+)
)
<div \s class="card">
(?P<pair> (?&any)
(:?
<(?P<v_tag>(?!\/)(?&void))(?&any)> (?:(?&pair) | (?&any))*+ (<\/(?P=v_tag)>)? |
<(?P<tag>(?!\/)[^<> ]++)(?&any)> (?:(?&pair) | (?&any))*+ <\/(?P=tag)>
) (?&any)
)*
<\/div>/gm;
// Alternative syntax using RegExp constructor
// const regex = new RegExp('(?(DEFINE)
(?<void>br|img|area|base|col|command|embed|hr|input|keygen|link|meta|param|source|track|wbr|!DOCTYPE)
(?<any>[^<>]*+)
)
<div \\s class="card">
(?P<pair> (?&any)
(:?
<(?P<v_tag>(?!\\\/)(?&void))(?&any)> (?:(?&pair) | (?&any))*+ (<\\\/(?P=v_tag)>)? |
<(?P<tag>(?!\\\/)[^<> ]++)(?&any)> (?:(?&pair) | (?&any))*+ <\\\/(?P=tag)>
) (?&any)
)*
<\\\/div>', 'gm')
const str = `<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="card-container">
<div class="card">
<h5>First MD Card</h5>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
fugiat accusamus excepturi rem temporibus nobis natus.
</p>
</div>
<div class="slider">
<ul class="progress-bar">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
`;
// Reset `lastIndex` if this regex is defined globally
// regex.lastIndex = 0;
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for JavaScript, please visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions