在JavaScript中创建新的Location对象

73

是否可以在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

这样的事情有可能发生吗，或者我本质上必须自己创建此对象？

javascript url-parsing

— 乔希·约翰逊（Josh Johnson）
source

123

好吧，您可以使用锚元素提取网址部分，例如：

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+。

在此处查看示例。

— 克里斯蒂安·C·萨尔瓦多
source

5

我不知道你能做到整齐。

— 草坪海

1

+1我输入的内容。该<a>元素实现locationURL分解属性可以追溯到最早的JavaScript版本，并且在任何地方都受支持。（最终！）它在HTML5规范中已标准化。

— bobince 2010年

3

+1。同上。我也不知道<a>实施位置。

— 乔什·约翰逊

4

重要说明：Internet Explorer似乎有一个错误，它忽略了像这样的对象的pathname属性上的斜杠。您可以通过执行以下操作将其标准化： url.pathname = url.pathname.replace(/(^\/?)/,"/");

— Yahel 2012年

1

如果您尝试使用此方法来验证URL，它将变得很奇怪。当输入无效的URL（例如）时url.href = "http"，它会将主机名默认为运行JS代码的站点的域。

— 肖恩

31

如何使用标准URL对象？

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

警告：此界面有点新，因此，如果您未使用Transpiler，请检查兼容性表并在目标浏览器上进行测试。

— 雷尔·古格尔敏·库尼亚（Rael Gugelmin Cunha）
source

2

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

— 海登·希夫

不要忘记其中new的内容new URL(。

— 鲍里斯（Boris）

8

您可以利用锚元素的力量

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

— epascarello
source

-3

您可以在正则表达式中对其进行解析，以将部分作为匹配项...我现在没有完整的代码，但这可用于获取querydata：

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

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

您也可以使用现有的许多库之一。

— 安迪尔
source