UserScript需求：根据原始链接动态保留view参数更新页面URL

需求：访问特定网站时，修改页面中所有匹配https://example.com/t?view=xxx格式的URL，保留原始的view参数值（如card、list、group、poster），同时添加固定分类参数categories[0]=1&categories[1]=2&categories[2]=6。

原脚本问题：现有脚本会将所有匹配链接的view参数强制设为card，无法保留原始参数值。

优化后的脚本 #

(function() {
    'use strict';

    // 匹配目标域名下带view参数的链接
    const anchors = document.querySelectorAll('a[href^="https://example.com/t?view="]');
    // 允许保留的view参数值列表
    const allowedViews = ['card', 'list', 'group', 'poster'];
    // 固定要添加的分类参数
    const fixedCategories = {
        'categories[0]': '1',
        'categories[1]': '2',
        'categories[2]': '6'
    };

    anchors.forEach(element => {
        const url = new URL(element.href);
        const originalView = url.searchParams.get('view');
        
        // 仅处理允许范围内的view值
        if (allowedViews.includes(originalView)) {
            // 重置参数，保留原始view
            url.searchParams.set('view', originalView);
            // 添加固定分类参数
            Object.entries(fixedCategories).forEach(([key, value]) => {
                url.searchParams.set(key, value);
            });
            // 更新链接地址
            element.href = url.toString();
        }
    });
})();

关键优化点 #

• 使用URL和URLSearchParamsAPI处理链接参数，比字符串拼接更可靠，避免参数冲突或格式错误
• 通过allowedViews列表限制处理范围，只修改指定的view参数值链接
• 动态保留原始view参数值，再添加固定分类参数，精准实现需求中的URL格式

效果示例 #

优化后生成的链接格式如下：

https://example.com/t?view=card&categories[0]=1&categories[1]=2&categories[2]=6
https://example.com/t?view=list&categories[0]=1&categories[1]=2&categories[2]=6
https://example.com/t?view=group&categories[0]=1&categories[1]=2&categories[2]=6
https://example.com/t?view=poster&categories[0]=1&categories[1]=2&categories[2]=6

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