如何提取特定标签文本并保留标签的id、class及属性？正则匹配失效求助

首先不推荐用正则处理HTML——HTML结构复杂，正则很难覆盖所有边界情况（比如属性里的引号、标签嵌套、注释等），但如果是简单场景，可以修改正则来适配带属性的标签：

• 修改正则表达式，允许<body>标签后跟随任意属性内容：

  var htmlRegexG = /<body[^>]*>([\s\S]*?)<\/body>/gi;
  var str = '<body id="main" class="container">Probably.Today</body>'.match(htmlRegexG);
  console.log(str); // 输出 ["<body id=\"main\" class=\"container\">Probably.Today</body>"]
  

  关键部分解释：
  • <body[^>]*>：匹配<body开头，[^>]*匹配除>外的任意字符（即所有属性内容），直到遇到闭合的>
  • ([\s\S]*?)：匹配标签内所有内容（包括换行，[\s\S]覆盖所有空白/非空白字符），?启用非贪婪模式，避免匹配到页面最后一个</body>
  • <\/body>：转义/避免和正则分隔符冲突，匹配闭合标签
  • gi：全局匹配+忽略大小写，兼容<BODY>这类写法

如果需要分别提取带属性的起始标签和内部文本，可以用捕获组拆分：

var htmlRegexG = /(<body[^>]*>)([\s\S]*?)(<\/body>)/i;
var str = '<body id="main" class="container">Probably.Today</body>';
var match = str.match(htmlRegexG);
if (match) {
  var openTagWithAttrs = match[1]; // 带属性的<body>起始标签
  var innerText = match[2]; // 标签内的文本
  console.log(openTagWithAttrs, innerText);
}

更可靠的方案 #

如果处理复杂HTML（比如嵌套标签、动态生成内容），直接用浏览器内置的DOM解析API，比正则靠谱得多：

var str = '<body id="main" class="container">Probably.Today</body>';
var tempDiv = document.createElement('div');
tempDiv.innerHTML = str;
var bodyElement = tempDiv.querySelector('body');
// 获取带属性的起始标签
var openTagWithAttrs = bodyElement.outerHTML.match(/<body[^>]*>/)[0];
// 获取标签内文本
var innerText = bodyElement.textContent;
console.log(openTagWithAttrs, innerText);

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