在JavaScript中创建一个新的位置对象

Question

在JavaScript中是否可以创建一个新的Location对象？我有一个字符串形式的URL，我想利用JavaScript已经提供的功能来访问它的不同部分。

这是我所说的一个例子（我知道这样做是不行的）：

var url = new window.location("http://www.example.com/some/path?name=value#anchor");
var protocol = url.protocol;
var hash = url.hash;
// etc etc

有没有类似这样的东西可用，还是说我基本上必须自己创建这个对象？

- Josh Johnson

Answer 1

好的，你可以使用锚元素来提取URL的部分，例如：

var url = document.createElement('a');
url.href = "http://www.example.com/some/path?name=value#anchor";
var protocol = url.protocol;
var hash = url.hash;

alert('protocol: ' + protocol);
alert('hash: ' + hash);
​

它可以在所有现代浏览器上运行，甚至在IE 5.5+上也可以。

在此处检查一个示例here。

- Christian C. Salvadó

---

我不知道你可以做那个。很棒。 - lawnsea

同上。我也不知道<a>标签可以实现定位。 - Josh Johnson

重要提示：看起来Internet Explorer存在一个错误，它会在像这样的对象上省略路径名属性的前导斜杠。您可以通过执行以下操作来规范化它： url.pathname = url.pathname.replace(/(^\/?)/,"/"); - Yahel

如果您尝试使用此功能来验证URL，则会出现奇怪的情况。当您输入无效的URL（例如url.href =“http”）时，它会将主机名默认为运行JS代码的站点域。 - Sean

那是完美的解决方案！ - Egor

Answer 2

使用标准的URL对象怎么样？

const url = new URL("http://www.example.com/some/path?name=value#anchor");
const { hash } = url;

然后console.log(hash)将输出#anchor。

警告: 这个接口有点新，所以如果您不使用转译器，请检查兼容性表格并在目标浏览器上进行测试。

- Rael Gugelmin Cunha

---

只要不需要支持Internet Explorer，这肯定是最佳解决方案。URL接口使用与Location相同的所有属性名称，因此它完全向后兼容，但它还添加了一个非常有用的 searchParams 属性。 - Hayden Schiff

别忘了在 new URL( 中加上 new。 - user3064538

Answer 3

你可以利用锚点元素的功能。

var aLink = document.createElement("a");
aLink.href="http://www.example.com/foo/bar.html?q=123#asdf";
alert(aLink.pathname);

- epascarello

Answer 4

你可以在正则表达式中解析它，以获取匹配的部分...我现在没有完整的代码，但这可以用来获取查询数据：

var myUrl = window.location.href;
var matches = myUrl.match(/([^\?]+)\?(.+)/);
var queryData = matches[2];

matches[0] 是完整的字符串，matches(1) 是URL的第一部分（直到?）...如果您想要的话，可以构建一个正则表达式来解析字符串URL的每个部分...

您还可以使用已经存在的许多库之一来实现这一点。

- Andir