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

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

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

简介

说明

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

测试方法

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

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

location的属性

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

属性	值	举例结果
href	完整的 URL	http://localhost:8080/project/front/user/serviceIndex?type=1
protocol	协议	http:
host	主机	localhost:8080
hostname	主机名	localhost
port	端口号	8080
host	主机名+端口号	localhost:8080
pathname	当前 URL 的相对路径	/project/front/user/serviceIndex
search	当前 URL 的参数	?type=1
hash	#开始的锚

获取当前域名

法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。

window.location.href
self.location.href
document.URL
document.location.href

例：

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

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

获取域名+端口+路由

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

获取相对路径

首先获取 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拆分法

function getRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
             for(var i = 0; i < strs.length; i ++) {
                     theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
              }
        }
    return theRequest;
}
console.log(getRequest()['ab']);