无法修改源码时，如何替换Ajax分页商品卡片文本？

Nginx sub_filter模块的可行性 #

可以用Nginx的sub_filter模块实现，但需要注意配置细节以覆盖所有场景：

核心配置要点 #

sub_filter默认仅处理单次请求的响应内容，要覆盖初始渲染和Ajax加载的内容，需做以下配置：

• 启用sub_filter_once off：确保替换所有匹配的文本，而非仅第一个；
• 指定sub_filter_types：覆盖所有需要处理的内容类型（比如HTML、JSON，因为Ajax请求可能返回JSON格式的商品数据）；
• 对Ajax请求路径单独配置（如果有独立接口）：确保异步加载的响应也经过替换处理。

示例配置 #

server {
    listen 80;
    server_name your-shop-domain.com;

    # 处理主页面请求（初始渲染的商品卡片）
    location / {
        proxy_pass http://your-backend-server;
        sub_filter "原商品文本" "替换后的文本";
        sub_filter_once off;
        sub_filter_types *; # 对所有内容类型生效
    }

    # 处理Ajax商品加载接口（假设接口路径为/api/products）
    location /api/products {
        proxy_pass http://your-backend-server;
        sub_filter "原商品文本" "替换后的文本";
        sub_filter_once off;
        sub_filter_types application/json; # 适配JSON格式的响应
    }
}

局限性 #

• 仅能替换响应中的静态文本片段，如果商品文本是动态生成且无固定匹配模式，可能出现误替换；
• 无法处理前端JS动态拼接的文本，仅能处理返回的原始响应内容。

其他可行方案 #

1. 浏览器用户脚本（Tampermonkey/Greasemonkey） #

这是最灵活的方案，完全在浏览器端处理，能覆盖所有动态加载的内容：

• 监听DOM变化，捕获Ajax加载后新增的商品卡片；
• 精准定位商品文本元素，执行替换逻辑。

示例脚本 #

// ==UserScript==
// @name         商品卡片文本替换工具
// @match        https://your-shop-domain.com/*
// @grant        none
// ==/UserScript==

// 定义替换逻辑
function replaceProductTexts() {
    // 假设商品名称的CSS选择器为.product-card .name
    const productElements = document.querySelectorAll('.product-card .name');
    productElements.forEach(el => {
        // 替换指定文本，或直接设置新内容
        el.textContent = el.textContent.replace("原文本", "替换后的文本");
    });
}

// 初始页面加载后执行一次
replaceProductTexts();

// 监听DOM变化，处理Ajax加载的新内容
const domObserver = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length > 0) {
            replaceProductTexts();
        }
    });
});

// 监听整个body的子节点变化
domObserver.observe(document.body, { childList: true, subtree: true });

2. Nginx Lua脚本（复杂替换场景） #

如果sub_filter的简单文本替换无法满足需求（比如需要正则分组、动态逻辑），可以用ngx_lua模块实现更灵活的替换：

server {
    listen 80;
    server_name your-shop-domain.com;

    location / {
        proxy_pass http://your-backend-server;
        # 清除Content-Length，避免内容长度不匹配
        header_filter_by_lua_block {
            ngx.header.content_length = nil;
        }
        # 处理响应体内容
        body_filter_by_lua_block {
            local body = ngx.arg[1]
            if body then
                # 使用Lua的string.gsub实现正则替换
                body = string.gsub(body, "原文本(.*)", "替换后的文本%1")
                ngx.arg[1] = body
            end
        }
    }
}

3. CDN内容替换规则 #

如果你的网站使用CDN服务（如Cloudflare），可以通过CDN的内容转换规则实现文本替换：

• 在CDN控制台配置响应内容替换规则，覆盖主页面和Ajax请求；
• 无需维护服务器端配置，操作更便捷。

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