如何用正则或JavaScript提取含指定class的div及其闭合标签？

不推荐用正则的原因 #

HTML是嵌套层级结构，正则表达式无法精准处理标签的嵌套关系，很容易匹配到错误的闭合</div>，导致提取内容不完整或错误。

推荐的DOM解析方案（可靠且简单） #

利用浏览器自带的DOM解析引擎处理HTML字符串，能自动识别标签的嵌套关系，精准提取目标元素：

// 假设已获取到目标页面的HTML字符串，存于htmlStr变量
const tempContainer = document.createElement('div');
tempContainer.innerHTML = htmlStr;

// 查找目标div
const targetDiv = tempContainer.querySelector('div.table-responsive');

if (targetDiv) {
  // 获取目标div的完整HTML（包含自身标签及内部所有内容）
  const targetHtml = targetDiv.outerHTML;
  // 将内容设置到你指定的容器中
  document.getElementById('your-container-id').innerHTML = targetHtml;
} else {
  console.log('未找到目标div');
}

这个方案的核心是让浏览器帮你处理HTML的解析和标签匹配，完全不用担心嵌套标签的问题，比正则靠谱得多。

（不推荐）正则方案（仅适用于无嵌套div的场景） #

如果你的目标div内部绝对没有嵌套其他div标签，可以尝试用这个正则，但一旦有嵌套就会失效：

const regex = /<div class="table-responsive"[^>]*>[\s\S]*?<\/div>/;
const matchResult = htmlStr.match(regex);
if (matchResult) {
  document.getElementById('your-container-id').innerHTML = matchResult[0];
}

内容的提问来源于stack exchange，提问作者paul pearce