JavaScript UTM参数与隐藏表单：数据填充与调试技巧

// 假设这是当前的URL查询字符串，实际应用中应使用 window.location.search
let locationSearch = '?utm_campaign=testCampaign&utm_source=testSource&utm_medium=email';

/**
 * 从查询字符串中获取指定参数的值。
 * @param {string} name - 要获取的参数名称，例如 'utm_campaign'。
 * @returns {string} 参数的值，如果未找到则返回空字符串。
 */
function getUtmParams(name) {
    // 对参数名中的特殊字符进行转义，以确保正则表达式的正确性
    name = name.replace(/[[]]/g, "\$&");
    // 构建正则表达式，匹配 '?&' 后跟着参数名，然后捕获其值
    const regex = new RegExp("[?&]" + name + "(=([^&#]*))?");
    const results = regex.exec(locationSearch); // 在实际应用中，这里应使用 window.location.search

    // 如果未找到匹配项，返回空字符串
    if (results === null) {
        return "";
    }
    // 如果匹配到参数但没有值（例如 ?param&），则返回空字符串
    if (results[2] === undefined) {
        return "";
    }
    // 解码URI组件，并将 '+' 替换为空格
    return decodeURIComponent(results[2].replace(/+/g, " "));
}

const utmArray = ['utm_campaign', 'utm_medium', 'utm_source', 'utm_content', 'utm_term'];

for (let i = 0; i < utmArray.length; i++) {
    const paramName = utmArray[i];
    const paramValue = getUtmParams(paramName);

    // 仅当参数值存在时才尝试填充表单字段
    if (paramValue) {
        // 使用 CSS 选择器定位到具有特定 class 的 div 内部的隐藏 input 字段
        const targetField = document.querySelector(`div.${paramName} input[type=hidden]`);
        if (targetField) {
            targetField.value = paramValue;
            console.log(`已填充 ${paramName}: ${paramValue}`);
        } else {
            console.warn(`未找到匹配的表单字段: div.${paramName} input[type=hidden]`);
        }
    }
}

<div class="utm_campaign">
    <input type="hidden" name="campaign_id" id="campaign_field" value="">
</div>

<div class="utm_source">
    <input type="hidden" name="source_id" id="source_field" value="">
</div>

<div class="utm_medium">
    <input type="hidden" name="medium_id" id="medium_field" value="">
</div>
<!-- 其他 UTM 参数的 div 结构 -->

// 假设 locationSearch 已经设置，getUtmParams 函数也已定义

const utmArray = ['utm_campaign', 'utm_medium', 'utm_source', 'utm_content', 'utm_term'];

for (let i = 0; i < utmArray.length; i++) {
    const paramName = utmArray[i];
    const paramValue = getUtmParams(paramName);

    if (paramValue) {
        const targetField = document.querySelector(`div.${paramName} input[type=hidden]`);
        if (targetField) {
            targetField.value = paramValue;
            console.log(`已填充 ${paramName}: ${paramValue}`);

            // 调试技巧：临时将隐藏字段改为文本字段以验证值
            targetField.type = 'text';
            // 调试完成后，可以删除或注释掉上面这行代码，或者在生产环境中移除
        } else {
            console.warn(`未找到匹配的表单字段: div.${paramName} input[type=hidden]`);
        }
    }
}