如何在JavaScript中不带任何参数获得URL？

在前端开发中，获取当前URL是一项非常常见的操作。通常情况下，我们可以通过window.location对象来访问当前URL的各种信息，例如协议、主机名、路径、查询字符串等。但有时候，我们需要使用一种更简单的方式，即在JavaScript中不带任何参数获得当前URL。这篇文章将介绍如何实现这个目标。

方法一：使用window.location.href属性

最简单的方法是使用window.location.href属性，它返回当前文档的完整URL字符串。例如：

const currentUrl = window.location.href;
console.log(currentUrl); // https://example.com/path/to/page?param=value#fragment

这种方法的好处是非常直观和简单，几乎所有浏览器都支持。但是，这种方法返回的URL包括了查询字符串和片段标识符，如果你只想获取主机名或路径，就需要对结果进行解析。此外，这种方法无法很好地处理Unicode字符。

方法二：利用HTML DOM API

另一个方法是利用浏览器提供的HTML DOM API。具体来说，我们可以创建一个元素，并设置其href属性为当前URL，然后使用URL构造函数来解析href属性的值。例如：

const a = document.createElement('a');
a.href = '';
const currentUrl = new URL(a.href);
console.log(currentUrl); // https://example.com/path/to/page

这种方法的好处是可以轻松地获取URL的各个组成部分，而且可以正确处理Unicode字符。但是，这种方法需要创建一个DOM元素，如果你在执行频繁的操作，可能会对性能产生影响。

方法三：使用正则表达式

最后一个方法是使用正则表达式。我们可以使用window.location对象的toString()方法来获取当前URL的字符串表示，然后使用正则表达式提取其中的主机名或路径。例如：

const currentUrlString = window.location.toString();
const hostPattern = /^https?:\/\/([^/]+)/i;
const pathPattern = /^https?:\/\/[^/]+(\/[^?#]*)/i;
const currentHost = currentUrlString.match(hostPattern)[1];
const currentPath = currentUrlString.match(pathPattern)[1];
console.log(currentHost); // example.com
console.log(currentPath); // /path/to/page

这种方法的好处是非常灵活和可定制，你可以根据自己的需求定义任意的正则表达式来提取URL的各个部分。但是，这种方法需要一定的正则表达式知识，并且可能比前两种方法更容易出错。

综上所述，以上三种方法都可以用来在JavaScript中不带任何参数获得URL。选择哪种方法取决于你的具体需求和喜好。无论你选择哪种方法，都要记得进行必要的错误处理，以确保你的代码稳定可靠。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10980