js获取当前完整url

在JavaScript中，获取当前完整的URL可以通过多种方式实现。以下是一些常用的方法：

基础概念

• URL（Uniform Resource Locator）：统一资源定位符，用于标识互联网上的资源。
• window.location对象：提供了当前文档的URL信息。

相关优势

• 便捷性：通过内置的window.location对象，可以轻松获取URL的各个部分。
• 灵活性：可以根据需要获取完整的URL或URL的特定部分（如协议、主机名、路径等）。

类型与应用场景

• 获取完整URL：适用于需要在客户端进行URL处理的场景，如重定向、日志记录、数据分析等。
• 获取URL的特定部分：适用于需要对URL进行细粒度操作的场景，如验证参数、提取路径等。

示例代码

以下是获取当前完整URL的几种方法：

方法一：使用window.location.href

const fullUrl = window.location.href;
console.log(fullUrl);

方法二：拼接各个部分

const protocol = window.location.protocol;
const host = window.location.host;
const pathname = window.location.pathname;
const search = window.location.search;
const hash = window.location.hash;

const fullUrl = `${protocol}//${host}${pathname}${search}${hash}`;
console.log(fullUrl);

可能遇到的问题及解决方法

问题1：获取到的URL包含多余的斜杠（/）

• 原因：URL的不同部分可能包含多余的斜杠，导致最终的URL不符合预期。
• 解决方法：使用字符串处理函数去除多余的斜杠。

const cleanUrl = fullUrl.replace(/\/+/g, '/');
console.log(cleanUrl);

问题2：获取到的URL包含特殊字符

• 原因：URL中可能包含需要进行编码的特殊字符。
• 解决方法：使用encodeURIComponent对URL进行编码。

const encodedUrl = encodeURIComponent(fullUrl);
console.log(encodedUrl);

总结

通过window.location对象可以方便地获取当前页面的完整URL。在实际应用中，可以根据具体需求选择合适的方法，并注意处理可能出现的多余斜杠或特殊字符问题。