js怎么拿到url

在JavaScript中获取URL的方法包括：window.location对象、document.URL、URL接口、以及通过正则表达式解析等。 其中最常用的是使用window.location对象，因为它不仅可以获取当前页面的URL，还能拆解出URL的各个组成部分，例如协议、主机名、路径和查询参数等。这在开发中非常实用，因为你可以根据具体需求灵活操作URL的各个部分。

例如，window.location.href返回完整的URL，window.location.hostname返回主机名，这些属性可以用于不同的场景。详细讲解如下。

一、WINDOW.LOCATION对象

1.1 获取完整的URL

window.location.href是最常用的获取当前页面URL的方式。它返回一个字符串，包含整个URL。

let currentURL = window.location.href;
console.log(currentURL); // 输出完整的URL

1.2 获取URL的各个部分

window.location对象还提供了其他属性来获取URL的各个部分：

protocol: 返回协议部分（例如 "http:" 或 "https:"）
hostname: 返回主机名（例如 "www.example.com"）
pathname: 返回路径部分（例如 "/path/to/page"）
search: 返回查询字符串（例如 "?param1=value1&param2=value2"）
hash: 返回片段标识符（例如 "#section1"）

console.log(window.location.protocol); // 输出 "https:"
console.log(window.location.hostname); // 输出 "www.example.com"
console.log(window.location.pathname); // 输出 "/path/to/page"
console.log(window.location.search);   // 输出 "?param1=value1&param2=value2"
console.log(window.location.hash);     // 输出 "#section1"

二、DOCUMENT.URL

虽然不如window.location常用，但document.URL也可以用来获取当前页面的URL。它返回当前文档的完整URL。

let docURL = document.URL;
console.log(docURL); // 输出完整的URL

三、URL接口

URL接口提供了一个更强大和灵活的方式来解析和操作URL。你可以使用new URL()来创建一个URL对象，并访问其属性。

let url = new URL(window.location.href);
console.log(url.hostname); // 输出主机名
console.log(url.pathname); // 输出路径
console.log(url.searchParams.get('param1')); // 获取查询参数

3.1 修改URL

URL接口不仅可以读取，还能修改URL。例如，你可以改变查询参数：

let url = new URL(window.location.href);
url.searchParams.set('param1', 'newValue');
console.log(url.toString()); // 输出修改后的URL

四、正则表达式解析

在某些特定场景下，可能需要使用正则表达式来解析URL。虽然这种方法不如前面几种灵活，但在需要自定义解析逻辑时很有用。

let url = window.location.href;
let regex = /(https?)://(www.)?([^/]+)(/[^?#]*)?(?[^#]*)?(#.*)?/;
let matches = url.match(regex);
console.log(matches[3]); // 输出主机名

五、应用场景和最佳实践

5.1 动态生成链接

在单页应用（SPA）中，经常需要根据某些条件动态生成链接。这时，可以使用URL接口来构建和修改URL。

let baseURL = "https://www.example.com";
let url = new URL(baseURL);
url.pathname = "/new/path";
url.searchParams.set('param', 'value');
console.log(url.toString()); // 输出 "https://www.example.com/new/path?param=value"

5.2 分析用户访问路径

在用户行为分析中，经常需要分析用户的访问路径。这时，可以使用window.location.pathname来获取用户访问的具体路径。

let path = window.location.pathname;
if (path === "/homepage") {
  // 用户访问的是主页
}

5.3 处理查询参数

在表单提交和数据请求中，查询参数非常重要。使用URL接口的searchParams属性可以方便地处理查询参数。

let params = new URLSearchParams(window.location.search);
let value1 = params.get('param1');
let value2 = params.get('param2');

六、常见问题和解决方案

6.1 获取URL时忽略hash

有时你可能需要获取URL而不包括hash部分。这时可以使用window.location.href.split('#')[0]。

let urlWithoutHash = window.location.href.split('#')[0];
console.log(urlWithoutHash); // 输出不包括hash的URL

6.2 处理相对URL

在处理相对URL时，可以使用URL接口将其转换为绝对URL。

let relativeURL = "/path/to/resource";
let absoluteURL = new URL(relativeURL, window.location.origin);
console.log(absoluteURL.toString()); // 输出绝对URL

七、总结

在JavaScript中获取URL的方法多种多样，最常用的是window.location对象，它提供了获取和操作URL各个部分的丰富功能。document.URL和URL接口也是有用的工具，特别是在需要更复杂的URL操作时。正则表达式解析虽然不常用，但在特定场景下可以提供灵活性。理解并熟练使用这些方法，可以大大提高网页开发的效率和灵活性。