如何移除iframe URL查询字符串中的#038;以提取全部UTM参数？

我尝试从iframe的URL查询字符串中提取UTM参数，但查询字符串里总是带有&（HTML转义后的&符号），导致JavaScript只能获取第一个参数utm_campaign，拿不到utm_medium、utm_source等其他参数。

URL查询字符串示例：

?utm_campaign=testCampaign&utm_medium=testMedium&utm_source=testMedium&utm_content=testContent&utm_term=testTerm&

我用了下面的脚本，请问怎么移除URL里的&，或者直接正确提取所有UTM参数？

function getUtmParams(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
        results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\&/gi,''));
    }
    var utmArray = ['utm_campaign','utm_medium','utm_source','utm_content','utm_term'];
    for (var i = 0; i < utmArray.length; i++) {
      console.log("b " + getUtmParams(utmArray[i]));
        document.querySelector("div." + utmArray[i] + " input[type=hidden]").value = getUtmParams(utmArray[i]);
        console.log("div." + utmArray[i] + " input[type=hidden]" + getUtmParams(utmArray[i]));
    }

解决方案 #

方案1：预处理查询字符串，替换转义字符 #

先把查询字符串里的&全部替换成标准的&，再用原有逻辑匹配参数，就能正常识别所有参数分隔符：

function getUtmParams(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    // 替换所有HTML转义的&为&
    var processedSearch = location.search.replace(/&/g, '&');
    var regex = new RegExp("[\\?&]" + name + "=([^&]*)");
    var results = regex.exec(processedSearch);
    return results === null ? "" : decodeURIComponent(results[1]);
}

方案2：修改正则表达式，兼容两种分隔符 #

如果不想修改原始查询字符串，可以让正则同时匹配&和&作为参数的分隔前缀：

function getUtmParams(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    // 正则匹配?、&或者&作为参数的起始分隔符
    var regex = new RegExp("[\\?&|&]" + name + "=([^&#]*)");
    var results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\&/gi,''));
}

方案3：使用现代API（推荐） #

用浏览器原生的URLSearchParamsAPI，它能自动处理大部分URL编码/转义问题，代码更简洁可靠：

function getUtmParams(name) {
    // 先替换转义的&，再初始化URLSearchParams
    var processedSearch = location.search.replace(/&/g, '&');
    const params = new URLSearchParams(processedSearch);
    // 参数不存在则返回空字符串
    return params.get(name) || "";
}

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