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

简介: 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>
目录
相关文章
|
移动开发 Java HTML5
Springboot web静态资源配置
Springboot web静态资源配置
348 0
|
11月前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
3月前
|
前端开发 数据可视化 Java
开发 JavaFX 与 Java Swing 桌面应用的实用技巧与实践方案
本文介绍了Java桌面应用开发的技术选型与JavaFX实战方案。首先对比了JavaFX和Swing的特点,推荐JavaFX更适合现代UI需求。重点讲解了JavaFX 19+的技术升级,包括模块化开发(module-info.java配置)和响应式UI设计(CSS样式管理)。在数据访问层展示了JDBC 4.3的集成和异步加载实现。高级UI组件部分演示了自定义表格和图表可视化的开发方法。最后介绍了MVVM架构的实现,包括视图模型的数据绑定和FXML控制器的集成,为开发者提供了完整的JavaFX桌面应用开发解决方案。
191 0
|
10月前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
543 63
|
JavaScript
js 获取并解析 url 中参数的三种方法
js 获取并解析 url 中参数的三种方法
1756 0
|
11月前
|
存储 前端开发 UED
uni-app:icon&修改tabber&unu-ui (四)
本文介绍了如何从阿里巴巴下载矢量图标并使用 `iconfont`,包括创建项目、下载文件、引入 `font.css` 到项目中以及在 `app.vue` 中引用的方法。同时,还详细说明了如何修改 `tabbar` 的样式和配置,以及如何在项目中导入和使用 `uni-ui` 组件库,包括简单的弹出框 `popup` 和带有头部或尾部图标的输入框 `input`。
499 0
|
安全 Java UED
Header Location重定向机制解析与应用
Header Location重定向机制解析与应用
|
JavaScript 前端开发
javascript获取url信息的常见方法
javascript获取url信息的常见方法
396 2
|
人工智能 算法 大数据
【Python初级人工智能精讲】用Paddlehub给一段没有标点符号的文字加上合适的标点符号
今天给分享的程序是:给一段文字自动加上合适的标点符号,使用的是飞桨的AI算法模型:auto_punc,可以智能的分析文字中的情感并在每段文字中加上适合的标点符号。
【Python初级人工智能精讲】用Paddlehub给一段没有标点符号的文字加上合适的标点符号