JS获取最终表单页所有URL参数并通过p标签输出

这个方案无第三方依赖，逻辑足够轻量，既满足把所有URL参数通过p标签输出的需求，也预留了后续配套测试程序调用参数的入口，直接复制就能用。

完整代码 #

把以下代码放到表单页面的</body>闭合标签之前即可，参数展示容器的位置可以根据页面布局自行调整：

<!-- URL参数展示容器 -->
<div id="urlParamsContainer"></div>

<script>
// 解析全部URL参数，返回结构化对象
function parseAllUrlParams() {
  const paramMap = {}
  const searchPart = window.location.search.slice(1)
  if (!searchPart) return paramMap
  searchPart.split('&').forEach(paramItem => {
    const [paramKey, paramValue] = paramItem.split('=')
    paramMap[decodeURIComponent(paramKey)] = decodeURIComponent(paramValue ?? '')
  })
  return paramMap
}

// 页面加载后执行
const allParams = parseAllUrlParams()
// 挂载到全局，方便后续配套测试程序直接调用
window.pageUrlParams = allParams
// 遍历参数生成p标签插入页面
const showContainer = document.getElementById('urlParamsContainer')
Object.entries(allParams).forEach(([key, value]) => {
  const pTag = document.createElement('p')
  pTag.textContent = `${key}：${value}`
  showContainer.appendChild(pTag)
})
</script>

使用说明 #

• 核心解析逻辑不到10行，没有多余的兼容性判断和复杂封装，后续要调整参数处理规则非常方便
• 解析完成的参数对象挂载在全局window.pageUrlParams上，后续开发的配套程序直接读取这个变量就能拿到所有参数，不需要重复解析URL
• 代码自动做了URL解码，中文、特殊符号类参数不会出现乱码问题
• 所有参数项都用原生<p>标签渲染，没有自带冗余样式，可以根据表单页面的设计给p标签加样式调整展示效果
• 当URL后没有拼接参数时，不会生成多余空标签，也不会抛出JS错误，不会影响表单页面原有功能运行

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