如何在HTML渲染时跳过包含指定关键词的行项目？

根据你提供的发票行代码，要跳过包含特定关键词（比如"Freight"）的行，可以从模板预过滤、前端动态处理、PDF渲染前拦截三个方向实现，具体方案如下：

一、模板层面预过滤（最优方案） #

你用的是{LineItem.Item.Description}这类模板变量，说明是通过模板引擎渲染页面/PDF的。直接在模板里加条件判断，只渲染不包含关键词的行，能避免无效渲染，效率最高。

以常见模板引擎为例：

1. Handlebars 模板（Shopify、Express项目常用） #

用{{#unless}}判断描述是否包含"Freight"，不满足条件才渲染整行：

<!-- Begin Item Invoice Line Items -->
<div class="item-invoice items">
    <table class="list">
        <tr class="header">
            <th class="code">Code</th>
            <th class="description">Description</th>
            <th class="qty">Qty</th>
        </tr>
        <!-- Begin Item Invoice Line Item -->
        {{#each LineItems}}
            {{#unless (contains Item.Description "Freight")}}
            <tr class="item">
                <td class="code">{{Item.Code}}</td>
                <td class="description">{{Item.Description}}</td>
                <td class="qty">{{Quantity}}</td>
            </tr>
            {{/unless}}
        {{/each}}
        <!-- End Item Invoice Line Item -->
    </table>
</div>

注：Handlebars需要先注册contains辅助函数，部分支持ES6的环境可直接用includes替代。

2. Jinja2 模板（Python Flask/Django常用） #

用{% if %}做反向判断，排除包含关键词的行：

<!-- Begin Item Invoice Line Items -->
<div class="item-invoice items">
    <table class="list">
        <tr class="header">
            <th class="code">Code</th>
            <th class="description">Description</th>
            <th class="qty">Qty</th>
        </tr>
        <!-- Begin Item Invoice Line Item -->
        {% for line_item in line_items %}
            {% if "Freight" not in line_item.item.description %}
            <tr class="item">
                <td class="code">{{ line_item.item.code }}</td>
                <td class="description">{{ line_item.item.description }}</td>
                <td class="qty">{{ line_item.quantity }}</td>
            </tr>
            {% endif %}
        {% endfor %}
        <!-- End Item Invoice Line Item -->
    </table>
</div>

二、前端JavaScript动态隐藏/移除 #

如果无法修改模板，只能在页面渲染完成后处理，用JS遍历行项目，检查内容后移除或隐藏：

// 等待页面加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有行项目
    const itemRows = document.querySelectorAll('tr.item');
    
    itemRows.forEach(row => {
        // 读取描述列文本
        const descText = row.querySelector('.description').textContent.trim();
        // 包含关键词则移除该行
        if (descText.includes('Freight')) {
            row.remove();
            // 不想移除也可以隐藏：row.style.display = 'none';
        }
    });
});

三、PDF渲染前处理（Puppeteer/wkhtmltopdf场景） #

如果是生成PDF的场景，两种处理方式：

1. 优先用模板预过滤方案，直接生成不含目标行的HTML再转PDF；
2. 若只能加载现有HTML生成PDF，用Puppeteer的evaluate方法执行过滤JS后再生成：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('你的发票HTML地址', {waitUntil: 'networkidle2'});
    
    // 执行行过滤逻辑
    await page.evaluate(() => {
        const itemRows = document.querySelectorAll('tr.item');
        itemRows.forEach(row => {
            const descText = row.querySelector('.description').textContent.trim();
            if (descText.includes('Freight')) {
                row.remove();
            }
        });
    });
    
    // 生成PDF文件
    await page.pdf({path: 'invoice.pdf', format: 'A4'});
    await browser.close();
})();

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