HTML如何获取URL参数_GET请求处理技术【指南】

应使用URLSearchParams接口解析查询参数，它兼容现代浏览器且语法简洁；若需兼容老旧浏览器，则可手动分割字符串并解码；推荐封装为parseUrlParams()函数，并注意对键值进行decodeURIComponent解码及HTML转义以防XSS。

如果您需要在HTML页面中提取当前URL中的查询参数，例如从“https://example.com/page.html?name=John&age=30”中获取name和age的值，则需借助JavaScript解析location.search字符串。以下是实现此目标的具体方法：

一、使用URLSearchParams接口解析

URLSearchParams是现代浏览器原生支持的API，可直接将查询字符串转换为键值对集合，语法简洁且兼容性良好（Chrome 49+、Firefox 44+、Edge 17+、Safari 10.1+）。

1、声明一个URLSearchParams实例，传入window.location.search作为参数。

2、调用get()方法传入参数名，获取对应值；若参数不存在则返回null。

立即学习“前端免费学习笔记（深入）”；

3、调用getAll()方法可获取重复参数名的所有值（如?tag=a&tag=b）。

4、使用for...of循环遍历所有键值对，执行逐项处理逻辑。

二、手动分割字符串解析

该方法不依赖特定API，适用于需支持老旧浏览器（如IE）的场景，通过字符串操作提取键值对，再进行解码与映射。

1、获取window.location.search子字符串，并去除开头的“?”字符。

2、使用split('&')将查询字符串拆分为参数数组。

3、对每个参数项使用split('=')分离键与值，再分别调用decodeURIComponent()解码。

4、将解码后的键值存入普通对象中，供后续读取使用。

三、封装为可复用函数

为提升代码复用性与可维护性，可将解析逻辑封装为独立函数，支持按需调用并返回完整参数对象。

1、定义函数parseUrlParams()，无参数，内部读取location.search。

2、初始化空对象params用于存储结果。

标签： javascript java html 编码 浏览器 edge safari win 代码复用 字符串解析 键值对