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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 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()

使用 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

参考

使用JavaScript解析URL的方法示例

            </div>
目录
相关文章
|
23天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
9天前
|
存储 Cloud Native 关系型数据库
Ganos实时热力聚合查询能力解析与最佳实践
Ganos是由阿里云数据库产品事业部与飞天实验室共同研发的新一代云原生位置智能引擎,集成于PolarDB-PG、Lindorm、AnalyticDB-PG和RDS-PG等核心产品中。Ganos拥有十大核心引擎,涵盖几何、栅格、轨迹等多种数据处理能力,实现了多模多态数据的一体化存储、查询与分析。本文重点介绍了Ganos的热力瓦片(HMT)技术,通过实时热力聚合查询与动态输出热力瓦片,无需预处理即可实现大规模数据秒级聚合与渲染,适用于交通、城市管理、共享出行等多个领域。HMT相比传统网格聚合技术具有高效、易用的优势,并已在多个真实场景中验证其卓越性能。
22 0
|
11天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
15 2
前端JS读取文件内容并展示到页面上
|
5天前
|
域名解析 网络协议 安全
DNS查询工具简介
DNS查询工具简介
17 4
|
11天前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
22 1
|
25天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
8天前
|
JavaScript 前端开发
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
|
9天前
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。
|
9天前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
22 0
|
1月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
18 1

热门文章

最新文章

推荐镜像

更多
下一篇
无影云桌面