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

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

使用 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>
目录
相关文章
|
5月前
|
JavaScript 前端开发 API
详解JS的URL()和URLSearchParams() API接口
详解JS的URL()和URLSearchParams() API接口
110 2
|
4月前
|
JavaScript
js 获取并解析 url 中参数的三种方法
js 获取并解析 url 中参数的三种方法
401 0
|
JavaScript
js获取 url 参数值的方法总结
js获取 url 参数值的方法总结
177 0
|
6月前
|
JavaScript 前端开发 API
(简单详细)javascript中new url()属性,轻松解析url地址
(简单详细)javascript中new url()属性,轻松解析url地址
553 0
|
6月前
|
JavaScript
JS 获取 URL 参数
JS 获取 URL 参数
85 0
|
JavaScript
【JS】获取当前页面的url的参数和相对路径
【JS】获取当前页面的url的参数和相对路径
345 0
【JS】获取当前页面的url的参数和相对路径
|
JavaScript 前端开发
js:URL、URLSearchParams解析当前页面url和查询参数
js:URL、URLSearchParams解析当前页面url和查询参数
141 0
|
JavaScript
JS解析url中的参数
JS解析url中的参数
207 0
|
JavaScript
通过JS获取URL携带的参数
通过JS获取URL携带的参数
139 0
下一篇
无影云桌面