如何在HTML（JavaScript）中实现URL参数与元素ID自动匹配赋值？

我正在开发一个营销落地页，需要获取URL中的参数并显示在页面对应ID的HTML元素中。目前已为每个URL参数定义了对应文本占位符，现有代码可正常运行，但希望消除冗余，实现只要元素ID与URL参数名称一致（如ID为"city"的span自动匹配参数"city"），就能自动识别并更新元素的innerHTML，求解决方案。

现有代码如下：

const queryString = window.location.search;

const urlParams = new URLSearchParams(queryString);

const company_text = document.getElementById("company");
const company = urlParams.get('company');
if (company != null){
    company_text.innerHTML = company;
}

const city_text = document.getElementById("city");
const city = urlParams.get('city');
if (city != null){
    city_text.innerHTML = city;
}

编辑说明：为清晰起见更新了参数名称

解决方案 #

方案一：遍历所有URL参数自动匹配元素

这种方式无需提前维护元素ID列表，只要URL参数名和页面元素ID一致，就会自动更新内容，完全消除冗余代码：

const urlParams = new URLSearchParams(window.location.search);

// 遍历每个URL参数，匹配对应ID的元素并更新
urlParams.forEach((value, paramName) => {
  const targetElement = document.getElementById(paramName);
  if (targetElement && value !== null) {
    targetElement.innerHTML = value;
  }
});

方案二：指定目标元素ID列表进行匹配

如果只需要处理特定的元素（避免无关URL参数干扰），可以提前定义需要匹配的ID集合，再逐个处理：

// 定义需要匹配的页面元素ID集合
const targetElementIds = ['company', 'city'];
const urlParams = new URLSearchParams(window.location.search);

targetElementIds.forEach(id => {
  const paramValue = urlParams.get(id);
  const targetElement = document.getElementById(id);
  if (targetElement && paramValue !== null) {
    targetElement.innerHTML = paramValue;
  }
});

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