如何移除生成HTML中的嵌套注释？解决正则适配难题

问题分析 #

非贪婪正则/<!--(.*?)-->/能处理多数独立注释场景，但遇到后端生成的非法嵌套注释时，会残留闭合标签-->；改用贪婪模式又会误删多个独立注释之间的内容，所以需要更可靠的处理方式。

方案1：状态机遍历（推荐，适配所有场景） #

通过追踪注释层级，逐字符处理，能精准识别嵌套注释并完全移除，同时保留多个独立注释间的内容。

以JavaScript为例实现：

function removeHtmlComments(html) {
  let result = '';
  let commentLevel = 0; // 0 = 不在注释内，大于0 = 处于对应层级的注释中
  let i = 0;
  const totalLength = html.length;

  while (i < totalLength) {
    // 匹配注释起始标记
    if (html.slice(i, i + 4) === '<!--') {
      commentLevel++;
      i += 4;
    }
    // 匹配注释结束标记，且当前处于注释内
    else if (html.slice(i, i + 3) === '-->' && commentLevel > 0) {
      commentLevel--;
      i += 3;
    }
    // 不在注释内，保留当前字符
    else if (commentLevel === 0) {
      result += html[i];
      i++;
    }
    // 处于注释内，跳过当前字符
    else {
      i++;
    }
  }
  return result;
}

测试效果：

• 嵌套注释输入：text <!-- something <!-- <p> test </p> --> need remove -->
• 输出：text （整个嵌套注释被完全移除）
• 多独立注释输入：<!-- <h1> test </h1> --> not remove <!-- <h1> test 2 </h1> -->
• 输出：not remove（正确保留中间内容）

方案2：循环正则替换（简单场景适用） #

通过多次替换非嵌套注释，逐步消解嵌套结构，直到没有可替换的注释为止。

JavaScript实现：

function removeNestedComments(html) {
  // 匹配不包含嵌套注释的单个注释块
  const commentRegex = /<!--(?:(?!<!--|-->)[\s\S])*-->/g;
  let lastHtml;
  do {
    lastHtml = html;
    html = html.replace(commentRegex, '');
  } while (html !== lastHtml); // 直到没有变化，说明嵌套已处理完
  return html;
}

说明：第一次替换会移除最内层的注释，外层注释变成普通的非嵌套注释，第二次替换即可移除，循环直到所有注释都被处理。

内容的提问来源于stack exchange，提问作者Bálint Bakos