jQuery UTM参数传递脚本引发链接重复问题求助

问题背景 #

我编写了一段jQuery脚本，用于访客浏览页面时让所有链接保留UTM参数，但遇到两个问题：

1. 当链接本身带有?时，脚本会导致链接参数重复
2. 尝试添加的外部链接排除规则完全未生效

原脚本代码：

<script type="text/javascript">
    (function() {
        function utmParams(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }
        var utmArray = ['utm_campaign','utm_medium','utm_source','utm_content','utm_term'];
        for (var i = 0; i < utmArray.length; i++) {
            if (window.location.href.indexOf(utmArray[i]) > -1) {
                $('a').not('[href*="#"]').each(function(){
                    $(this).attr("href", function(j, ahref) {
                        ahref = ahref + '?' + utmArray[i] + '=' + utmParams(utmArray[i]) + '&';
                        ahref = ahref.replace(/\?/g, (val, index, str) => index === str.indexOf('?') ? val : '');
                        return ahref;
                    });
                });
            }
        }
    })();
</script>

尝试添加的无效外部链接排除代码片段：

$('a').not('[href*]').attr('rel', 'external noopener noreferrer').each(function(){

解决方案 #

1. 修复链接参数重复问题 #

原脚本的核心问题是手动拼接URL时未处理已有参数的情况，且循环修改链接会导致重复操作。改用浏览器原生的URL和URLSearchParamsAPI可以彻底规避这类问题。

2. 修复外部链接排除规则 #

原排除逻辑not('[href*]')完全错误，正确的做法是通过当前域名判断链接是否为外部链接，精准过滤跨域名地址。

完整修复后的脚本：

<script type="text/javascript">
    (function() {
        // 获取当前页面所有非空的UTM参数
        function getCurrentUTMParams() {
            const utmKeys = ['utm_campaign','utm_medium','utm_source','utm_content','utm_term'];
            const params = new URLSearchParams(window.location.search);
            const utmParams = {};
            
            utmKeys.forEach(key => {
                const value = params.get(key);
                if (value) {
                    utmParams[key] = value;
                }
            });
            
            return utmParams;
        }

        const currentUTM = getCurrentUTMParams();
        // 如果没有UTM参数，直接退出
        if (Object.keys(currentUTM).length === 0) return;

        // 处理所有非锚点、非外部的链接
        $('a').not('[href*="#"]').filter(function() {
            const href = $(this).attr('href');
            // 排除外部链接：判断链接是否以http开头且不包含当前域名
            if (!href) return false;
            const isExternal = href.startsWith('http') && !href.includes(window.location.hostname);
            return !isExternal;
        }).each(function() {
            const $link = $(this);
            let href = $link.attr('href');
            
            // 处理相对链接，转为绝对URL方便解析
            const url = new URL(href, window.location.origin);
            const linkParams = url.searchParams;

            // 给链接添加UTM参数（如果链接本身没有该参数的话）
            Object.entries(currentUTM).forEach(([key, value]) => {
                if (!linkParams.has(key)) {
                    linkParams.set(key, value);
                }
            });

            // 更新链接的href属性
            $link.attr('href', url.toString());
        });
    })();
</script>

关键改进点 #

• 使用URL和URLSearchParamsAPI，彻底避免手动拼接URL带来的重复?、多余&等问题
• 一次性收集页面所有有效UTM参数，避免循环多次修改同一个链接
• 正确实现外部链接排除：通过当前域名判断，精准过滤跨域名链接
• 自动跳过链接本身已有的同键UTM参数，不会重复添加

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