如何用正则表达式安全移除嵌套 HTML 注释？——推荐使用状态机解析法-js教程-PHP中文网

如何用正则表达式安全移除嵌套 HTML 注释？——推荐使用状态机解析法

HTML 注释不支持嵌套，但实际模板中常出现 ... --> 的非法嵌套结构；单纯正则难以可靠匹配，本文介绍一种基于状态分割的稳健解析方案，精准剥离内层注释标签，保留最外层注释及其中非注释内容。

html 注释不支持嵌套，但实际模板中常出现 ... --> 的非法嵌套结构；单纯正则难以可靠匹配，本文介绍一种基于状态分割的稳健解析方案，精准剥离内层注释标签，保留最外层注释及其中非注释内容。

在处理如 Jinja2、Django 或自定义模板引擎生成的 HTML 片段时，开发者有时会无意中写出嵌套的 HTML 注释（例如在注释内又插入），而标准 HTML 解析器（包括浏览器和多数 DOM 库）会将其视为无效语法，导致解析异常或渲染错误。虽然问题表面是“用正则删除嵌套注释”，但正则表达式本质上无法可靠处理任意深度的嵌套结构（因其不具备栈式记忆能力），尤其当注释中包含 --> 字符串（如 JS 注释、URL 参数或模板语法）时，传统贪婪/非贪婪匹配极易误判边界。

因此，更可靠的做法是采用状态机分词法：将原始字符串按作为分隔符切片，再通过计数器跟踪注释层级，仅保留最外层（层级为 0→1 和 1→0）的起始与结束标记，中间所有嵌套层级的均被忽略。

以下为可直接运行的 JavaScript 实现：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

function removeNestedHtmlComments(template) {
    // 按注释边界精确分割，保留分隔符本身
    const parts = template.split(/(<!--|-->)/);
    let result = '';
    let depth = 0; // 当前嵌套深度：0=非注释区，1=最外层注释内，≥2=嵌套注释内

    for (const part of parts) {
        if (part === '<!--') {
            if (depth === 0) {
                result += part; // 仅在顶层进入时添加起始标记
            }
            depth++;
        } else if (part === '-->') {
            depth--;
            if (depth === 1) {
                result += part; // 仅在退出到顶层时添加结束标记
            }
        } else {
            result += part; // 普通文本内容（含模板变量、HTML 标签等）原样保留
        }
    }

    return result;
}

// 使用示例
const input = `<!-- {% set Navbar = request.Navbar if request.Navbar else "True" %} -->\n<!-- {% if Navbar == "True" %}\n<div class="navbar">\n    <!-- {% if Active == 'Y' %} <option>...</option> {% endif %} -->\n\n{% endif %} -->`;
console.log(removeNestedHtmlComments(input));

✅ 关键设计说明：