JavaScript获取URL汇总

我将为你详细讲解如何在JavaScript中获取URL。

一、获取当前页面URL

要获取当前页面的URL，在JavaScript中可以使用window.location.href属性。window.location对象包含很多元素，如协议（http、https等）、主机名、端口、路径和查询字符串等。使用window.location.href属性可以获取完整的URL字符串。以下是示例代码：

const currentURL = window.location.href;
console.log(currentURL);   //输出当前页面的完整URL

二、获取URL的参数

获取URL参数是在Web开发中很常见的需求。以URLhttp://www.example.com?name=John&age=25为例，获取其中的参数值可以使用以下代码：

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

console.log(urlParams.get('name'));   //输出John
console.log(urlParams.get('age'));    //输出25

上述代码中，我们首先使用window.location.search获取URL中的查询字符串，然后使用URLSearchParams API对查询字符串进行解析。通过urlParams对象的get方法即可获取对应参数的值。在上述示例中，我们获取了URL中的name和age两个参数的值。

另外，如果URL中的参数包含重复的名称，可以使用getAll方法获取所有的值：

console.log(urlParams.getAll('paramName'));

三、获取URL的Hash值

如果URL中包含Hash值，可以使用window.location.hash获取。示例如下：

const hashValue = window.location.hash;
console.log(hashValue);   //输出URL中的Hash值

四、获取URL路径

获取URL的路径可以使用window.location.pathname属性。示例代码如下：

const pathName = window.location.pathname;
console.log(pathName);   //输出URL中的路径

五、获取URL中的域名和协议

获取URL中的域名和协议可以使用window.location.protocol和window.location.hostname属性。示例代码如下：

const protocol = window.location.protocol;
const hostName = window.location.hostname;

console.log(protocol);   //输出URL中的协议（http或https）
console.log(hostName)；  //输出URL中的域名

以上就是在JavaScript中获取URL的攻略，希望对你有帮助！