我来帮你搞定这个问题！要实现从URL提取destination、departure、departureDate、durationMin、adults、children这些参数，然后在页面加载时自动填充到目标表单里，用原生JavaScript就能轻松完成，下面分步骤给你讲解：

步骤1：解析URL中的查询参数 #

现代浏览器提供了URLSearchParams API，能非常方便地解析URL的查询参数，不用手动拆分字符串，代码简洁又可靠：

// 获取当前页面URL的查询参数集合
const urlParams = new URLSearchParams(window.location.search);

// 提取我们需要的参数值，参数名要和URL里的完全一致
const formValues = {
  destination: urlParams.get('destination'),
  departure: urlParams.get('departure'),
  durationMin: urlParams.get('durationMin'),
  departureDate: urlParams.get('departureDate'),
  adults: urlParams.get('adults'),
  children: urlParams.get('children')
};

步骤2：页面加载完成后填充表单 #

我们需要等页面DOM完全加载好再操作表单元素，避免出现找不到控件的情况。这里用DOMContentLoaded事件来触发填充逻辑，同时针对不同类型的表单控件做适配（比如多选下拉框的特殊处理）：

// 监听页面DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
  // 定位到目标表单，这里用action属性匹配，你也可以给表单加id来更精准定位
  const targetForm = document.querySelector('form[action^="/packagesearch"]');
  
  // 遍历需要填充的字段，给对应的表单控件赋值
  Object.entries(formValues).forEach(([fieldName, fieldValue]) => {
    const formField = targetForm.querySelector(`[name="${fieldName}"]`);
    
    // 只有当字段存在且参数值不为空时才赋值
    if (formField && fieldValue !== null) {
      // 根据控件类型处理赋值逻辑
      switch(formField.type) {
        case 'text':
        case 'date':
        case 'number':
          formField.value = fieldValue;
          break;
        case 'select-multiple':
          // 如果departure是多选下拉框（参数值是逗号分隔的多个机场代码）
          if (fieldName === 'departure') {
            const selectedOptions = fieldValue.split(',');
            Array.from(formField.options).forEach(option => {
              option.selected = selectedOptions.includes(option.value);
            });
          }
          break;
        default:
          formField.value = fieldValue;
      }
    }
  });
});

兼容旧浏览器的方案（比如IE11） #

如果你的项目需要兼容不支持URLSearchParams的旧浏览器，可以用手动解析查询参数的方法：

// 手动解析URL查询参数的工具函数
function parseUrlParams() {
  const params = {};
  const queryString = window.location.search.slice(1); // 去掉开头的?
  const paramPairs = queryString.split('&');
  
  paramPairs.forEach(pair => {
    const [key, encodedValue] = pair.split('=');
    if (key && encodedValue) {
      // 解码参数名和参数值，处理URL编码的特殊字符
      params[decodeURIComponent(key)] = decodeURIComponent(encodedValue);
    }
  });
  
  return params;
}

// 使用这个函数获取参数值
const formValues = parseUrlParams();

// 后续的表单填充代码和步骤2完全一致

注意： 确保表单控件的name属性和URL里的参数名完全匹配，比如表单里的目的地输入框name必须是destination，这样才能正确对应赋值。

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