怎么利用 URL 类解析网页地址并获取协议端口及路径参数

秋杰同学_4044

秋杰同学_4044

2026-04-08

510人浏览

原创

url构造函数最可靠,但search参数需注意:search返回编码态字符串,searchparams.get()自动解码;pathname末尾斜杠影响值,拼接子路径应使用new url('detail', url).pathname;searchparams不暴露原始编码,ie需降级。

怎么利用 url 类解析网页地址并获取协议端口及路径参数

URL 类能直接解析但不自动解码参数值

浏览器原生 URL 构造函数是目前最可靠、兼容性最好的解析方式,它会把输入字符串按标准 URL 规范拆成 protocol、host、port、pathname、search 等属性。但要注意:search 返回的是原始查询字符串(如 "?name=%E4%BD%A0%E5%A5%BD&id=123"),不会自动 decodeURIComponent,参数值仍是百分号编码状态。

常见错误是直接取 url.searchParams.get('name') 就以为拿到明文,其实它内部做了自动解码——这点容易被忽略,但恰恰是安全的:你用 get() 拿到的是已解码结果,而手动读 search 字符串则仍是编码态。

  • new URL('https://api.example.com:8080/v1/users?id=1&sort=desc') 是合法的,即使端口不是默认值(https 默认 443,http 默认 80)也会保留 port 属性
  • 如果 URL 不含显式端口(如 https://api.example.com/v1),port 属性为空字符串 '',不是 '443';需自行判断协议补默认值
  • 传入相对路径(如 /path?x=1)会抛 TypeError,必须提供基础 URL 或确保是绝对地址

提取 pathname 要注意末尾斜杠和空路径

pathname 属性返回以 / 开头的路径段,但它的行为受 URL 结尾影响:若 URL 以域名结尾(如 https://a.com),pathname 是 '/';若带路径但末尾无斜杠(如 https://a.com/api),pathname 就是 '/api';若路径为空且无 trailing slash(极少见),实际仍会归一化为 '/'。

这在做路由匹配或拼接子路径时容易出错。比如想在当前路径后加 detail,不能简单写 url.pathname + '/detail',因为 url.pathname === '/' 会导致结果变成 '//detail'。

  • 安全拼接方式:new URL('detail', url).pathname —— 利用 URL 构造函数的相对解析能力
  • 判断是否为根路径:url.pathname === '/' || url.pathname === ''(后者理论上不应出现,但某些非标准输入可能触发)
  • 服务端返回的 Location 响应头可能含相对路径,前端用 new URL(headerValue, window.location) 才能正确解析

searchParams 对象适合读写参数但不暴露原始编码

URLSearchParams 是 URL 实例的 searchParams 属性,它封装了查询参数的增删改查,底层自动处理编码/解码。调用 .get()、.getAll() 返回的都是已解码字符串;用 .set()、.append() 输入的字符串会被自动编码。

这意味着你无法通过它获取原始 URL 中的编码形式(比如区分 %20 和 +),也不建议依赖其输出做签名或透传——若需保持原始编码,只能手动解析 search 字符串并用正则或 split('&') 处理,但风险高、边界多。

  • url.searchParams.has('q') 比 url.search.includes('q=') 更可靠,能避免子串误匹配(如 qq=)
  • 批量设置参数用 new URLSearchParams(obj) 构造器,对象 key/value 会自动编码,但 value 为 null 或 undefined 会被转成空字符串
  • IE 不支持 URL 和 URLSearchParams,需用 core-js 或降级方案(如 document.createElement('a'))

协议和端口组合决定实际请求目标

protocol 返回带冒号的字符串(如 'https:'),port 是字符串类型(哪怕数值是数字)。二者组合才能准确还原连接信息:例如 protocol === 'http:' && port === '' 表示使用默认端口 80;protocol === 'https:' && port === '8443' 表示显式指定了非标 HTTPS 端口。

这个组合直接影响 fetch 请求是否跨域、是否被浏览器拦截(如混合内容)、甚至服务端 TLS 终止位置。不要只看 host 就认为“域名一样就没问题”。

  • 检查是否为 HTTPS 安全上下文:url.protocol === 'https:',注意末尾冒号不能省略
  • 拼接完整 origin 时:${url.protocol}//${url.host},不要用 hostname + port,因为 host 已包含端口(如 'example.com:3000')
  • 服务端重定向时,若 Location 响应头中 protocol 与当前页不一致(如从 https 跳到 http),现代浏览器会阻止并报 Mixed Content 错误

真正难处理的是用户粘贴的脏 URL:缺协议、双斜杠、中文未编码、空格混入。别指望一次 new URL() 全搞定,先用正则或字符串预处理补协议、去首尾空格、替换空格为 %20,再尝试构造。否则失败不是解析逻辑问题,而是输入根本不符合 URL 标准。

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
java
java

Java是一个通用术语,用于表示Java软件及其组件,包括“Java运行时环境 (JRE)”、“Java虚拟机 (JVM)”以及“插件”。php中文网还为大家带了Java相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.15

10237

6

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

2023.07.05

7362

9

java自学难吗
java自学难吗

Java自学并不难。Java语言相对于其他一些编程语言而言,有着较为简洁和易读的语法,本专题为大家提供java自学难吗相关的文章,大家可以免费体验。

2023.07.31

6472

8

java配置jdk环境变量
java配置jdk环境变量

Java是一种广泛使用的高级编程语言,用于开发各种类型的应用程序。为了能够在计算机上正确运行和编译Java代码,需要正确配置Java Development Kit(JDK)环境变量。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.08.01

1104

3

java保留两位小数
java保留两位小数

Java是一种广泛应用于编程领域的高级编程语言。在Java中,保留两位小数是指在进行数值计算或输出时,限制小数部分只有两位有效数字,并将多余的位数进行四舍五入或截取。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.08.02

908

3

java基本数据类型
java基本数据类型

java基本数据类型有:1、byte;2、short;3、int;4、long;5、float;6、double;7、char;8、boolean。本专题为大家提供java基本数据类型的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.02

1356

5

java有什么用
java有什么用

java可以开发应用程序、移动应用、Web应用、企业级应用、嵌入式系统等方面。本专题为大家提供java有什么用的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.02

2689

5

java在线网站
java在线网站

Java在线网站是指提供Java编程学习、实践和交流平台的网络服务。近年来,随着Java语言在软件开发领域的广泛应用,越来越多的人对Java编程感兴趣,并希望能够通过在线网站来学习和提高自己的Java编程技能。php中文网给大家带来了相关的视频、教程以及文章,欢迎大家前来学习阅读和下载。

2023.08.03

20011

3

配置java环境变量
配置java环境变量

配置Java环境变量是为了让操作系统能够识别和使用Java的相关命令和功能。本专题为大家提供配置java环境变量相关文章,帮助大家解决问题。

2023.08.03

1195

8

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.6万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.4万人学习