正则匹配指定HTML标签区间内容失效：特定DOM页面问题求助

首先，你的初始正则失效大概率是因为目标页面的<p class="MyClass">标签存在格式变体，比如属性顺序不同、多余空格、单引号替代双引号，或者标签内包含其他附加属性（比如id、style）。咱们一步步来解决：

第一步：修复正则表达式 #

把你的正则调整为更健壮的版本，兼容常见的标签格式差异：

/(<p\s+class=["']MyClass["']\b[\s\S]*?)<p\s+class=["']MyClass["']/gi

关键改进点： #

• 用\s+匹配p和class之间的任意数量空格（避免标签里的多余空格导致匹配失败）
• 用["']同时支持双引号和单引号的class属性值
• 添加\b确保MyClass是完整的类名（避免匹配到类似MyClass-extra的关联类）
• 把*改成*?启用非贪婪匹配，防止过度匹配到多个标签之外的无关内容
• 添加gi修饰符：g全局匹配所有组，i忽略大小写（适配页面标签大小写不统一的情况）

第二步：为什么初始正则会失效？ #

你原来的正则/(<p class="MyClass">[\s\S]*)<p class="MyClass">是严格匹配固定格式的标签，但实际页面的HTML往往不会这么规整：

比如目标页面里的标签可能是<p class="MyClass" style="margin:0">、<p class='MyClass'>或者<P CLASS="MyClass">，这些细微的格式差异都会让你的初始正则直接失效。

第三步：更可靠的方案——用DOM解析代替正则 #

其实正则并不是处理HTML的最佳选择（HTML的结构太灵活，正则很容易出现各种边缘情况），推荐用浏览器的DOM API或者后端的HTML解析库来处理：

前端浏览器环境示例： #

// 获取所有目标p标签
const targetPs = document.querySelectorAll('p.MyClass');
// 提取每两个相邻标签之间的内容
for(let i = 0; i < targetPs.length - 1; i++){
  let currentEl = targetPs[i].nextSibling;
  let content = [];
  while(currentEl && currentEl !== targetPs[i+1]){
    if(currentEl.nodeType === Node.TEXT_NODE){
      content.push(currentEl.textContent.trim());
    } else if(currentEl.nodeType === Node.ELEMENT_NODE){
      content.push(currentEl.outerHTML);
    }
    currentEl = currentEl.nextSibling;
  }
  console.log(`第${i+1}组内容:`, content.join(''));
}

后端Node.js环境示例（用cheerio库）： #

const cheerio = require('cheerio');
const html = // 你的页面HTML内容;
const $ = cheerio.load(html);
const targetPs = $('p.MyClass');

targetPs.each((index, el) => {
  if(index === targetPs.length -1) return;
  let nextEl = $(el).next();
  let content = [];
  while(nextEl.length > 0 && !nextEl.hasClass('MyClass')){
    content.push(nextEl.prop('outerHTML'));
    nextEl = nextEl.next();
  }
  console.log(`第${index+1}组内容:`, content.join(''));
});

这种方法完全不用担心标签格式的差异，能准确处理各种DOM结构，比正则靠谱得多。

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