获取url参数总结

今天在开发项目的时候遇到了需要从url获取参数的问题,之前都是通过vueRouter里的$route.params或者是$router.query来获取。原生的方法不太经常用到,趁着这次机会就总结学习一下。

url的构成

基本构成:

1
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

http:// 这部分属于协议(protocol),协议分为:

  1. http协议
  2. https协议
  3. mailto: 用户打开邮箱和客户端
  4. ftp: 文件转换
  5. file 获取文件
  6. data 获取外部资源

www.example.com 域名(Domain),标明了需要请求的服务器的地址。

:80 端口号,标明了获取服务器资源的入口。用于区分服务器的端口,一台服务器可能有多个服务在运行,服务器的资源通过 IP地址+端口号 来区分不同的服务。

/path/to/myfile.html 文件路径, 表示服务器上资源的路径。此路径表示的是一个抽象地址,并不指代任何物理地址。

?key1=value1&key2=value2 请求参数,这些参数以键值对的形式,通过&符号分割开来。

#SomewhereInTheDocument 对资源的部分补充(fragment),可以理解为资源内部的书签。用来向服务器指明战士的内容所在书签的点。比如对于html来说,点击目录会滚动到特定的位置或者上次浏览过的位置。

url获取

window.location.href

设置或者获取整个URL,返回字符串。

window.location.protocol

设置或者获取URL的协议部分

window.location.host

设置或获取URL的域名部分(主机部分)

window.location.port

设置或获取与URL的端口号

window.location.pathname

设置或获取URL的路径

设置或获取URL的查询参数

window.location.hash

设置或获取片段(fragment)

1
2
3
4
5
6
7
8
9
10
// 正则拆分
function getQueryString(name){
let reg = new RegExp(`(^|&)${name}=([^&*])(&|$)`,'i')
let r = window.location.search.substr(1).match(reg)
if(r!==null){
return decodeURI(r[2])
}
return null;
}
alert(getQueryString("params1"))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// split拆分成对象
function getParams(params){
let url = location.search;
let theRequest = new Object();
if(url.indexOf('?')!== -1){
let str = url.substr(1)
strs = str.split('&')
for(let i =0;i <strs.length;i++){
// 把key=value这种字符串转换成对象的属性
theRequest[strs[i].split('=')[0]] = decodeURL(strs[i].split('=')[1])
}
}
return theRequest[params]
}
let id = getParams(params)

感谢您的阅读。 🙏