js:URL、URLSearchParams解析当前页面url和查询参数

本文涉及的产品
云解析DNS,个人版 1个月
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: js:URL、URLSearchParams解析当前页面url和查询参数

假设当前页面的url是


https://www.baidu.com/index.html?query=Tom#app

获取当前URL对象

window.location

打印出的结果


hash: '',
host: 'www.baidu.com',
hostname: 'www.baidu.com',
href: 'https://www.baidu.com/index.html?query=Tom#app',
origin: 'https://www.baidu.com',
pathname: '/index.html',
port: '',
protocol: 'https:',
search: '?query=Tom',
reload()
replace()

创建 URL 对象

var url = new URL("https://www.baidu.com/index.html?query=Tom#app");
console.log(url);
URL {
  href: 'https://www.baidu.com/index.html?query=Tom#app',
  origin: 'https://www.baidu.com',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'www.baidu.com',
  hostname: 'www.baidu.com',
  port: '',
  pathname: '/index.html',
  search: '?query=Tom',
  searchParams: URLSearchParams { 'query' => 'Tom' },
  hash: '#app' 
}
协议 protocol
主机名 hostname
端口 port
主机 host
来源 origin)
文件名 pathname
锚点 hash
查询参数 search

使用 URLSearchParams 解析查询参数

var searchParams = new URLSearchParams("query=Tom");
console.log(searchParams);
// URLSearchParams { 'query' => 'Tom' }
console.log(searchParams.get("query"));
// Tom

使用实例

1、Node端示例


let href = "https://www.baidu.com/index.html?name=Tom";
let url = new URL(href);
let name = url.searchParams.get("name");
console.log(name);
// Tom

2、 浏览器下示例


// https://www.baidu.com/index.html?name=Tom
let url = new URL(window.location.href);
let name = url.searchParams.get("name");
console.log(name);
// Tom

相关文章
|
6天前
|
算法 安全 API
淘宝获得淘口令真实URL接口的技术解析
淘口令是淘宝的加密链接,用于商品推广。官方未提供直接解密API,但第三方工具或API能模拟解析。示例代码展示了如何通过第三方接口(需替换为真实接口)获取淘口令所对应的URL、标题和图片信息,但使用时需注意安全风险。
|
12天前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
12 0
JS代码动态打印404页面源码
|
8天前
|
存储 SQL Python
`urllib.parse`模块是Python标准库`urllib`中的一个子模块,它提供了处理URL(统一资源定位符)的实用功能。这些功能包括解析URL、组合URL、转义URL中的特殊字符等。
`urllib.parse`模块是Python标准库`urllib`中的一个子模块,它提供了处理URL(统一资源定位符)的实用功能。这些功能包括解析URL、组合URL、转义URL中的特殊字符等。
|
11天前
|
测试技术 UED
断网之后的页面,Autox.js是点击还是上下滑动比较好?
断网之后的页面,Autox.js是点击还是上下滑动比较好?
|
11天前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
|
18天前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
|
20天前
|
JavaScript
js 下载文件(根据URL下载文件,根据URL下载图片)
js 下载文件(根据URL下载文件,根据URL下载图片)
14 0
|
20天前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
29 0
|
20天前
|
JavaScript
js 获取并解析 url 中参数的三种方法
js 获取并解析 url 中参数的三种方法
10 0
|
1月前
|
XML Java 数据格式
深度解析 Spring 源码:从 BeanDefinition 源码探索 Bean 的本质
深度解析 Spring 源码:从 BeanDefinition 源码探索 Bean 的本质
33 3

推荐镜像

更多