如何用cut过滤器移除ID中空格与点号以修复querySelector选择问题

问题核心 #

自动生成的DOM ID包含空格和点号，导致querySelectorAll抛出无效选择器错误：

未捕获的DOMException: Element.querySelectorAll: '[id*=segmento_CAFES_INTERNA_GER.INT.COMERCIAL]' 不是有效的选择器

此前仅用Jinja2的cut过滤器移除空格，但不知道如何同时处理点号，串联cut尝试失败。

解决方法 #

方法1：用cut一次性移除多类字符 #

Jinja2的cut过滤器支持传入字符集合，把需要移除的所有字符放在一个字符串里作为参数，就能批量移除目标字符。比如同时移除空格和点号：

{{ 变量名|cut:" ." }}

方法2：链式调用replace过滤器 #

如果更习惯类似Python/JavaScript的链式替换逻辑，也可以多次调用replace，把目标字符替换为空：

{{ 变量名|replace(" ", "")|replace(".", "") }}

代码修改示例 #

把现有Jinja2代码中的cut:" "替换为上述两种方式之一，确保所有生成ID的变量都完成特殊字符处理：

{% if data.nivel == "N0" %}
    <tr id="family_{{ data.familia_produto|cut:" ." }}" class="bu_name_line {{ data.nivel }} title0" 
    data-level="{{ data.nivel }}" data-family="{{ data.familia_produto }}"
    data-regional="{{ data.nome_regional }}" data-segment="{{ data.segmento }}" 
    data-bu-name="{{ data.nome_filial }}" onclick="show_lines('N1','{{ data.familia_produto|cut:" ." }}')">

    <td id='bu_name' onmouseenter='hight_light(this)' onmouseleave='hight_light(this)'>
        {{ data.familia_produto }}
    </td>
            
{% elif data.nivel == "N1" %}
        <tr id="regional_{{ data.familia_produto|cut:" ." }}_{{ data.nome_regional|cut:" ." }}" 
        class="bu_name_line {{ data.nivel }} title1 hide" data-level="{{ data.nivel }}" 
        data-family="{{ data.familia_produto }}" data-regional="{{ data.nome_regional }}" 
        data-segment="{{ data.segmento }}" data-bu-name="{{ data.nome_filial }}"
        onclick="show_lines('N2A','{{ data.familia_produto|cut:" ." }}','{{ data.nome_regional|cut:" ." }}')">

        <td id='bu_name' onmouseenter='hight_light(this)' onmouseleave='hight_light(this)'>
            {{ data.nome_regional }}
        </td>
{% endif %}

额外注意事项 #

1. 除了DOM ID，onclick参数里传递的值也要做同样处理，避免JavaScript拼接选择器时再次出现无效字符。
2. 如果无法在Jinja2层面完成处理，可在JavaScript中转义选择器里的特殊字符，把点号替换为\\.（CSS属性选择器中点号属于特殊字符，必须转义才能被识别）：

// 封装转义函数
function escapeSelector(str) {
    return str.replace(/[.#]/g, '\\$&');
}

// 使用示例
var escapedLevel1 = escapeSelector(level_name[1]);
var escapedLevel2 = escapeSelector(level_name[2]);
var forecast_lines = line.parentElement.querySelectorAll(`[id*=filial_${escapedLevel1}_${escapedLevel2}]`);

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