使用正则表达式移除嵌套HTML注释的技术求助

架构老林

2026-7-8

移除嵌套HTML注释中的内部注释标签

我有一段包含嵌套层级的HTML注释字符串，示例结构如下：

<!-- some text <!-- some text --> -->

需要移除所有位于其他注释内部的注释标签，最终得到：

<!-- some text some text -->

我尝试使用以下正则表达式，但无法匹配目标字符串：

<!--[\S\s]+?(&lt;!--[\S\s]+?--&gt;)[\S\s]+?-->

测试字符串

<!-- {% set Navbar = request.Navbar if request.Navbar else "True" %} -->
<!-- {% if Navbar == "True" %}
<div class="navbar navbar-default navbar-static-top">
    <form method="GET" id="frm" name="frm" role="form">
        <div class="col-sm-8">
            <div style="margin-top: 8px;">
                <div class="col-sm-3" style="padding-left: 0;">
                    <input name="From" id="From" value="L___ From R___" class="form-control" placeholder="Effective From *" style="width: 100%;" required data-provide="datepicker" data-date-format="yyyy-mm-dd">
                </div>
                <div class="col-sm-3" style="padding-left: 0;">
                    <input name="To" id="To" value="L___ To R___" class="form-control" placeholder="Effective To *" style="width: 100%;" required data-provide="datepicker" data-date-format="yyyy-mm-dd">
                </div>
                <div class="col-sm-2" style="padding-left: 0;">
                    <select name="Active" class="form-control" style="width: 100%;">
                        <!-- {% if Active == 'Y' %}
                            <option selected value="Y">Active (Yes)</option>
                            <option value="N">Active (No)</option>
                        {% else %}
                            <option value="Y">Active (Yes)</option>
                            <option selected value="N">Active (No)</option>
                        {% endif %} -->
                    </select>
                </div>

                <!-- {% set CurrencyList = getRecord('MKT_CURRENCY') %} -->
                <!-- {% if len(CurrencyList) > 0 %}
                    <div class="col-sm-2" style="padding-left: 0;">
                        <select name="FilterCurrency" class="form-control" style="width: 100%;">
                        <!-- {% for CurrObj in CurrencyList %}
                            <option L___'selected' if FilterCurrency == CurrObj.ID else ''R___  value="L___ CurrObj.ID R___">L___ CurrObj.ID R___</option>
                        {% endfor %} -->
                        </select>
                    </div>
                {% endif %} -->
                <label class="col-sm-1" style="padding:0px;">
                    <button type="submit" class="btn btn-flat btn-labeled btn-primary" style="padding: 7px 25px;">
                        Show
                    </button>
                </label>
            </div>
        </div>
        <div class="col-sm-4" style="margin-top: 8px;">
            <div class="pull-right">
                <a id="print" onclick="" class="btn btn-flat btn-labeled btn-success">
                    <span class="btn-label icon fa fa-print"></span> Print
                </a>
            </div>
        </div>
    </form>
</div>
{% endif %} -->

期望结果

移除所有内部的标签，保留注释内容：

<!-- {% set Navbar = request.Navbar if request.Navbar else "True" %} -->
<!-- {% if Navbar == "True" %}
<div class="navbar navbar-default navbar-static-top">
    <form method="GET" id="frm" name="frm" role="form">
        <div class="col-sm-8">
            <div style="margin-top: 8px;">
                <div class="col-sm-3" style="padding-left: 0;">
                    <input name="From" id="From" value="L___ From R___" class="form-control" placeholder="Effective From *" style="width: 100%;" required data-provide="datepicker" data-date-format="yyyy-mm-dd">
                </div>
                <div class="col-sm-3" style="padding-left: 0;">
                    <input name="To" id="To" value="L___ To R___" class="form-control" placeholder="Effective To *" style="width: 100%;" required data-provide="datepicker" data-date-format="yyyy-mm-dd">
                </div>
                <div class="col-sm-2" style="padding-left: 0;">
                    <select name="Active" class="form-control" style="width: 100%;">
                        {% if Active == 'Y' %}
                            <option selected value="Y">Active (Yes)</option>
                            <option value="N">Active (No)</option>
                        {% else %}
                            <option value="Y">Active (Yes)</option>
                            <option selected value="N">Active (No)</option>
                        {% endif %}
                    </select>
                </div>

                {% set CurrencyList = getRecord('MKT_CURRENCY') %}
                {% if len(CurrencyList) > 0 %}
                    <div class="col-sm-2" style="padding-left: 0;">
                        <select name="FilterCurrency" class="form-control" style="width: 100%;">
                        {% for CurrObj in CurrencyList %}
                            <option L___'selected' if FilterCurrency == CurrObj.ID else ''R___  value="L___ CurrObj.ID R___">L___ CurrObj.ID R___</option>
                        {% endfor %} 
                        </select>
                    </div>
                {% endif %}
                <label class="col-sm-1" style="padding:0px;">
                    <button type="submit" class="btn btn-flat btn-labeled btn-primary" style="padding: 7px 25px;">
                        Show
                    </button>
                </label>
            </div>
        </div>
        <div class="col-sm-4" style="margin-top: 8px;">
            <div class="pull-right">
                <a id="print" onclick="" class="btn btn-flat btn-labeled btn-success">
                    <span class="btn-label icon fa fa-print"></span> Print
                </a>
            </div>
        </div>
    </form>
</div>
{% endif %} -->

问题分析

你原来的正则存在两个关键问题：

错误使用了转义后的，但实际字符串中是原生的，导致匹配逻辑完全错误。
只能匹配固定结构的单层嵌套，无法处理多个分散的内部注释，也不支持多层嵌套的循环处理。

解决方案

方法一：循环正则替换（支持多层嵌套）

核心逻辑是遍历所有外层注释，移除其内部的所有注释标签，重复这个过程直到没有嵌套注释为止。

JavaScript代码示例：

function cleanNestedComments(html) {
    // 循环处理，直到无法再匹配到嵌套注释
    while (/<!--[\s\S]*?<!--[\s\S]*?-->[\s\S]*?-->/.test(html)) {
        html = html.replace(/<!--([\s\S]*?)-->/g, (match, content) => {
            // 移除当前注释内容里的所有注释标签
            content = content.replace(/<!--|-->/g, '');
            return `<!--${content}-->`;
        });
    }
    return html;
}

// 使用示例
const cleanedHtml = cleanNestedComments(你的测试字符串);

方法二：单次替换（仅适用于单层嵌套）

如果确定只有一层嵌套，可以用这个正则直接替换内部注释标签：

html = html.replace(/(<!--[\s\S]*?)<!--([\s\S]*?)-->([\s\S]*?-->)/g, '$1$2$3');

若存在多层嵌套，只需循环调用此替换逻辑即可。

效果验证

上述代码处理你的测试字符串后，会完全符合期望结果：所有内部注释标签被移除，外层注释保留，模板代码完整无缺失。

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

使用正则表达式移除嵌套HTML注释的技术求助

测试字符串 #

期望结果 #

问题分析 #

解决方案 #