JS - 获取当前页面的 url地址及相关信息

原创已于 2022-07-04 16:21:37 修改 · 2.4k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端基础__JS - 浏览器

于 2021-02-22 17:05:09 首次发布

本文介绍了如何使用JavaScript获取当前页面的URL地址及其详细信息，包括协议、域名、端口、路径和查询参数。同时，提供了一个函数用于解析URL后的指定参数。通过window.location对象的属性可以轻松获取这些信息，而getQueryString函数则帮助提取特定参数值。

JS - 获取当前页面的 url地址及相关信息

一. 获取当前页面的 url地址
二. 获取当前网址url 后的指定参数

一. 获取当前页面的 url地址

window.location

以http://localhost:8080/home?id=123地址为例

url 地址

方法：window.location.href
结果： http://localhost:8080/home?id=123
地址协议

方法：window.location.protocol
结果： http:
域名 + 端口

方法：window.location.host
结果： localhost:8080
域名

方法：window.location.hostname
结果： localhost
域名

方法：window.location.port
结果： 8080
路径

方法：window.location.pathname
结果： /home
请求的参数

方法：window.location.search
结果： ?id=123
协议 + 域名 + 端口

方法：window.location.origin
结果： http://localhost:8080

二. 获取当前网址url 后的指定参数

// 获取当前网址url 后的指定参数
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
//https://www.baidu.com/?tn=48021271_15_hao_pg
let res = getQueryString("tn");
console.log(res);