本文介绍一种不依赖复杂正则、稳定清除多层嵌套 HTML 注释（如 ... -->）的实用方案，通过字符串分词与状态计数实现精准剥离内层注释，保留最外层结构并还原内部非注释内容。

本文介绍一种不依赖复杂正则、稳定清除多层嵌套 html 注释（如 ` ... -->`）的实用方案，通过字符串分词与状态计数实现精准剥离内层注释，保留最外层结构并还原内部非注释内容。

HTML 注释本身不支持嵌套，但模板引擎（如 Jinja2、Django 模板）中常出现形如 ... {% endif %} --> 的混合结构——这导致传统正则表达式极易误匹配或栈溢出。你提供的正则 )[\S\s]+?--> 本质是贪心/惰性匹配的线性尝试，无法区分“嵌套层级”，一旦注释深度 ≥2 或存在跨行、转义、混合模板语法，就会失效。

✅ 正确思路：将字符串按 原子切片，用状态机跟踪注释层级
核心逻辑仅三步：

1. 分词：用 /()/ 将原文拆分为标签片段与文本片段（保留分隔符）；
2. 状态计数：state 表示当前嵌套深度（0 = 非注释区，1 = 最外层注释内，≥2 = 嵌套注释内）；
3. 选择性拼接：仅当 state === 0 时输出 ；所有 state ≥ 2 区域的内容（即嵌套注释体）被完全跳过。

以下是完整可运行的 JavaScript 实现：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

function removeNestedHtmlComments(template) {
  const parts = template.split(/(<!--|-->)/);
  let result = '';
  let state = 0; // 0: outside, 1: outer comment, >=2: nested

  for (const part of parts) {
    if (part === '<!--') {
      if (state === 0) result += part; // 只保留最外层起始标记
      state++;
    } else if (part === '-->') {
      state--;
      if (state === 1) result += part; // 只保留最外层结束标记
      // state 
<!-- {% if Navbar == "True" %}
<div class="navbar">
  <select>...<!-- nested -->...

{% endif %} -->`;

console.log(removeNestedHtmlComments(input));
// 输出：最外层注释保留，内部 `<!-- nested -->` 被彻底移除，其内容（空）也不保留

⚠️ 注意事项：

• 不处理 malformed HTML：若 数量不匹配，state 可能为负或持续增长，建议生产环境增加 if (state
• 保留原始空白与换行：分词不破坏原有格式，适合模板预处理场景；
• 性能友好：时间复杂度 O(n)，远优于递归正则或多次 replace；
• 不可用于 HTML 解析替代品：本方案专为清理注释设计，不解析 DOM 结构，勿用于需语义校验的场景。

总结：面对嵌套注释这类典型“上下文相关语言”问题，正则表达式天然受限。采用分词 + 状态机的策略，代码简洁、逻辑清晰、鲁棒性强，是模板系统构建、静态资源预编译等场景的推荐实践。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！