JS--获取当前域名、端口号、url、参数--方法/实例

深碍√TFBOYSˉ_ 2023-10-01 08:43 11阅读 0赞

原文网址：[JS--获取当前域名、端口号、url、参数--方法/实例\_IT利刃出鞘的博客-CSDN博客][JS--_url_--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍如何使用JavaScript获取当前页面的这些数据：域名、端口号、Url、相对路径和参数、指定参数。

**测试方法**

本文用此网址来测试：[https://knife.blog.csdn.net/article/details/121482997?ab=12&cde=345][https_knife.blog.csdn.net_article_details_121482997_ab_12_cde_345]

访问之后，在浏览器里使用Console来测试：

![57fbf9203640444fae711f7a993f2767.png][]

## location的属性 ##

windows.location有如下属性，可以通过windows.location.xxx获取。

<table style="width:663px;"> 
 <tbody> 
 <tr> 
 <td style="width:85px;"> 属性 </td> 
 <td style="width:177px;"> 值 </td> 
 <td style="width:398px;"> 举例结果 </td> 
 </tr> 
 <tr> 
 <td style="width:85px;"> href </td> 
 <td style="width:177px;"> 完整的 URL </td> 
 <td style="width:398px;"> <a href="http://localhost:8080/project/front/user/serviceIndex?type=1" title="http://localhost:8080/project/front/user/serviceIndex?type=1" rel="nofollow">http://localhost:8080/project/front/user/serviceIndex?type=1</a> </td> 
 </tr> 
 <tr> 
 <td style="width:85px;"> protocol </td> 
 <td style="width:177px;"> 协议 </td> 
 <td style="width:398px;"> http: </td> 
 </tr> 
 <tr> 
 <td style="width:85px;">host</td> 
 <td style="width:177px;">主机</td> 
 <td style="width:398px;">localhost:8080</td> 
 </tr> 
 <tr> 
 <td style="width:85px;"> hostname </td> 
 <td style="width:177px;"> 主机名 </td> 
 <td style="width:398px;"> localhost </td> 
 </tr> 
 <tr> 
 <td style="width:85px;"> port </td> 
 <td style="width:177px;"> 端口号 </td> 
 <td style="width:398px;"> 8080 </td> 
 </tr> 
 <tr> 
 <td style="width:85px;"> host </td> 
 <td style="width:177px;"> 主机名+端口号 </td> 
 <td style="width:398px;"> localhost:8080 </td> 
 </tr> 
 <tr> 
 <td style="width:85px;"> pathname </td> 
 <td style="width:177px;"> 当前 URL 的相对路径 </td> 
 <td style="width:398px;"> /project/front/user/serviceIndex </td> 
 </tr> 
 <tr> 
 <td style="width:85px;"> search </td> 
 <td style="width:177px;"> 当前 URL 的参数 </td> 
 <td style="width:398px;"> ?type=1 </td> 
 </tr> 
 <tr> 
 <td style="width:85px;"> hash </td> 
 <td style="width:177px;"> #开始的锚 </td> 
 <td style="width:398px;"> </td> 
 </tr> 
 </tbody> 
</table>

## 获取当前域名 ##

**法1：window.location.host**

var domain = window.location.host;
    console.log(domain);

结果：knife.blog.csdn.net

**法2：document.domain**

var domain = document.domain;
    console.log(domain);

结果：csdn.net

## 获取端口号 ##

**法1：window.location.port**

var port = window.location.port;
    console.log(port);

结果：undefined

本处是域名网址，所以没有端口号

## 获取url ##

有如下四种方式，获得的都是整个url。

1.  window.location.href
2.  self.location.href
3.  document.URL
4.  document.location.href

例：

var url = window.location.href;
    console.log(url);

结果：[https://knife.blog.csdn.net/article/details/121482997?ab=12&cde=345][https_knife.blog.csdn.net_article_details_121482997_ab_12_cde_345 1]

## 获取域名+端口+路由 ##

window.location.href; 获取的url会把？后面的参数也带过去，如果不需要后面的参数，可以这样处理：

let routerIndex = window.location.href.indexOf('?');
    let url = window.location.href.slice(0, routerIndex > 0 ? routerIndex : window.location.href.length);
    console.log(url);

结果：[https://knife.blog.csdn.net/article/details/121482997][https_knife.blog.csdn.net_article_details_121482997]

## 获取相对路径 ##

首先获取 Url，然后把 Url 通过 // 截成两部分，再从后一部分中截取相对路径。如果截取到的相对路径中有参数，则把参数去掉。

function getUrlRelativePath()
    {
    　　var url = document.location.toString();
    　　var arrUrl = url.split("//");
    
    　　var start = arrUrl[1].indexOf("/");
    　　var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符
    
    　　if(relUrl.indexOf("?") != -1){
    　　　　relUrl = relUrl.split("?")[0];
    　　}
    　　return relUrl;
    }

调用方法：getUrlRelativePath();

结果：/article/details/121482997

## 获取参数 ##

**法1：正则表达式**

function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var result = window.location.search.substr(1).match(reg);
    
        if (result != null) {
           return unescape(result[2]);
        }
        return null;
    }
    getQueryString('ab');

结果：12

**法2：split拆分法**

结果：12

[JS--_url_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121778515
[https_knife.blog.csdn.net_article_details_121482997_ab_12_cde_345]: https://knife.blog.csdn.net/article/details/121482997?abc=123&defg=456
[57fbf9203640444fae711f7a993f2767.png]: https://img-blog.csdnimg.cn/57fbf9203640444fae711f7a993f2767.png
[https_knife.blog.csdn.net_article_details_121482997_ab_12_cde_345 1]: https://knife.blog.csdn.net/article/details/121482997?ab=12&cde=345
[https_knife.blog.csdn.net_article_details_121482997]: https://knife.blog.csdn.net/article/details/121482997